Vraag over links in css

[anoniem]

ben bezig met een site waarin een menu moet komen met links zonder opmaak. alleen bij hover en active verschijnt een streep onder het item waar de muis zich bevindt. uiteraard kan ik in en voor elke pagina waar men op dat moment is het "eigen" menu-item afwijkend maken (dus bijv in pagina contact het menu-item "contact" een afwijkende opmaak geven, etc, etc), maar is dat ook via css te bereiken?

[anoniem]

Twee mogelijke aanpakken met CSS die mij nu te binnen schieten zijn: [list=1:e140028b02][*:e140028b02]Maak een klasse [i:e140028b02]current[/i:e140028b02] die (bijvoorbeeld) een streep zet onder het betreffende menu-item. Op deze manier hoef je alleen per pagina deze klasse aan je menu-item toe te voegen en kan je achteraf de stijl van dit item aanpassen zonder dat je aan je HTML hoeft te zitten. [*:e140028b02]Geef de [i:e140028b02]body[/i:e140028b02] van elke pagina een ID of klasse mee en combineer dit met [i:e140028b02]:nth-child()[/i:e140028b02] of vergelijkbare [i:e140028b02]pseudo-selectors[/i:e140028b02]. Dit heeft dezelfde voordelen als hierboven, plus daarbij als voordeel dat het menu op iedere pagina dezelfde HTML heeft. Nadelen zijn er echter ook, namelijk dat het minder overzichtelijk is (in je code), dat de browserondersteuning minder zal zijn, en dat je moet oppassen met het aanpassen van je HTML aangezien je bij het toevoegen van items aan je menu ook je CSS zult moeten aanpassen.[/list:o:e140028b02] De eerste mogelijkheid is waarschijnlijk het beste van de twee. Overigens zullen er ongetwijfeld meer opties zijn. - Bas

[anoniem]

Wat Bas zegt. Maar het zou ook nog kunnen dat je bedoeld dat je in staat wilt zijn om verschillende <a>nchors in je website verschillende stylen mee te geven. En ook dat is prima te doen in CSS. En wel op twee manieren. Door de <a>'s afzonderlijk een class mee te geven, of door ze in een div met een eigen ID te plaatsen: HTML [code:1:bd92d7089b]<a class="hoofdmenu" href="bla.html">Clique!</a>[/code:1:bd92d7089b] CSS [code:1:bd92d7089b] a.hoofdmenu:link { text-decoration: none; color: #555; } a.hoofdmenu:hover { text-decoration: underline; color: #fff; } [/code:1:bd92d7089b] of HTML [code:1:bd92d7089b] <div id="hoofdmenu"> <a href="bla.html">Clique!</a> </div> [/code:1:bd92d7089b] CSS [code:1:bd92d7089b] div#hoofdmenu a:link { text-decoration: none; color: #555; } div#hoofdmenu a:hover { text-decoration: underline; color: #fff; } [/code:1:bd92d7089b]

[anoniem]

bedankt, bashamar en gooly! dat gaat me weer een paar interessante leer- en experimenteersessies opleveren.

[anoniem]

ben met jullie hints aan de (zoek-)slag gegaan, en heb het naar tevredenheid opgelost aldus: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/