[CSS] Rollover

[RowanP]

Daar ben ik (helaas) weer.
Ik heb een vraag over css rollover buttons. Ze willen niet naast elkaar komen te staan. Zeg aan automatisch onder elkaar staan.

de code

index:

<tr valign="top" id="nav"><td width="10"></td><td colspan="3" valign="top"><a href="#" class="home">&nbsp;</a><img src="images/slash.gif"><a href="#" class="live">&nbsp;</a></td><td width="10"></td></tr>

rollover.css:

a.home {
display: block;
width: 45px;
height: 22px;
background: url("/marklotterman/images/home.gif") 0 0 no-repeat;
text-decoration: none;
}

a:hover.home {
background-position: -45px 0;
}

a.live {
display: block;
width: 30px;
height: 22px;
background: url("/marklotterman/images/live.gif") 0 0 no-repeat;
text-decoration: none;
}

a:hover.live {
background-position: -30px 0;
}

edit: de link naar het voorbeeld http://rowanpreesman.nl/marklotterman/

 

[Tha Devil]

display:block weghalen

 

[RowanP]

hij komt dan wel naast elkaar:thumb:
Maar nu maakt hij hem zo groot als de   , hij gooit hem niet op de width en height
iets met margin padding doen dan?

 

[Tha Devil]

Ohw, de links zijn plaatjes.

Waarom de afbeeldingen in het CSS zetten en niet gewoon in de code?

a.home {
display: block;
width: 45px;
height: 22px;
text-decoration: none;
}

a:hover.home {
background-position: -45px 0;
}

a.live {
display: block;
width: 30px;
height: 22px;
text-decoration: none;
}

a:hover.live {
background-position: -30px 0;
}

<tr valign="top" id="nav">
 <td width="10">&nbsp;</td>
 <td colspan="3" valign="top">
  <a href="#" class="home">
   <img src="/marklotterman/images/home.gif" alt="Home" />
  </a>
  <img src="images/slash.gif">
  <a href="#" class="live">
   <img src="/marklotterman/images/live.gif" alt="Live" />
  </a>
 </td>
 <td width="10">&nbsp;</td>
</tr>

 

[RowanP]

hij is er bijna
Maar nu laat hij het hele plaatje zien. ik heb class="[naam]" in de img al geprobeert, maar dat deed hij niet. Weet jij misschien wat er nog moet veranderen?

 

[Tha Devil]

Zal met margin wel op te lossen zijn.

Welke je precies moet veranderen weet ik niet, ik heb eerst alleen voor home het gewijzigd.

De getallen staan voor respectievelijk top, right, bottom left
Gaat hij nu dus aan de verkeerde kant er af dan zul je de ze even om moeten draaien

Volgens mij heb je de height en width niet nodig, die heb ik dus weggelaten.

a.home {
margin: 0 0 0 -45px;
text-decoration: none;
}

a:hover.home {
  margin: 0 -45px 0 0;
}

 

[RowanP]

hij is er bijna. Nu laat hij bij de rollover alleen het hele plaatje zien. Maar de roze tekst staat nu wel goed geplaatst!

a.home {
margin: 0 -45px 0 0;
text-decoration: none;
}

a:hover.home {
margin: 0 0 0 -45px;
}

 

[Tha Devil]

Dan zul je de cijfertjes bij hover even moeten switchen.
Misschien moet er nog een padding bij, ik kan het zo niet voor je testen.

Je kunt het wellicht zelf proberen, je hoeft alleen maar met de linker en rechter margin en/of padding bezig te zijn dus dat scheelt.

 

[RowanP]

Ok iig heel erg bedankt, ik wilde gewoon eens niet javascript rollover. Ik probeerde w3c compliant. Maarja met de sIFR en toekomstig lightbox lukt dat toch niet.

Ik ga even klooien, heel erg bedankt. Ik zet hem op vraag beantwoord:thumb: