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

Mess

Veuillez vous connecter pour commenter

Parcourir

Activité