Bonjour,
J'ai fait un menu horizontal (un bandeau de navigation, en fait) dont vous pouvez voir un aperçu ici.
La hauteur de ce bandeau de navigation est variable en fonction de la hauteur du texte (et j'aimerais, si possible, que cela reste le cas). Elle est donc indiquée par un simple "padding: 2em 0;" dans la CSS. Le problème, c'est que :
. j'aimerais que la hauteur au-dessus et en-dessous du texte soit la même, bien entendu ;
. je voudrais pouvoir "ajouter" 10 pixels en bas de chaque lien pour y placer une image de "triangle inversé" (on voit ce petit triangle orange dans l'aperçu que j'ai mis en lien ci-dessus) indiquant que l'on se trouve bien sur cette page ;
Du coup, cela me pose quelques problèmes :
. l'espace sous le texte est nécessairement plus petit (10 pixels de moins) que l'espace au-dessus (j'ai triché sur l'aperçu en mettant un padding de 2.5em en-dessous) ;
. je ne peux pas mettre de "border" noir entre les différents liens (ils "dépasseraient" de 10 pixels vers le bas) ;
. le fond du bandeau de navigation "descend" trop vers le bas, comme on le voit bien sur l'aperçu que j'ai proposé.
Quelqu'un aurait-il une idée pour résoudre ces quelques problèmes ? Merci d'avance !
Voici le code que j'utilise pour créer ce bandeau de navigation : le code HTML d'abord :
Et le code CSS ensuite :
Modifié par Fix (23 Feb 2011 - 09:41)
J'ai fait un menu horizontal (un bandeau de navigation, en fait) dont vous pouvez voir un aperçu ici.
La hauteur de ce bandeau de navigation est variable en fonction de la hauteur du texte (et j'aimerais, si possible, que cela reste le cas). Elle est donc indiquée par un simple "padding: 2em 0;" dans la CSS. Le problème, c'est que :
. j'aimerais que la hauteur au-dessus et en-dessous du texte soit la même, bien entendu ;
. je voudrais pouvoir "ajouter" 10 pixels en bas de chaque lien pour y placer une image de "triangle inversé" (on voit ce petit triangle orange dans l'aperçu que j'ai mis en lien ci-dessus) indiquant que l'on se trouve bien sur cette page ;
Du coup, cela me pose quelques problèmes :
. l'espace sous le texte est nécessairement plus petit (10 pixels de moins) que l'espace au-dessus (j'ai triché sur l'aperçu en mettant un padding de 2.5em en-dessous) ;
. je ne peux pas mettre de "border" noir entre les différents liens (ils "dépasseraient" de 10 pixels vers le bas) ;
. le fond du bandeau de navigation "descend" trop vers le bas, comme on le voit bien sur l'aperçu que j'ai proposé.
Quelqu'un aurait-il une idée pour résoudre ces quelques problèmes ? Merci d'avance !
Voici le code que j'utilise pour créer ce bandeau de navigation : le code HTML d'abord :
<div id="navigation">
<ul>
<li class="current_page_item"><a class="first" href="http://sxjpl.free.fr/biblio/" accesskey="1">Accueil</a></li>
<li class="current_page_item"><li>
<a class="large" href="http://sxjpl.free.fr/biblio/infos">Infos pratiques</a></li>
<li class="current_page_item"><li>
<a class="large" href="http://sxjpl.free.fr/biblio/evenements">Événements</a></li>
<li class="current_page_item"><li>
<a class="large" href="http://sxjpl.free.fr/biblio/adultes">Livres adultes</a></li>
<li class="current_page_item"><li>
<a class="last large" href="http://sxjpl.free.fr/biblio/enfants">Livres enfants</a></li>
</ul>
</div>
Et le code CSS ensuite :
#navigation { overflow: hidden; }
#navigation ul, #navigation li { padding: 0; margin: 0; display: inline; list-style: none; }
#navigation li a { background: #9C0 url("../img/nav_arrow_s.png") 0 bottom no-repeat; float: left; display: block; color: #FFF; line-height: 1em; width: 97px; padding: 2em 0; text-align: center; font-size: 1em; text-transform: uppercase; white-space: nowrap; border-right: 1px solid #FFF; }
#navigation li a.large { background: #9C0 url("../img/nav_arrow_l.png") 0 bottom no-repeat; width: 146px; }
#navigation li a.last { border: 0; }
#navigation li a:hover, #navigation li a:focus, #navigation li.current_page_item a { background-position: -97px bottom; background-color: #F90; }
#navigation li a.large:hover, #navigation li a.large:focus, #navigation li.current_page_item a.large { background-position: -146px bottom; }
Modifié par Fix (23 Feb 2011 - 09:41)