Lijstmenu met een klasse voor de huidige pagina

[georgeboot]

Hallo,


Ik heb een menu gemaakt via een lijst:

<div id="menu">
            	<ul>
                	<li class="current"><a href="/">home</a></li>
                    <li><a href="/">over 11STU</a></li>
                    <li><a href="/">groepen</a></li>
                    <li><a href="/">activiteiten</a></li>
                    <li><a href="/">ouders</a></li>
                    <li><a href="/">media</a></li>
                    <li><a href="/">webshop</a></li>
                    <li><a href="/">links</a></li>
                    <li><a href="/">inschrijven</a></li>
                    <li><a href="/">contact</a></li>
                </ul>
            </div>

In mijn css stel ik de volgende waarde in:

#menu {
	display: block;
	float:left;
}

#menu ul {
	margin: 0;
	list-style: none;
}

#menu li {
	display: block;
	float: left;
	white-space: nowrap;
}

#menu li a {
	display: block;
	padding: 10px 5px 10px 5px;
	width: 100px;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	color: #a18a54;
	background-color: #C60;
	font-weight: bold;
}

#menu li a:hover {
	background-color: #a18a54;
	color: #FFF;
}

* html #menu a {width:1%;}

#menu li .current a {
	background-color: #C60;
}

#menu li a.current {
	background-color": #C60;
}

#menu li a.current:hover {
	background-color": #C60;
}

Wat ik wil is dat de li met de class "current" 'gemarkeerd' is. Het werkt alleen niet. Ziet iemand het probleem? Ik zelf niet na lang zoeken

Alvast bedankt mensen!

 

[Frats]

Wat doet:

* html #menu a {width:1%;}

daar? Dat lijkt me geen valide CSS? (ik weet er niet alles van, maar die notatie ken ik niet :+)

 

[georgeboot]

Geen idee.
Ik had op het internet rond gespeurd, en in een tutorial kwam ik dat tegen. Heb ook maar wat dingen als oplossing geprobeerd, niets hiep

Wel iets gevonden dan?

 

[georgeboot]

live voorbeeld: www.11stu.nl/nieuw/

 

[Goeroeboeroe]

* html #menu a {width:1%;}

is denk ik 'n hack om IE hasLayout te geven. Er zitten meer van dat soort grappen in.

Even over de kleuren. Goud op donkerbruin. Ik weet dat mijn ogen niet de beste van de wereld zijn, maar dat is echt volledig onleesbaar.

Je vraag.
In de css staat bij #menu li a:

background-color: #CC6600

Bij #menu li .current a staat dezelfde background-color. Dus 't klopt dat je bij current geen andere kleur ziet.
Verander een van deze kleuren.

Verder moet de spatie weg tussen 'li' en '.current', anders werkt 't nog niet:

#menu li.current a

 

[georgeboot]

De kleuren zijn voor voor het idee.. Ik dacht: eerst zorgen dat het menu enz. werkt, daarna gaan stylen.
Maar bedankt! Het werkt.

Wat ik me nog wel afvraag is:
zit er verschil tussen:

#menu li.current a {
	background-color: #a18a54;
}

#menu li a.current {
	background-color: #a18a54;
}

?
Deze kwam ik ook tegen op internet, en heb ze erin laten staan. Jij hebt ze ook niet opgemerkt, maar als ik ze bekijk moeten ze toch echt het zelfde doen.

Afijn, nogmaals bedankt voor het helpen!

 

[Goeroeboeroe]

#menu li.current a
De link binnen de lijst-ingang met class="current" binnen het element met id="menu"

#menu li a.current
De link met class="current" binnen 'n lijst-ingang binnen het element met id="menu"

Oftewel: twee verschillende selectors.

Mooi dat 't werkt trouwens!

 

[georgeboot]

Ik snap hem:thumb:
Bedankt!