PHP ver gevorderde |
|
Ik heb momenteel navigatieknoppen, maar deze wil ik gaan stylen met CSS.
Ik roep alles dus aan met
<div class="button">Whoot</div>
<div class="button">Whoot</div>
Nu, ik had graag dat er een vaste achtergrond was, zowel bij de gewone toestand als bij de hover.
Dit is de normale stand:
div.button{
background: url(../afbeeldingen/menu/zijkant.png);
float:right;
width: 100px;
color: #777685;
font-size: 14px;
text-decoration: none;
text-align:center;
border-bottom: 1px solid #999999;
border-right: 1px solid #999999;
border-top: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}
div.button{ background: url(../afbeeldingen/menu/zijkant.png); float:right; width: 100px; color: #777685; font-size: 14px; text-decoration: none; text-align:center; border-bottom: 1px solid #999999; border-right: 1px solid #999999; border-top: 1px solid #CCCCCC; border-left: 1px solid #CCCCCC; }
Tot hier werkt alles perfect. De knop ziet er mooi uit. Nu, als de muis erover gaat wil ik dat er een soort van 'indrukeffect' komt. Dus: de kleuren moeten wisselen. Dit zou de stand moeten zijn bij de hover:
div.button a:hover{
background: url(../afbeeldingen/menu/zijkant.png);
float:right;
width: 100px;
color: #777685;
font-size: 14px;
text-decoration: none;
text-align:center;
border-bottom: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
}
div.button a:hover{ background: url(../afbeeldingen/menu/zijkant.png); float:right; width: 100px; color: #777685; font-size: 14px; text-decoration: none; text-align:center; border-bottom: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; border-top: 1px solid #999999; border-left: 1px solid #999999; }
Maar het lukt me maar niet om dit te maken! Bij de hover gaat de breedte van de rand naar 2px, ipv 1px te blijven en dan de kleur te vervangen.
Extra vraagje: is het mogelijk om met CSS (geen UL of LI, gewoon een div) een tekentje voor de tekst de plaatsen? Ik zou graag bvb voor alle knoppentekst een '>' zien. Moet ik dit nu typen bij iedere knop of kan CSS dat net zoals ik een list-style kan opgeven?
|