pekefølsomme knapper i CSS

[Mads-b]

Søkte litt rundt på forumet, og gant en modell av Polecat. Men den virker jo ikke??? Lest igjennom 4 tråder av folk med samme problemet, men fant ikke råd. Fremdeles ganske ny på CSS:

 

div#navigation {
background-image:url(pics/bar.jpg);
background-repeat:repeat-x;
width:600px;
height:30px;
margin-left:10px;
}

div#navigation ul {
list-style: none;
position: absolute;
height: 30px;
overflow: hidden;
width: 600px;
}


div#navigation li a {
display: block;
overflow: hidden;
padding: 30px 0 0 0;
height: 0 !important;
height: 30px;
background-repeat: no-repeat;
}

div#navigation ul li {
display: inline;
float: left;
}



div#navigation li a:hover {
background-position: 0 -30px;
}

#hoved {
background-image:url("pics/hoved.jpg");
width: 94px;
}

#downloads {
background-image:url("pics/downloads.jpg");
width: 100px;
}

#linker {
background-image:url("pics/linker.jpg");
width: 62px;
}

#meg {
background-image:url("pics/meg.jpg");
width: 77px;
}

#tilbakemelding {
background-image:url("pics/tilbakemelding.jpg");
width: 134px;
}

#prosjekt {
background-image:url("pics/prosjekter.jpg");
width: 97px;
}


#spill {
background-image:url("pics/spill.jpg");
width: 47px;
}

 

Og HTML:

 

<div id="navigation">
<ul>
<li><a class="hoved" href="hoved.htm">Hovedside</a></li>
<li><a class="linker" href="linker.htm">Linker</a></li>
<li><a class="prosjekt" href="prosjekt.htm">Prosjekter</a></li>
<li><a class="tilbakemelding" href="tilbakemelding.htm">Tilbakemelding</a></li>
<li><a class="meg" href="meg.htm">Om meg</a></li>
<li><a class="spill" href="spill.htm">Spill</a></li>
</ul>
</div id="navigation">

 

Knappene vises ikke i det hele tatt! Hva er galt?

[_Paulsen_]

Du er sikker på at pathen til bildene er helt korrekte? Dette kan ødelegge, hvis den ikke er helt korrekt.

Endret 29. september 2004 av OShea22

[huf]

Har du husket å linke til css dokumentet ditt da?

[Mads-b]

Linkene er greie.. Alt annet i CSS dokumentet fungerer bra. Når jeg klikker der knappene skal være, ser jeg en stiplet boks, der bildet skulle være. Jær prøvde å se om de var under bakgrunnen også, ved å fjerne den, men eneste spor er fremdeles de grå boksene som oppstår rundt bilder som blir klikket.

 

EDIT: har det noe å si at bildene er PNG?

Endret 29. september 2004 av MBaardsgaard

[Mads-b]

auda.... pinlige fakta... Legg merke til at det er "class" i index.htm, mens i CSS dokumentet begynner alt med "#" istedenfor "." jaja, funker nå.