[Résolu] List inline menu qui se superpose

Bonjour,

voici mon pb, j'ai mes boutons de menu qui se superpose lorsque la page est trop petite en largeur avec un résolution très basse. pouvez-vous m'aider à ce qu'elle ne se superposent plus mais se mettent en dessous avec un petit espace avec les boutons du dessus?

mon html :

<div id="navcontainer">
   <ul id="navlist">
       <li><a id="current" href="portail.php">Accueil</a></li>
       <li><a href="/helpdesk/" target="_blank">HelpDesk</a></li>
       <li><a href="/NotilusASP" target="_blank">Notilus</a></li>
       <li><a href="..." target="_blank">Qualité</a></li>
       <li><a href="..." target="_blank">Qualité</a></li>
       <li><a href="..." target="_blank">Qualité</a></li>
       <li><a href="..." target="_blank">Qualité</a></li>
       <li><a href="..." target="_blank">Qualité</a></li>
       <li><a href="..." target="_blank">Qualité</a></li>
   </ul>
</div>

mon css:

#navlist
{
  margin-top:1px;
  margin-bottom:0px;
  text-align:center;
  padding: 5px 0;
  margin-left: 0;
  border-bottom: 1px solid #0F3974;
  font: bold 12px Verdana, sans-serif;
  
}
#navlist li
{
  list-style: none;
  margin: 0;
  display: inline;
}

#navlist li a
{
  color: #F1F6FE;
  padding: 5px 15px;
  margin-left: 3px;
  border: 1px solid #0F3974;
  border-bottom: none;
  background: #2153AA url('../images/tab_bg.gif') bottom left repeat-x;
  text-decoration: none;
}

#navlist li a:link { color: #F1F6FE; }
#navlist li a:visited { color: #F1F6FE; }

#navlist li a:hover
{
  color: #FFFFFF;
  background: #3364BB;
  border-color: #0F3974;
}

#navlist li a#current
{
  color: #000;
  background: #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}

Le résultat actuel:
http://img183.imageshack.us/img183/8881/menuintraneten3.jpg

Merci pour vos conseils
Modifié par xender (17 Oct 2008 - 10:40)

Tu as essayé de passer les liens en display: block; float: left; Après, en jouant sur le height et le line-height ça devrait pas être compliqué.

Un exemple parmi d'autres:
http://www.dynamicdrive.com/style/csslibrary/item/matt_black_tabs/

Bonjour,

Le résultat obtenu est une conséquence parfaitement normale de l'utilisation de padding vertical sur des éléments en display: inline; (le padding: 5px 15px; des liens).

Tu peux éventuellement jouer sur le line-height des éléments LI pour avoir une hauteur de ligne suffisante pour «absorber» le padding qui dépasse. Ou bien passer les liens (éléments A) en display: inline-block, ou en float: left.
Modifié par Florent V. (16 Oct 2008 - 21:47)

Calak a écrit :
Tu as essayé de passer les liens en display: block; float: left;

Pas besoin de display:block avec des éléments flottants.

Calak a écrit :
Après, en jouant sur le height et le line-height ça devrait pas être compliqué.

À partir du moment où les liens sont flottants, il n'y aura pas particulièrement besoin de jouer sur le line-height, et pas du tout besoin de jouer sur height.

Si tu le dis, je te crois...

Mais, lorsque je parlais de block, c'était justement pour modifier le height (ou alors je me trompe, et il n'y a pas de problème pour mettre un height à un inline? )

A partir du moment où il joue sur le line-height, il est préférable (toujours selon moi) de jouer aussi sur le height. En cas de redimentionnement du texte, que le tout reste cohérent (et ne se chevauche pas à nouveau)

Maintenant, je n'ai pas la science infuse, et ça fait un moment que je n'ai plus fait du "chippotage" comme ça. Donc il est fort probable que je me gourre.

Calak a écrit :
Mais, lorsque je parlais de block, c'était justement pour modifier le height (ou alors je me trompe, et il n'y a pas de problème pour mettre un height à un inline? )

Un élément flottant aura un mode de rendu spécifique, qu'il soit en display block, inline ou inline-block à la base. Un élément flottant peut recevoir une hauteur ou une largeur, même s'il s'agit au départ d'un élément de type en-ligne.

Calak a écrit :
A partir du moment où il joue sur le line-height, il est préférable (toujours selon moi) de jouer aussi sur le height. En cas de redimentionnement du texte, que le tout reste cohérent (et ne se chevauche pas à nouveau)

Là je ne te suis pas. D'après mon analyse:
- si on passe par des flottants, jouer sur le line-height ne sera pas nécessaire, on peut garder un line-height automatique ou un line-height entre 1 et 1.5, sans que ça pose de problème particulier;
- si on garde des éléments en display: inline, le line-height (entre 1.8 et 2.5 environ) sur le conteneur (UL) permettra de gagner un peu d'espace pour ces padding et bordure qui «dépassent», et l'utilisation de height sur les LI ou A ne sera ni utile, ni possible à vrai dire.

Donc, pour récapituler les solutions au problème de xender:
- éléments A du menu en display: inline-block (à tester, je n'ai pas vérifié ce que ça donnait exactement);
- élément UL du menu avec un line-height plus important (ex: line-height: 1.8;
- éléments A du menu en float: left, ou bien éléments LI en float: left et A en display: block.

Merci ça marche avec display: inline-block; !

#navlist
{
  margin-top:1px;
  text-align:center;
  margin-left: 0;
  border-bottom: 1px solid #0F3974;
  font: bold 12px Verdana, sans-serif;  
}
#navlist li
{
  list-style: none;
  margin: 0;
  display: inline;
}

#navlist li a
{
  color: #F1F6FE;
  padding: 5px 10px;
  margin-left: 3px;
  border-bottom: none;
  background: #2153AA url('../images/tab_bg.gif') bottom left repeat-x;
  text-decoration: none;
  display: inline-block;
}