Bloquer le menu sur une seule ligne Résolu

Bonjour,
Je suis passé d' un menu flash à un menu html, à ce qui paraît, c' est mieux.
Le problème qui se pose acutellement c' est que ce menu html occupe toute la largeur de ma page c' est à dire 980 px.
Du coup, si un utilisateur met un affichage plus gros, des éléments du menu sautent à la ligne suivante.
J' ai essayé de remplacer la taille en pixel par des pourcentages et taille en em, mais le phénomène est le même.
Je me résouds alors à essayer de bloquer mon menu sur une seul ligne.
Pensez-vous que c' est possible et si oui comment ?
Merci d' avance
Modifié par chrisllers (10 Aug 2008 - 18:11)

Bonjour,

Il faudrait que tu nous montre un bout de code ou alors une page en ligne, ce serait plus pratique.

Comme ça, je dirais que tu peux régler ce problème avec un "overflow: hidden" du conteneur de ton menu, bien entendu le soucis va être que les mots seront rognés.

Sinon, tu peux toujours garder un menu en flash, mais ne l'afficher que si le visiteur a flash d'installé, dans le cas contraire afficher un menu traditionnel.

merci de vous pencher sur le problème.
Alors un lien vers une page test:
http://chrisllers.free.fr/tests/test.php
et voilà le code de la page:
EDIT: d' ailleurs sour IE ça bug

body
{
background-color:black;
color:white;
}
#global
{
width:980px;
margin:0 auto;
}
a
{
color:white;
}
a:hover
{
color:#FD5656;
text-decoration:none;
}
#banniere
{
float:left;
width:980px;
height:80px;
background-image:url("photos/banniere.png");
background-repeat:no-repeat;
}
/*MENU*/
#menu
{
font-size:100%;
margin:0;
padding:0;
text-align:center;
}
#menu li
{
display:inline;
list-style:none;
}
.bouton-milieu a
{
background-image:url(photos/menu/fond-menu.png);
background-repeat:repeat x;
background-position:center;
text-decoration:none;
padding-top:15px;
padding-bottom:13px;
padding-left:15px;
padding-right:15px;
}
.bouton-milieu a:hover
{
text-decoration:underline;
color:white;
background-image:url(photos/menu/survole.png);
background-repeat:repeat x;
}
.bouton-new a
{
background-image:url(photos/menu/bouton-new.png);
text-decoration:none;
padding-left:50px;
padding-right:15px;
padding-top:15px;
padding-bottom:13px;
}
.bouton-new a:hover
{
text-decoration:underline;
color:white;
background-image:url(photos/menu/bouton-new-survole.png);
background-repeat:repeat x;
}
#bouton-gauche a
{
text-decoration:none;
padding-top:15px;
padding-bottom:13px;
padding-left:20px;
padding-right:20px;
background-image:url(photos/menu/bouton-gauche.png);
background-position:left;
}
#bouton-gauche a:hover
{
color:white;
text-decoration:underline;
background-image:url(photos/menu/bouton-gauche-survole.png);
}
#bouton-droit a
{
text-decoration:none;
padding-top:15px;
padding-bottom:13px;
padding-left:20px;
padding-right:20px;
background-image:url(photos/menu/bouton-droit.png);
background-position:right;
}
#bouton-droit a:hover
{
color:white;
text-decoration:underline;
background-image:url(photos/menu/bouton-droit-survole.png);
background-position:right;
background-repeat:no-repeat;
}
/*FIN MENU*/
#pub-sousmenu
{
padding-top:30px;
margin:0 auto;
width:728px;
}

EDIT:
Après une recherche sur le forum, j' ai trouvé une solution qui me convient.
J' ai ajouté:
white-space:nowrap;
à mon menu et ça marche.
Merci
Modifié par chrisllers (10 Aug 2008 - 18:01)