Hjelp til mouse-over

[flodhest]

go'dagen godtfolk!

 

Som noen av dere har fått med dere, holder jeg på med et nytt design til siden min, www.krem.tk. Designet jeg har kommet fram til nå erher. (jeg har fått kritikk på designet, men har ikke endret småtingene enda)

 

Jeg ymtet frampå i webkafeen at jeg trengte hjelp til hover på knappene i menyen, og folk prøvde tappert og hjelpe meg. Fordi jeg ikke er så inni css, ville det vært fint å få ting litt inn med teskjeer.

 

Til nå har jeg brukt denne metoden:

 

html

<a href="#" class="imageLink"><span>Link text</span></a>

 

css

a.imageLink {
display:block;
background:url(path/to/image.png) top no-repeat;
width:100px;
height:50px;
text-decoration:none;
}
a.imageLink:hover {
background-position:bottom;
}
a.imageLink span {
visibility:hidden;
}

 

 

Som dere ser har jeg fått til dette med et bilde. Jeg lurer på hvordan jeg kan fortsette med denne metoden, altså, hvordan blir det når jeg skal plassere en ny knapp på siden? Burdte jeg eventuelt bruke en annen metode?

Endret 12. april 2005 av flodhest

[ingveh]

HTML

<ul id="navigasjon">
<li><a href="#" class="link1"><span>Link 1</span></a></li>
<li><a href="#" class="link2"><span>Link 2</span></a></li>
<li><a href="#" class="link3"><span>Link 3</span></a></li>
</ul>

 

CSS

ul#navigasjon a{
width: 150px;
height: 20px;
display: block;
text-decoration: none;
}

ul#navigasjon a:hover{
background-position:bottom;
}

Mener dette skal fungere. Har det litt travelt, så 100% sikker er jeg ikke :)

a.link1{
background:url(test.gif) top no-repeat;}
a.link2{
background:url(test2.gif) top no-repeat;}
a.link3{
background:url(test3.gif) top no-repeat;}
}

ul#navigasjon span{
visibility:hidden;}

 

Mener det skal fungere.

Har det travelt, så koden kan være litt ruskete

Endret 12. april 2005 av <ingve>

[flodhest]

Det så ut til å fungere glimrende, tusen takk!

 

En ting jeg lurer på nå, må jeg endre størrelsen slik at alle knappene har lik størrelse, eller er det noen måte å bruke denne metoden med andre knapper som har ulik størrelse?

 

 

edit: fjernet den ene setningen i header, fornøyd nå, skomaker?

Endret 12. april 2005 av flodhest

[ingveh]

De trenger ikke å ha lik størrelse nei.

 

Du kan skrive

a.link1{
background:url(test.gif) top no-repeat;
width: bredde;
height: høyde;}

 

Endret 12. april 2005 av <ingve>

[flodhest]

Jammen så greit, tusen takk

 

 

edit: hvordan kan jeg få designet til å strekke seg over hele siden?

Endret 12. april 2005 av flodhest