Menu qui va a la ligne

bonjour a tous,
je confronte à un pb depuis quelques jours, je souhaite céer un menu horizontal. Mon menu contient 10 onglets, mon souci lorsque je diminue la taille de mon navigateur le menu se coupe en 2, et il va à la ligne tout seul.
voici la source de mon menu:

/* ######### contenu MENU NAV ############# */

.navtd{
background-image: url('head_nav.gif');
background-repeat: repeat-x ;
line-height: 20px;
}
 .menu_nav {
cursor: pointer;
text-align: center;
font-weight: bold;
border-left: 1px solid green;
margin-left: 2px; width:90%;
margin-right: 2px;
margin-top: 10px;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
float: left;
}

.menu_nav a {
margin: 0 0px;
width: 130px;
height: 25px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #fff;
vertical-align: middle ;
}

.menu_nav a:hover {
background: #a55;
border: 1px solid gray; 
}

.menu_nav a:active {
background: gray;
border: 1px solid gray; 
color: #fff;
}

je debute en css tous vos comments me seront utiles.
merci à vous pour votre aide.
Modifié par peterklm (26 Jan 2006 - 22:02)

Poste ton html ca aiderais a voir ta structure

merci

slt,
t'as raison voici le code html

<table>
<tr>
<td class="navtd">
 <ul class="menu_nav">
	<li><a href="?page=accueil">Accueil</a></li>
	<li><a href="?page=1">Vêtement</a></li>
	<li><a href="?page=2">chaussures</a></li>
	<li><a href="?page=3">Maison</a></li>
	<li><a href="?page=4">Multimedia</a></li>
	<li><a href="?page=5">internet</a></li>
	<li><a href="?page=6">Mon Compte</a></li>
	<li><a href="?page=7">Mon panier</a></li>
	<li><a href="?page=7">online</a></li>
</ul>	
</td>	
</tr>
 </TABLE>

----
et voici le resultat obtenu sur firefox et IE v6
resultat

Bonjour,

Tout dépends de ce que tu veux faire comme design : extensible ou pas ?

Car une solution serait de fixer la largeur de la cellule en rajoutant dans le css, à la classe .navtd, un width. Cela fixera la largeur de la barre. Mais adieu à l'extensibilité ...

slt,
merci pour ta reponse,
Mais malgré j'ai ajouté width a 100% ou en fixe a 900px
le resultat est pratiquement le meme.
le voilà:
avec width

.navtd{
background-image: url('head_nav.gif');
background-repeat: repeat-x ;
line-height: 20px;
width:100% ;
}

Modifié par peterklm (26 Jan 2006 - 23:25)

Bonsoir

Serait-il pas plus judicieux de partir sur une autre base .
EX:

<div class="navtd">

 <ul class="menu_nav">

	<li><a href="?page=accueil">Accueil</a></li>

	<li><a href="?page=1">Vêtement</a></li>

	<li><a href="?page=2">chaussures</a></li>

	<li><a href="?page=3">Maison</a></li>

	<li><a href="?page=4">Multimedia</a></li>

	<li><a href="?page=5">internet</a></li>

	<li><a href="?page=6">Mon Compte</a></li>

	<li><a href="?page=7">Mon panier</a></li>

	<li><a href="?page=7">online</a></li>

</ul>	
</div>

Puis un petit coup de float:left; display: inline;

@+

le probleme vient du fait que 10 onglets faisant chacun 130px de large n'ont jamais reussi a s'inserer dans une page de 1000px

Salut,

peterklm a écrit :
Mais malgré j'ai ajouté width a 100% ou en fixe a 900px le resultat est pratiquement le meme.

gné ???

Avec ce que je vois en ligne, c'est normal lol : tout est en %, donc cela s'adapte en fonction de la largeur de la fenêtre. Si celle-ci change, ça se redimensionne automatique. Les dimensions en % sont flottantes. Tu as fais un design extensible

Mais en mettant une valeur fixe en pixels, ça marche. Tu as peut-être mal codé. Moi, ce que je te proposais, c'est ça :

<table width="1000">
<tbody><tr>
<td class="navtd">
 <ul class="menu_nav">

en mettant une valeur fixe, c'est-à-dire en px, ça marche, je l'ai testé.

Remarque : mettre width="1000" veut dire 1000 px.

slt a tous ,
merci pour toutes ces reponses, la solution était effectivement sur la largeur fixe du tableau. Donc il fallait que la largeur de mon tableau soit égale à la largeur des cellules de mon menu X par le nombre des cellules.
soit:

.menu_nav a {
margin: 0 0px;
width: 100px;  // la larger des cellules
height: 25px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #fff;
vertical-align: middle ;
}

compte tenu mon menu nav est fixé à 130px

<table widt="1000"> pour 10 cellules

au fait widt est=1030px compte tenu des cadres et les marges du menu.
merci a vous tous.
voir le resultat ici :
resultat ok

Salut,
15 % (+ ou -) de tes visiteurs seront en 800*600... et pas très heureux de devoir sans arrêt jouer avec leur barre de navigation horizontale
Modifié par Alan (27 Jan 2006 - 22:50)

oops.. erreur de manipulation
Modifié par Alan (27 Jan 2006 - 22:52)