Bonjour,
je cherche à faire un simple menu horizontal avec des articles en texte. Et j'ai beau lire et relire dans tous les sens les tutoriels et l'ouvrage de Raphaël CSS2 je m'arrache les cheveux.

Mon site doit faire 1150 x 600 pixels, le tout centré. Jusque là tout va bien.

Je suis parvenu à faire une barre de navigation position statique centrée sur le site avec la largeur voulue de 1150 pixels et hauteur de 35 pixels. Elle change de couleur de fond selon la page. J'ai donc une balise div avec comme genre de id navaccueil navinfo etc.

Dans cette barre de navigation j'ai réussi à positionner 8 articles de menu baptisés navitems en flottant à gauche de 110 x 20 pixels avec marges de 6 2 2 2 et padding de 2 2 2 2. Le texte est centré dans chaque article, s'affiche en noir en capitales avec les fontes voulues etc.

Le premier article commence vers 233 pixels à gauche et les autres suivent sans se couvrir, parfait. Au passage de la souris, le texte des articles passe en blanc. Au clic sur l'article de menu on va à la page voulue. Le dernier article a comme les autres float left mais lui clear right en plus.

Problème : comment transformer ça en un vrai menu de type


<ul id="navigation" >
 <li><a href="accueil.html" >accueil</a></li>
 <li><a href="service.html" >service</a></li>
 <li><a href="toto.html" >toto</a></li>
 <li><a href="info.html" >info</a></li>
</ul>

en ayant le même rendu.

Je ne comprends pas à quel niveau je dois ou non mettre la taille des éléments et le formatage du texte ! dans li ? Dans ul ? dans navigation ?


Autre chose, je voudrais que lorsque je suis sur la page accueil le menu accueil soit en blanc et pas en noir.

Evidemment comme le reste de ma page est en blanc (enfin, sans aucune couleur), je souhaite pouvoir colorer les liens a et a:hover (rien pigé à ce qu'est a:focus !) de mon pied de page footer en autre chose que du blanc. Autrement dit que ce ne soit pas tous les a et a:hover qui passent en blanc au survol de la souris mais seulement que ce soit le cas pour les éléments de ma barre de navigation.

Merci de votre bienveillance Smiley cligne
Modifié par EditingPlus (06 Mar 2011 - 14:40)
Salut,

EditingPlus a écrit :
Je ne comprends pas à quel niveau je dois ou non mettre la taille des éléments et le formatage du texte ! dans li ? Dans ul ? dans navigation ?
À en juger par ta capture d'écran, tu pourrais partir sur une base de ce type :
#navigation { background-color:green; } /* ici les styles de la barre verte */
#navigation li { display:inline; padding:0 20px; } /* ici les styles des blocs contenant les liens */
#navigation a {  } /* ici les styles des liens */
Merci du guidage, j'ai suivi ta démarche.
Pour y voir plus clairement encore dans les tâtonnements j'ai isolé deux feuiiles de styles distinctement, l'une pour la navigation et l'autre pour le restant de la page.
Je compte faire de même pour le pied de page.
Modifié par EditingPlus (06 Mar 2011 - 14:40)