login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[Css] Menu button (Opgelost)

Offline Simax - 20/12/2007 20:19
Avatar van SimaxOnbekend Beste mensen,

Ik heb reeds voor een website buttons gemaakt met photoshop. Nu zou ik graag de button een andere kleurtje geven als deze pagina geselecteerd is.

Iemand die mij kan vertelle hoe ik dit kan doen?
Alvast bedankt .

14 antwoorden

Gesponsorde links
Offline Koen - 20/12/2007 20:24
Avatar van Koen PHP expert Ik veronderstel dat je het als link gebruikt:
a:link
a:visited
a:active
a:hover
Offline Simax - 20/12/2007 20:46 (laatste wijziging 20/12/2007 23:43)
Avatar van Simax Onbekend Ja, ik heb een plaatje voor iedere link,
css code - Bekijk de code zonder highlighting - Klap code in 
  1. <a class="menu" href="?page=home"><img src="images/home.gif"/></a>


maar nu zou ik graag wanneer een pagina actief is, de
button een andere kleur geven(een ander plaatje gebruiken).
css code - Bekijk de code zonder highlighting - Klap code in 
  1. <a class="menu" href="?page=home"><img src="images/home_active.gif"/></a>



Ik heb dus een plaatje: home.gif
en als de pagina actief is wil ik graag home_active.gif gebruiken.
Offline bertenz - 21/12/2007 10:47 (laatste wijziging 21/12/2007 10:48)
Avatar van bertenz HTML beginner Als je ze met een lijst maakt, kun je een subklasse in die lijst maken die bijvoorbeeld "active" heet. Door dan in het menu een klein systeempje te maken (in PHP) waarin je bepaald welke button actief moet zijn, kun je die de klasse "active" mee geven. Dan wordt de css code zoiets als:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #menu ul{
  2. /* hier de code voor de lijst zelf (niet de afzonderlijke items) */
  3. }
  4. #menu ul li{
  5. /* hier de code voor een normaal item in de lijst */
  6. }
  7. #menu ul li.active{
  8. /* hier de code voor het actieve item in de lijst */
  9. }

in html kun je het dan zo doen:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul>
  2.   <li>menuknop1</li>
  3.   <li>menuknop2</li>
  4.   <li class="active">de actieve knop</li>
  5. </ul>
Offline Simax - 21/12/2007 11:14
Avatar van Simax Onbekend @bertenz,
Zou je iets meer uitleg kunnen geven hoe ik op die manier een menu zou kunnen bouwen?
Offline bertenz - 21/12/2007 12:06
Avatar van bertenz HTML beginner met <ul></ul> maak je de lijst en <li></li> zijn de verschillende items (buttons) in de lijst. Normaal is deze lijst verticaal gerangschikt, door "display: inline" te gebruiken kun je het ook horizontaal maken. Door een div te gebruiken die ID "menu" heeft, kun je gewoon een lijst in die div zetten die de eigenschappen van "menu ul" krijgt, de items daarvan krijgen de opmaak van "menu ul li" en een actief button krijgt de opmaak "menu ul li.active" (als je bij dat item <li class="active"></li> gebruikt). Door voor "menu ul li" de normale button en voor "menu ul li.active" de actieve button in te stellen, kun je hier een mooi menu mee maken.
Door even op google te zoeken naar "menu html css lijst tutorial" of iets dergelijks kun je vast wel een betere uitleg vinden dan die je van mij kunt krijgen. Veel succes ermee
Offline Simax - 21/12/2007 12:36 (laatste wijziging 23/12/2007 20:35)
Avatar van Simax Onbekend Zo een van jullie een betere uitleg of desnoods een voorbeeld kunnen geven?

Dankjewel .
Offline tomate - 23/12/2007 22:29 (laatste wijziging 23/12/2007 22:31)
Avatar van tomate Lid Laat gewoon bij a:active je achtergrond veranderen? Ik gebruik dit toch altijd en het werkt.

css code - Bekijk de code zonder highlighting - Klap code in 
  1. a:link, a:visited {
  2. width: 100px; /* de grootte van je afbeelding */
  3. height 25px; /* idem*/
  4. background-image: home.gif;
  5. }
  6.  
  7. a:active {
  8. background-image: home_active.gif;
  9. }
  10.  
  11. /* Je kunt eventueel ook hetzelfde doen bij a:hover. Maar dan wordt je achtergrond afbeelding, je rollover afbeelding. */


Hopelijk ben je hier iets mee 
Offline Simax - 24/12/2007 10:51
Avatar van Simax Onbekend @tomate,

Normaal werkt het perfect,
maar in mijn geval niet.

Ik heb bijvoorbeeld..
home.gif & home_active.gif

Ik wil standaard home.gif weergeven &
wanneer de pagina actief is(word weergegeven),
dan wil ik home_active.gif weergeven.

Zo ook bij andere buttons, zoals: nieuws.gif & nieuws_active.gif
Offline tomate - 24/12/2007 12:47
Avatar van tomate Lid Simax,

Dus als ik het goed begrijp wil je dit:
voor elke knop gebruik je een andere afbeelding?
en als de pagina actief is wil je dat een andere afbeelding weergegeven wordt?

 
Offline Simax - 24/12/2007 13:00 (laatste wijziging 24/12/2007 16:50)
Avatar van Simax Onbekend Klopt helemaal.

Iedere button heeft 2 afbeeldingen.
Een standaard(pagina niet geselecteerd/weergegeven) &
een active(pagina geselecteerd/weergegeven).
Offline tomate - 24/12/2007 23:11
Avatar van tomate Lid
tomate schreef:
Laat gewoon bij a:active je achtergrond veranderen? Ik gebruik dit toch altijd en het werkt.

[..code..]

Hopelijk ben je hier iets mee 


Doe dan dit met voor elke knop een specifiek ID of Class.

Veel suc6  
Offline Simax - 24/12/2007 23:25
Avatar van Simax Onbekend Dat had ik zelf ok wel kunnen bedenken,
maar daar wil ik juist niet aan beginnen .
Offline Pieter - 25/12/2007 09:45
Avatar van Pieter Gouden medaille

SEO guru		 Als je allemaal aparte knoppen wilt gebruiken moet je het doen met een unieke id.
Ik denk dat er voldoende voorbeelden bijstaan om alles duidelijk te snappen nu.
Moest je niet akkoord zijn, pm me maar. Dit topic markeer ik als opgelost.
Offline tomate - 26/12/2007 12:35
Avatar van tomate Lid
Simax schreef:
Dat had ik zelf ok wel kunnen bedenken,
maar daar wil ik juist niet aan beginnen .


Als je daarvoor al te lui bent 
 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.19s