login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Navigatie met CSS

Offline Frederic - 10/08/2005 20:27
Avatar van FredericPHP ver gevorderde Ik heb momenteel navigatieknoppen, maar deze wil ik gaan stylen met CSS.
Ik roep alles dus aan met
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <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:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.button{
  2. background: url(../afbeeldingen/menu/zijkant.png);
  3. float:right;
  4. width: 100px;
  5. color: #777685;
  6. font-size: 14px;
  7. text-decoration: none;
  8. text-align:center;
  9. border-bottom: 1px solid #999999;
  10. border-right: 1px solid #999999;
  11. border-top: 1px solid #CCCCCC;
  12. border-left: 1px solid #CCCCCC;
  13. }

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:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. div.button a:hover{
  2. background: url(../afbeeldingen/menu/zijkant.png);
  3. float:right;
  4. width: 100px;
  5. color: #777685;
  6. font-size: 14px;
  7. text-decoration: none;
  8. text-align:center;
  9. border-bottom: 1px solid #CCCCCC;
  10. border-right: 1px solid #CCCCCC;
  11. border-top: 1px solid #999999;
  12. border-left: 1px solid #999999;
  13. }

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?

3 antwoorden

Gesponsorde links
Offline MechaVore - 10/08/2005 20:39 (laatste wijziging 10/08/2005 20:40)
Avatar van MechaVore Gouden medaille

PHP gevorderde		 kan het niet zonder div ?
gewoon
a.class:hover{
a.class{
en <a href="" class="class">whoot</a>
Offline Frederic - 10/08/2005 21:31
Avatar van Frederic PHP ver gevorderde Nee, want ik heb de 'float:right;' nodig
Offline Fenrir - 10/08/2005 21:56
Avatar van Fenrir PHP expert Je CSS is veel te rommelig. En dat komt mede dankzij de slechte HTML. Een navigatie is een lijst, dus zet het in een ul:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul class="navigatie">
  2. <li><a href="#">knop</a></li>
  3. <li><a href="#">knop</a></li>
  4. <li><a href="#">knop</a></li>
  5. <li><a href="#">knop</a></li>
  6. </ul>


Geef verder eens een tekening in paint van hoe het eruit moet zien, want ik snap het niet echt. Hoe moet het met die float? Is het een horizontaal, of een verticaal menu? Wat is "../afbeeldingen/menu/zijkant.png"?
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.203s