Gå til innhold

Problemer med active state i css-meny

Kenny Bones

Anbefalte innlegg

Kenny Bones

Kenny Bones

Skrevet
Skrevet (endret)

Hei! Jeg prøver å få til en meny basert på denne guiden:

http://www.456bereastreet.com/archive/2005...state_with_css/

 

Jeg har en side med en toppmeny med hover state og active state. Problemet er slik som koden er akkurat nå at kun den første staten vises og det kun på den siden er inne på. Åpner jeg index.asp så er det kun knappen "hjem" som vises. Og hover-effektene fungerer ikke og ei heller active-staten.

 

Koden er definert slik:

 

#headerdiv {

background-image: url(Html/Img/site/topmenu_spacer.gif);
background-repeat: repeat-x;
overflow:hidden	
}

#nav {
position: absolute;
top: 101px;
left: 390px;
list-style: none;
height: 28px;
display: inline;
overflow: hidden;
width: 603px;
background: url(Html/Img/site/menu/navbar.gif)
}


#nav li{
position:relative;
float:left;
display: inline;
overflow: hidden;
list-style-type: none;
}

#nav a {
float: left;
padding: 28px 0 0 0;
overflow: hidden;
height: 0px !important; height /**/:20px; /* for IE5/Win */
}

#nav a:hover {
background-position: 0 -28px;
}

#nav a:active {
background-position: 0 -56px;
}

#hjem #nav-hjem a  {   (ER DET NOE FEIL HER???) (Om jeg setter komma etter #hjem så fungerer hover)
width: 58px;
background: url(Html/Img/site/menu/hjem.gif) top left no-repeat;
}

#hjelp #nav-hjelp a  {  
width: 107px;
background: url(Html/Img/site/menu/hjelp.gif) top left no-repeat;
}

#brukerveil #nav-brukerveil a  {
width: 140px;
background: url(Html/Img/site/menu/brukerveil.gif) top left no-repeat;
}

#e-learn #nav-e-learn a  {
width: 126px;
background: url(Html/Img/site/menu/e-learn.gif) top left no-repeat;
}

#forum #nav-forum a  {
width: 65px;
background: url(Html/Img/site/menu/forum.gif) top left no-repeat;
}

#kontakt #nav-kontakt a  {
width: 96px;
background: url(Html/Img/site/menu/kontakt.gif) top left no-repeat;}	
.leftmenu_wrap {
float: left;
}

 

Så har jeg i toppmenyens HTML skrevet:

 

	<ul id="nav">

<li id="hjem"><a href="index.asp"></a></li>
<li id="hjelp"><a href="#"></a></li>
<li id="brukerveil"><a href="#"></a></li>
<li id="e-learn"><a href="#"></a></li>
<li id="forum"><a href="#"></a></li>
 <li id="kontakt"><a href="#"></a>		</li></ul>

 

Og til slutt står det i index.asp <body id="hjem">

 

Hva mer er det som trengs? Hvorfor i allpakka funker ikke dette? :wallbash: Har holdt på i all evighet med dette og kommer aldri fremover uansett hva jeg gjør.

Endret av Kenny Bones
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Kenny Bones

Kenny Bones

Skrevet
  • Forfatter
Skrevet (endret)

Problemet blir uansett det samme om jeg bruker id eller class. I css-koden står det jo nå #nav-hjem {osvosv} og da må jeg i den aktuelle siden bruke <body class="nav-home">, men jeg vil uansett støte på det problemet at body allerede er definert og at disse krasjer vel? Prøvde dette i sted men fikk akkurat samme feil..

 

Koden er nå sånn:

#hjem #nav-hjem a {...}
#hjem #nav-hjem a:hover {...}
a:active {...}

 

Og får å få det til å funke må jeg skrive i html-dokumentet <body class="hjem"> right?

 

Men har ikke prøvd med body.nav-home li#nav-home da.. Betyr det at koden kun skal gjelde for body i alle klassen som har med "nav-home li" og "nav-home"?

Endret av Kenny Bones
Lenke til kommentar
  • 1 måned senere...

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...