Problème retour à la ligne dans menu dans IE

Mess · 16 Août 2004

Bonjour,

Je fais mes premiers pas avec CSS et je me butte déjà à des problèmes avec IE,

dans mon menu déroulant, lorsque le menu déroule et qu'un sous-menu ,comportant un caractère espace, est plus long que le titre du menu lui-même, le sous-menu se présente sur 2 lignes, mais il est ok lorsque le titre est plus long, evidemment sous Firefox, le tout est sur une et seule même ligne, quelqu'un a une idée pour enrayer le problème sans utiliser le caractère espace insécable ?

[Réglé avec la propriété white-space: nowrap;]

et deuxième question, tant qu'a y être est-il possible que mon menu (horizontal) remplisse le site web en largeur (ici 750px) sans utiliser de width fixe pour chaque élément de celui-ci ?

[Partiellement réglé avec l'ajout d'un padding jusqu'à temps que j'obtienne environ 750px... meilleure idée demandée!]

voici mon code :

merci d'avance

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

ul#menu li ul{
  display:none;
}

ul#menu li:hover>ul{
  display:block;
}

ul#menu{
  margin:0px;
  padding:0px;
  list-style:none;
  width:750px;
  background:#FFF;
  float:left;
  font:0.7em Verdana;
}

ul#menu li{
  float:left;
  display:block;
  padding:2px 1px;
  background-color: #FC3;
  margin-right:1px;
  text-align:center;
  font-weight:bolder;
}

ul#menu li a{
  display:block;
  padding:1px 8px;
  color:#666;
  text-decoration:none
}
ul#menu li a:hover{
  color:#FFF;
}

ul#menu ul{
  position:absolute;
  list-style:none;
  margin:0px;
  margin-top:2px;
  padding:0px;
  z-index:1;
}

ul#menu ul li{
  position:relative;
  float:none;
  margin-top:1px;
  padding:0px;
  _display:inline;
}

ul#menu ul li a{
  display:block;
  margin-top:1px;
  padding-top:2px;
  padding-bottom:2px;
  font-weight:normal;
  background-color:FC3;
}

</style>
<script type="text/javascript">
function hover(obj){
  if(document.all){
    UL = obj.getElementsByTagName('ul');
    if(UL.length > 0){
      sousMenu = UL[0].style;
      if(sousMenu.display == 'none' || sousMenu.display == ''){
        sousMenu.display = 'block';
      }else{
        sousMenu.display = 'none';
      }
    }
  }
}

function setHover(){
  LI = document.getElementById('menu').getElementsByTagName('li');
  nLI = LI.length;
  for(i=0; i < nLI; i++){
    LI[i].onmouseover = function(){
      hover(this);
    }
    LI[i].onmouseout = function(){
      hover(this);
    }
  }
}
</script>
</head>
<body onLoad="setHover()">
<ul id="menu">
  <li>
    <a href="#">Test 1</a>
    <ul>
      <li><a href="#">Lien en plusieurs mots</a></li>
      <li><a href="#">Lien 2</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Test Numero deux incluant long titre</a>
    <ul>
      <li><a href="#">Lien en plusieurs mots</a></li>
      <li><a href="#">Lien 2</a></li>
    </ul>
  </li>

</ul>
</body>
</html>

Modifié 16 Août 2004 par Mess

Mess · 16 Août 2004

J'ai partiellement réglé mes problèmes, j'ai inscris mes solutions.. bien sur si vous en avez de meilleures, je les attends!

merci

-Mess

Connexion

Problème retour à la ligne dans menu dans IE

Sujets conseillés

Mess

Lien vers le commentaire

Partager sur d’autres sites

Mess

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité