De l'aide pour un menu horizontal

[alex9193]

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.

Modifié 26 Janvier 2009 par Monique
Merci d'utiliser codebox pour plus de 10 lignes de code :)

[Dudu]

Salut

Est-ce que le contenu de ta page (la partie blanche sur la capture d'écran) a une largeur fixe ?

Si oui, c'est simple: tu donnes à #navlist cette largeur (en enlevant deux pixels) et tu lui ajoutes une bordure blanche à gauche et à droite d'un pixel chacun (les deux pixels que tu as précédemment enlevé).

Et tu gardes le tout centré grâce à à la propriété margin.

Sinon, tu n'as pas une URL à nous communiquer qu'on puisse y voir plus clair ?

PS: que font ces horribles balises <center> dans ton code ?

[alex9193]

Salut, merci pour ta réponse.

Comme je l'ai dit je maitrise "un peu"(j'aurais du dire un minimum^^) le html, je ne suis que débutant donc je ne suis pas sure.

Il me semble que la page est une largeur fixe. Mais sans certitude.

Voici une URL avec le menu: http://azertyu.hostarea.org/beta/test.html

sans le menu: http://azertyu.hostarea.org/beta/index.html

Je vais essayer ce que tu ma dis en bidouillant mais je ne sais pas trop comment faire

Pour les balises <center> je corrigerais sa plus tard, si mes souvenirs sont bon: <div align="center"></div> ... c'est bien sa ?

[Dudu]

Pour les balises <center> je corrigerais sa plus tard, si mes souvenirs sont bon: <div align="center"></div> ... c'est bien sa ?

Oui et non.

Oui, parce que c'est déjà un peux mieux que <center></center>

Non, parce que tu peux faire encore plus propre: je te renvoie à un très bon article d'Alsacréations, Centrer les éléments ou un site web en CSS

En gros, il te suffit d'appliquer des marges automatiques (margin: auto) à gauche et à droite de ta page.

Et sinon..

oui ta page a une largeur fixe (il suffit de redimensionner la fenêtre de ton navigateur pour t'en rendre compte), donc ce que je disais plus haut est valable.

Il te suffit de modifier la ligne qui commence par #navlist dans ta feuille de style

[alex9193]

Edit: en fin de compte j'ai réussis, j'ai juste déplacer le code de ma page html et sa me l'a centrer tout seul.

Merci beaucoup de m'avoir aider.

Cordialement.

Modifié 26 Janvier 2009 par alex9193