Hjælp til horisontal menu

Ret følgende styles til:

#navcontainer ul li a {
padding: 12px 0;
color: White;
text-decoration: none;
float: left;
background:url(../images/menuspace.jpg)  0px  no-repeat  50%;
display:block;
width: 80px;
text-align: center;
}

#navcontainer ul li a:hover{
color:black;
background:url(../images/forside_tilrettet_ny_r6_c5.jpg) 0px  no-repeat  50%;
}

Tak for dit svar det hjalp lidt.

Men hvordan får jeg nu det verticale seperator billede til højre for menupunkterne?

Ændre style til:

#navcontainer ul li a {
background:transparent url(../images/menuspace.jpg) no-repeat right;
color:White;
display:block;
float:left;
padding:12px 0pt;
text-align:center;
text-decoration:none;
width:80px;
}

Det virkede også.

Nu er mit eneste problem at den blå bar udvider vinduet så der bliver en horisontal scrollbar. hvis jeg sætter width til 100% udvider den vinduet endnu mere...

Er ikke helt med, hvad udvider du til 100%, kan du være lidt mere konkret.

Evt lave rettelsen på dit site så jeg kan det problemet.

Den blå bar bag menuen strækker sig længere end browservinduets kant og man får derved en scroll bar i bunden... Ligesom man ser nu.

Det må skyldes du regner galt 93% af 1000 er 930 og du sætter en padding-left til 87. Dette vil give en samlet bredde på 1017 på #wrap, så jeg ville sætte den til 70. Så tror hvis du ændre style til.

#navcontainer ul {
background-color:#00396E;
color:White;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:12px;
font-weight:bold;
margin-left:0pt;
padding-left:70px;
width:93%;
}

Du kan se nu at logoet i øverste venstre hjørne centrere sig afhængigt af browservinduets størrelse.

Men den blå bar skal hele tiden strække sig 100%... håber du kan følge mig. Ved du hvordan jeg opnår det?

Kan ikke lige følge dig. Den blå bar den er 1000px bred, så forstå ikke hvad du mener med at den skal strække sig 100%. Skal den være lige så bred som vinduet eller hvordan skal det se ud og fungere.

Den blå bar skal være lige så bred som vinduet. logoet i øverste venstre hjørne og menupunkterne skal centrere sig afhængigt af browservinduets størrelse.

Det skal ses i Firefox pt.

prøv der at at ændre browservinduets størrelse så kan du se at logo, menupunkter og den blå bar følger med.
Men den blå bar skal ikke følge med. Hvordan ændrer jeg det?

Så ville jeg ændre følgende styles til:

#contentwrap {
text-align: left;
width:100%;
background-color: #00396E;
height: 37px;
}
#navcontainer {
margin:0px auto;
width: 1000px;
}
#navcontainer ul {
background-color:#00396E;
color:White;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:1.2em;
font-weight:bold;
margin:0pt;
padding-left:70px;
width:93%;
}

Nu har jeg lavet det som det skal være, så kan du se hvad jeg mener. Men tusind tak for hjælpen.

Der er stadig en lille ting. den lille seperator mellem menupunkterne ses stadig lige til venstre for mouse overknappen. Ved du hvordan jeg skjuler den ved mouse over?

Det kan da ikke passe, og den ses ikke hos mig. Den bliver jo skiftet ud når du hover den.

#navcontainer ul li a {
background:transparent url(../images/menuspace.jpg) no-repeat scroll right center;
color:White;
display:block;
float:left;
padding:11px 0px;
text-align:center;
text-decoration:none;
width:80px;
}

#navcontainer ul li a:hover, body#intro #active a {
background:transparent url(../images/forside_tilrettet_ny_r6_c5.jpg) no-repeat scroll 0pt 54%;
color:black;
}

#navcontainer ul li a:hover har precedens over #navcontainer ul li a

Du har forøvrigt defineret #navcontainer ul li a:hover 2 gange

#navcontainer ul li a:hover, body#intro #active a {
background:transparent url(../images/forside_tilrettet_ny_r6_c5.jpg) no-repeat scroll 0pt 54%;
color:black;
}

#navcontainer ul li a:hover, body#sport #sportlink a {
background:transparent url(../images/forside_tilrettet_ny_r6_c5.jpg) no-repeat scroll 0pt 54%;
color:black;
}

jeg har defineret hover to gange. En for hvert selected state. Så angives der et id i body til hvilken side man er på.

Mht. Til seperatoren skjules den højre ganske vist for den hører til det menupunkt man klikker på men den til venstre for er stadig synlig hvis du ser godt efter...

Klikker man på et andet menupunkt, er det vel meningen at netop det menupunkt bliver aktivt og fremhævet med dit runde billede.

Og det her:

#navcontainer ul li a:hover, body#intro #active a {
background:transparent url(../images/forside_tilrettet_ny_r6_c5.jpg) no-repeat scroll 0pt 54%;
color:black;
}

#navcontainer ul li a:hover, body#sport #sportlink a {
background:transparent url(../images/forside_tilrettet_ny_r6_c5.jpg) no-repeat scroll 0pt 54%;
color:black;
}

Er det samme som det her:
#navcontainer ul li a:hover, body#intro #active a, body#sport #sportlink a {
background:transparent url(../images/forside_tilrettet_ny_r6_c5.jpg) no-repeat scroll 0pt 54%;
color:black;
}

Nu har jeg lavet en side til menupunktet sport. Så kan du se hvad der sker.

Har du en løsning til seperatoren som stadig er synlig når der er klikket?

<ole>

Det er da vist ikke validt med et inline li-element, der indeholder et block a-element  :)

/mvh
</bole>

Nu kan jeg godt se hvad du mener, og ved ikke lige hvad der kan gøres ved det, den høre jo til forside menupunktet. Men et forslag kunne være at lade seperatoren være venstre stillet og så have en fast højre seperator ved/på det sidste menupunkt. men du skal gøre noget aktivt med din kode, evt et tomt menupunkt som det allersidste i menuen (workaround).

OK det prøver jeg, ellers må jeg bruge javascript.

Du skal have tak for hjælpen jeg har lært en del.

Rigtig god fornøjelse