Bilder med hovereffekt - lang kode?

[Torjus]

Har jeg gjort noe rart, eller blir virkelig koden så fryktlig lang når man bruker epleweb sin metode?

 

Og en ting til, bildene blir oppå hverandre istedetfor ved siden av hverandre... hvordan får jeg dem til å være ved siden av hverandre?

 

<a href="#" class="hjem"><span>hjem</span></a>
<a href="#" class="ommeg"><span>om meg</span></a>
<a href="#" class="bilder"><span>bilder</span></a>
<a href="#" class="kontakt"><span>kontakt</span></a>

 

 

CSS:

a.hjem {
display:block;
background:url(hjem.gif) top no-repeat;
width:39px;
height:31px;
text-decoration:none;
}
a.hjem:hover {
background-position:bottom;
}
a.hjem span {
visibility:hidden;
}

a.ommeg {
display:block;
background:url(ommeg.gif) top no-repeat;
width:39px;
height:31px;
text-decoration:none;
}
a.ommeg:hover {
background-position:bottom;
}
a.ommeg span {
visibility:hidden;
}

a.bilder {
display:block;
background:url(bilder.gif) top no-repeat;
width:39px;
height:31px;
text-decoration:none;
}
a.bilder:hover {
background-position:bottom;
}
a.bilder span {
visibility:hidden;
}

a.kontakt {
display:block;
background:url(kontakt.gif) top no-repeat;
width:39px;
height:31px;
text-decoration:none;
}
a.kontakt:hover {
background-position:bottom;
}
a.kontakt span {
visibility:hidden;
}

[Haraldson]

<ul id="meny">
<li><a href="#" class="hjem"><span>hjem</span></a></li>
<li><a href="#" class="ommeg"><span>om meg</span></a></li>
<li><a href="#" class="bilder"><span>bilder</span></a></li>
<li><a href="#" class="kontakt"><span>kontakt</span></a></li>
</ul>

 

#meny a {
display:block;
text-decoration:none;
}

#meny a:hover {
background-position:bottom;
}

#meny a span {
visibility:hidden;
}

a.hjem {
background:url(hjem.gif) top no-repeat;
width:39px;
}

a.ommeg {
background:url(ommeg.gif) top no-repeat;
width:39px;
}

a.bilder {
background:url(bilder.gif) top no-repeat;
width:39px;
}

a.kontakt {
background:url(kontakt.gif) top no-repeat;
width:39px;
}

Du kan alltids korte ned mye som er likt. Jeg lot width stå fordi bredden på knappene mest sannsynlig blir forskjellig.

 

Edit: For øvrig er det en litt tungvint metode, man trenger for eksempel ikke det span-elementet i det hele tatt...

Endret 16. oktober 2005 av Mr.Berg

[Torjus]

Okey, takk. Den koden ble en god del mindre!

 

Men nå får jeg jo opp sånn liste knapper og knappene ligger forsatt ikke vertikalt

 

http://home.no.net/fuzzy2/test2/

 

Hvordan fikser jeg det?

[Format71]

Okey, takk. Den koden ble en god del mindre!

 

Men nå får jeg jo opp sånn liste knapper og knappene ligger forsatt ikke vertikalt

 

http://home.no.net/fuzzy2/test2/

 

Hvordan fikser jeg det?

5016982[/snapback]

 

Legg til stilelementet 'display: inline;' på <li> elementene og 'list-style: none;' på <ul> elementet.

 

-Vegar

[Torjus]

Okey, takk. Den koden ble en god del mindre!

 

Men nå får jeg jo opp sånn liste knapper og knappene ligger forsatt ikke vertikalt

 

http://home.no.net/fuzzy2/test2/

 

Hvordan fikser jeg det?

5016982[/snapback]

 

Legg til stilelementet 'display: inline;' på <li> elementene og 'list-style: none;' på <ul> elementet.

 

-Vegar

5017718[/snapback]

 

Slik?

 

ul#navigasjon 
{
list-style: none;
}

ul#navigasjon li 
{
margin: 0px;
display: inline;
}

 

Testet det, men virket ikke, ble bare det samme

[Format71]

Testet det, men virket ikke, ble bare det samme

5018876[/snapback]

 

<ul style="list-style: none;">
<li style="display: inline;">en</li>
<li style="display: inline;">to</li>
<li style="display: inline;">tre</li>
</ul>

 

funker nå i alle fall...

 

-Vegar