[HTML/CSS] Hover background

[GekkeCoen]

Hallo iedereen,

Ik wil dat als je met een muis over een link gaat de achtgrond veranderd. Dit is me redelijk gelukt maar als ik een achtergrond van 95x80 px in me CSS zet, begint de achtergrond bij de link. Maar dit moet ik het midden.

Stukje uit CSS:

code:

A.menu:link         {font-weight:normal; color:#87D300; width:95px; height:80px; background-image:url(images/bottom_bg.png); display:block}
A.menu:visited      {font-weight:normal; color:#87D300; width:95px; height:80px; background-image:url(images/bottom_bg.png); display:block}
A.menu:hover        {font-weight:normal; color:#FFFFFF; width:95px; height:80px; background-image:url(images/bottom_bg_over.png); display:block}
A.menu:active       {font-weight:normal; color:#87D300; width:95px; height:80px; background-image:url(images/bottom_bg.png); display:block}

Stukje uit HTML:

code:

<div class="bottom">Home</div><div class="bottom"><a href="mogelijkheden.html" class="menu">Mogelijkheden</a></div><div class="bottom"><a href="faq.html" class="menu">Faq</a></div><div class="bottom"><a href="contact.html" class="menu">Contact</a></div>

Link: klik hier!

Bedankt

[ Voor 22% gewijzigd door GekkeCoen op 29-01-2006 17:38 ]

[Eswip]

Zo zou het wel goed moeten gaan...

code:

.bottom a {
 font-weight:normal; 
 color:#87D300; 
 width:95px; 
 height:80px; 
 background-image:url(images/bottom_bg.png); 
 display:block
}

.bottom:hover {
 background-image:url(images/bottom_bg_over.png);
}

[GekkeCoen]

Eswip schreef op zondag 29 januari 2006 @ 17:42:
Zo zou het wel goed moeten gaan...

code:

.bottom a {
 font-weight:normal; 
 color:#87D300; 
 width:95px; 
 height:80px; 
 background-image:url(images/bottom_bg.png); 
 display:block
}

.bottom:hover {
 background-image:url(images/bottom_bg_over.png);
}

1. Dat werkt alleen in FireFox. (IE ondersteund :hover alleen in link)
2. De link zou dat bovenaan de buttum komen te staan, omdat er geen padding is ingesteld.

Maar in ieder geval bedankt

[Eswip]

GekkeCoen schreef op zondag 29 januari 2006 @ 17:45:
[...]


1. Dat werkt alleen in FireFox. (IE ondersteund :hover alleen in link)

Heb je gelijk in.. even vergeten..

2. De link zou dat bovenaan de buttum komen te staan, omdat er geen padding is ingesteld.

Je kan wel in de css nog een padding er neer zetten, of verical-align: middle oid.

[GekkeCoen]

Eswip schreef op zondag 29 januari 2006 @ 18:26:
[...]

Heb je gelijk in.. even vergeten..

[...]

Je kan wel in de css nog een padding er neer zetten, of verical-align: middle oid.

Ik heb het al opgelost Ik heb de line-heigt:80px; gezet.