CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

marx Nybegynder

07. maj 2004 - 00:53 Der er 17 kommentarer og
1 løsning

Hurtigste menu

Hej,

Vil gerne have lavet en menu, som skal være tekstbaseret, dvs. uden grafikfiler. Har regnet med tabeller, hvor tabellen skifter baggrundsfarve når man kører musen over. Ved det kan laves i CSS, men kan det gøres hurtigere på andre måder?

Menuen skal være sidelæns, dvs. den skal ligge på en vandret bjælke a la:

knap1 knap2 knap3 knap4 knap5

ikke:

knap1
knap2
knap3
knap4
knap5

Håber på hjælp!

Synes godt om

roenving Novice

07. maj 2004 - 00:56 #1

-- og du skal ikke folde noget ud ?-)

Synes godt om

marx Nybegynder

07. maj 2004 - 01:03 #2

Det var ik idéen. Bare at baggrunden skiftet farve ved hover. Men kan du klare begge dele ville jeg da også gerne se koderne til en drop-down.. :-) Siden ligger i tabeller, centreret på siden.

Men først det simple fra spm. 1, hvis du ka hjælpe der.

Synes godt om

skovenborg Nybegynder

07. maj 2004 - 01:07 #3

en dropdown-menu i CSS er ikke realistisk hvis du vil have den til at virke i IE - her er mulighederne for få. Har selv lavet nogle stykker - men virker kun i mozilla, bla.:
http://www.skovenborg.frac.dk/cssworkshop/menus/listmenu.php

Synes godt om

skovenborg Nybegynder

07. maj 2004 - 01:10 #4

et hurtigt - lettere grimt - eksempel:
<div class="menu">
<a href="#">LINK1</a><a href="#">LINK2</a><a href="#">LINK3</a><a href="#">LINK4</a>
</div>
og
<style type="text/css">
.menu A {
display:block;
width:150px;
background-color:#f00;
color:#000;
text-decoration:none;
float:left;
}
.menu A:hover {
background-color:#ff0;
}
</style>

Synes godt om

skovenborg Nybegynder

07. maj 2004 - 01:13 #5

hvis du vil have det i en tabel kunne det se sådan ud:
<style type="text/css">
.menu TD {
width:150px;
}
.menu A {
display:block;
background-color:#f00;
color:#000;
width:100%;
text-decoration:none;
}
.menu A:hover {
background-color:#ff0;
}
</style>

<table class="menu">
<tr>
<td><a href="#">LINK1</a></td>
<td><a href="#">LINK2</a></td>
<td><a href="#">LINK3</a></td>
<td><a href="#">LINK4</a></td>
</tr>
</table>

Synes godt om

marx Nybegynder

07. maj 2004 - 01:17 #6

Godtaget skovenborg!

svar, så du ka få points

Synes godt om

skovenborg Nybegynder

07. maj 2004 - 01:18 #7

værsgo' - jeg håber du kan få det til at se lidt pænere ud, men design er ikke min stærke side (og jeg plejer som eksempel altid at vælge den slags hurtige farver) ;-)

Synes godt om

marx Nybegynder

07. maj 2004 - 01:20 #8

hehe, leger med det i weekenden. Det er sent nu, og man skal til konfirmation i morgen... Godnat, og tak!

Synes godt om

marx Nybegynder

07. maj 2004 - 01:21 #9

svarer lige så..

Synes godt om

skovenborg Nybegynder

07. maj 2004 - 01:26 #10

jamen held og lykke - og tak for points :-)

Synes godt om

doggy82 Praktikant

07. maj 2004 - 12:15 #11

Se os den her som jeg har lavet:
<html>
<head>
<title>menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

div.top {
display:block;
background: #333333;
padding: 2px 4px;
cursor:default;
}

a.topmenu {
font-family: sans-serif;
font-size:16px;
border: 2px #000 solid;
color: #000;
padding: 4px 16px;
background: #EEEEEE;
text-decoration: none;
font-weight:bold;
}
a.topmenu:hover {
font-family: sans-serif;
font-size:16px;
border: 2px #000 solid;
color: #fff;
padding: 8px 16px;
background: #666;
text-decoration: none;
font-weight:bold;
}
</style>
</head>
</head>
<body>
<div class="top">
<a class="topmenu" href="projects.htm" title="">projects</a>
<a class="topmenu" href="links.htm" title="">links</a>
<a class="topmenu" href="resources.htm" title="">resources</a>
<a class="topmenu" href="contact.htm" title="">contact</a>
</div>
</body>
</html>

Synes godt om

skovenborg Nybegynder

07. maj 2004 - 13:57 #12

ja, den ser lidt mere blæret ud :-)

btw behøver du ikke at skrive display:block i din div.top. Div'er er som standard altid block-elementer ;-)

Synes godt om

doggy82 Praktikant

07. maj 2004 - 14:11 #13

Ja - Ved heller ikke hvorfor jeg har skrevet det :)
Har nok lavet nogle andre eksperimenter hvor der var brug for det, dengang jeg lavede det.

Synes godt om

skovenborg Nybegynder

07. maj 2004 - 14:16 #14

men flot er den - meget inspirerende. Du bruger også en anden teknik end mig ved at bruge padding til at gøre boksen større, mens jeg blot laver A-elementerne om til block-elementer og derefter sætter en standard bredde på dem.

Og så til sidst - ikke for at brokke mig - men du har skrevet </head> to gange ;-)

Synes godt om

doggy82 Praktikant

07. maj 2004 - 14:21 #15

hehe ja. Jeg klippe-klistrede det ud af en større side.

Synes godt om

skovenborg Nybegynder

07. maj 2004 - 14:24 #16

ja, kender det godt ;-)

Synes godt om

marx Nybegynder

08. maj 2004 - 16:50 #17

doggy:
cool eksempel, men i mit tilfælde må knappen ik udvide sig.

Synes godt om

marx Nybegynder

10. maj 2004 - 01:18 #18

Hej igen..

er det muligt at få farven til at fade væk når man kører musen væk fra knappen?

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS