Rollover Button Probleem *HelpMij*

[HankTank]

Hallo,

Ik heb een probleempje met het maken van een rollover button. Het lukt me om ze te laten veranderen als ik er met mn muis overheen ga, maar ik wil er graag tekst overheen via html... ik heb verstand van HTML maar niet veel van CSS. Dit zijn de codes:
CSS

<style type="text/css">
 #nav
{
  display: block;
  width: 130px;
  height: 50px;
  background: url("navigation.gif") no-repeat 0 0;

}

#nav:hover
{ 
  background-position: 0 -50px;
}

#nav span
{
  position: absolute;
  top: -999em;
}

</style>

En de HTML van slechts 1 button.

<a id="nav" href="home.html" title="Ga naar de Homepage"><span>Home</span></a>

Hoe kan ik zorgen dat er tekst over dat button heen krijg?
Weet iemand een andere simpele code die die even snel kan scripten is dat ook goed. Oplossingen en/of wijzigingen graag duidelijk uitleggen want ik heb amper verstand van CSS.

afbeeldingsnaam: "nav.gif"
breedte: 130px
hoogte: 50px

Als je meer over het script wilt weten hoor ik het graag en ALVAST BEDANKT!!!

 

[csshunter]

Hoi HankTank,
Op dit moment wordt de <span>-tekst buiten beeld gehouden door de :

#nav span
{
  position: absolute;
  top: -999em;
}

Met absolute positie: d.w.z. losgekoppeld van de rest van de elementen. En de negatieve top betekent: 999 letterhoogtes boven de bovenrand van het scherm.
Dat is zeker 1,5 verdieping hoger, maar daar is het beeldscherm niet!

Als je de span-css weglaat, komt de tekst "Home" gewoon over de achtergrondafbeelding heen.

Met vriendelijke groet,
CSShunter