Ik heb een menu, gemaakt op deze manier:

Code:

<div id="menu">
    <div class="rollover"> <a class="start" href="index.html"><span>Start</span></a> <a class="overons" href="overons.html"><span>Over Ons</span></a> <a class="agenda" href="inschrijven.html"><span>Agenda</span></a> <a class="fotos" href="info.html"><span>Foto's</span></a> <a class="links" href="info.html"><span>Links</span></a> <a class="gastenboek" href="info.html"><span>Gastenboek</span></a> <a class="contact" href="info.html"><span>Contact</span></a> </div>
  </div>

In de css heb ik dan dit:

Code:

span{
visibility:hidden;
}
.rollover a{
        padding:76px 10px 15px 60px;
        text-decoration:none;
        background-position: 0 -100px;
}
.rollover a:hover{
        background-position: 0 0px;
}
.start{
        background:url(images/rollStart.png) 0 0 no-repeat;    

}

Ik gebruik deze afbeelding als knop:

Dus als ik hover schuif ik gewoon de afbeelding op dat je zogezegd een andere knop te zien krijgt.

Dit werkt perfect, maar nu wil ik aantonen op welke pagina zit, dit doe ik zo:

Code:

.activeStart{
    background-position: 0 0px;
}

Dus eigenlijk op net dezelfde manier als bij men hover. Het rare is dat hier mijn knop volledig verdwijnt :S

Waar jij op doelt is de zogenoemde CSS Sprites techniek. In plaats van je huidige menu te fixen, kun je beter overstappen op een semantische manier om je menu op te bouwen. Dus onder andere gebruik maken van een unordened list (<ul>) in plaats van losse divjes.

Hier kun je een heel artikel vinden over CSS Sprites: http://www.smashingmagazine.com/2009...and-tutorials/

Succes!

Bedankt, ik denk dat ik er zo idd wel uitkom :)

en ik zou zeggen doe de hover op de rollover ding dus: .rollover:hover en niet .rollover a:hover want dan pas je de achtergrond van de Link zelf aan