 Qui n'a pas eu envie de respecter les recommandations w3c en réalisant un menu en xhtml/css . Vous avez sûrement rencontré le problème dont nous voulons vous parler dans cet article.
Ceci n'est pas un tutoriel sur les menus en xhtml/css, encore moins un tutoriel sur les recommandations du world wide web consortium (w3c). Nous voulons juste vous donner une piste pour la résolution des problèmes que vous pouvez rencontrer dans la création des menus en css xhtml. Vous devez néanmoins avoir un pré-récquis dans ces langages. Pour ceux qui n'ont aucune notion, retrouvez dans la suite des liens vers des tutoriels)
Petit rappel général
Pour réaliser un menu selon les règles du w3c, il suffit de scinder le menu en liste. Vous vous souvenez les balises <ul> et <li>; pour réaliser un menu composé de trois rubriques: introduction, sujet et conclusion, il vous suffit de saisir:
<ul id="menu">
<li>introduction</li>
<li>sujet</li>
<li>conclusion</li>
</ul>
Vous venez d'élaborer une liste en xhml.La suite dépend de l'alignement que vous souhaitez donner à votre menu. Pour un alignement vertical, en css il vous suffit d'éliminer les caractéristiques des lignes (. ou chiffre) en utilisant la commande css list-style-type. Pour un alignement horizontal faire appel à l'alignement horizontal des blocs: soit en utilisant le positionnement flottant ou encore en utilisant une des propriétés display (inline)
(si vous ne vous retrouvez pas à cette étape retrouvez les excellents tutoriels de alsacréations ou encore openweb)
Le problème
Le problème des menus css est l'affichage des menus actifs (code css a: active). Contrairement aux idées reçues, insérer ce code dans le fichier css ne résoud pas le problème. le menu actif ne changera pas de style. Pour ce faire, vous devez changer manuellement le style de la rubrique active (pour les sites non dynamiques); c'est-à-dire, si vous réalisez la page "sujet" dans le codage xhtml, associez un style "class=actif", classe qui correspond au style du menu actif. Ce qui vous fera changer de style autant de fois que vous avez de pages.
Pour les plus compétents (et pour les pages dynamiques) réalisez en php un code permettant de vérifier l'adresse de la page et d'associer au menu donné le style donné... nous publierons bientôt un exemple (menu et codes php) à titre d'exemple.
({jpageviews 00 none}) |
|
