Bonsoir,
Je suis en train de créer mon site internet, et je m'occupe de la mise en page pour le moment.
J'ai voulu installer un menu horizontal sur un kit graphique que j'ai télécharger. Je suis tomber sur un menu qui me plaisait bien, j'ai intégrer le code fournis dans ma feuille de style css, puis le code html dans ma page.
Sa fonctionne bien, mais le problème c'est que le menu continue sur tout l'écran:
Je voudrais qu'il ce coupe la ou il ya les traits rouges, avec si possible un marge blanche de 1px (pour continuer la page)
Voici le code css du menu:
#navcontainer { background: #369; border-top: 1px solid #9CC; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } _AT_media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; }
Et voici le code html:
<center> <div id="navcontainer"> <ul id="navlist"> <li id="active"><a id="current" href="#">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> </center>
Je maitrise un peu le html mais le css, c'est plus compliqué.
Donc voila, j'éspere qu'il y aura une âme charitable pour m'aider.
ps: ma page fait 835px
Cordialement.