Menu CSS

**Portekoi** · 16 Décembre 2005

Bonsoir à tous,

Je travaille actuellement sur un menu en CSS. J'ai trouvé un code intéressant ici et je l'ai adapté à mes besoins.

Sous IE, pas de soucis (normal me direz vous <_< ) sous FireFox, j'ai le sous menu qui prends 100%. J'ai donc mis un "inherit" dans la class "ul#menu ul" mais le résultat ne me conviens pas car le surlignage déborde.

Ce que j'aimerais c'est un sous cadre un peu plus grand que son parent mais qui s'affiche correctement sous IE et FF (pour le début )

Voici le code :


<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:100%;
  background:#FFFFFF;
  float:left;
  font:0.7em Arial;
  border:1px solid #CCCCCC;
}

ul#menu hr{
 margin-right: 4px;
 margin-left: 4px;
}

ul#menu li{
  float:left;
  display:block;
  padding:2px 1px;
  width:16%;
}

ul#menu li.first{
  padding-left:2px;
}

ul#menu li.last{
  padding-right:2px;
}

ul#menu li a{
  display:block;
  padding:2px 6px;
  border:1px solid #CCCCCC;
  color:#000000;
  text-decoration:none
}

ul#menu li a:hover{
  border-top-color:#F0F0F0;
  border-left-color:#F0F0F0;
  border-right-color:#999999;
  border-bottom-color:#999999;
}

ul#menu ul{
  position:absolute;
  background:#FFFFFF;
  list-style:none;
  margin-top:2px;
  margin-left:0px;
  margin-right:0px;
  margin-bottom:0px;
  padding:0px;
  width:inherit;
  z-index:1;
  border:1px solid #CCCCCC;
}

ul#menu ul ul{
  top:0px;
  left:155px;
  z-index:2;

}

ul#menu ul li{
  position:relative;
  float:none;
  margin:0px;
  padding:0px;
  _display:inline;
  width:100%;
}

ul#menu ul li a{
  display:block;
	margin:0px;
	padding:0px;
	width:100%;
  border:none;
}
ul#menu ul li a span{
  display:block;
  width:100%;
  _width:100%;
	padding:2px 6px;
  margin:0px 2px;
  border:none;
	cursor:hand;

}


ul#menu ul li a.next:hover span{
  background-position: -160px 50%;
  border:1px solid #CCCCCC;
}

ul#menu ul li a:hover span{
  background-color:#999999;
  color:#FFFFFF;
  border:none;

}

ul#menu ul li.first{
  padding-left:0px;
}

ul#menu ul li.first a{
  padding-top:2px;
}

ul#menu ul li.last{
  padding-right:0px;
}

ul#menu ul li.last a{
  padding-bottom:2px;
	background:url(imgmenuencascade/m1.gif) no-repeat left bottom;
}
/*
p{
  margin-left:170px;
}
*/
</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 class="first">
    <a href="#">Fichier</a>

    <ul>
      <li class="first"><a href="#"><span>Nouveau</span></a></li>
      <li><a href="#"><span>Ouvrir</span></a></li>
      <li><a href="#"><span>Enregistrer</span></a></li>
      <li><a href="#"><span>Enregistrer sous...</span></a></li>
      <li><hr /></li>
      <li><a href="#" class="disabled"><span>Imprimer</span></a></li>

      <li><hr /></li>
      <li class="last"><a href="#"><span>Quitter</span></a></li>
    </ul>
  </li>
  <li>
    <a href="#">Edition</a>
    <ul>
      <li class="first"><a href="#"><span>Annuler</span></a></li>

      <li><hr /></li>
      <li><a href="#"><span>Couper</span></a></li>
      <li><a href="#"><span>Copier</span></a></li>
      <li><a href="#"><span>Coller</span></a></li>
      <li><hr /></li>
      <li class="last"><a href="#" class="disabled"><span>Selectionner tout</span></a></li>
    </ul>

  </li>
  <li class="last">
    <a href="#">Affichage</a>
    <ul>
      <li class="first"><a href="#"><span>Actualiser</span></a></li>
      <li><hr /></li>
      <li><a href="#"><span>Augmenter la taille du texte</span></a></li>

      <li><a href="#"><span>Diminuer la taille du texte</span></a></li>
      <li>
        <a href="#"><span>Encodage du texte</span></a></li>
      <li><hr /></li>
      <li class="last"><a href="#"><span>Code source de la page</span></a></li>
    </ul>
  </li>
</ul>
</body>
</html>

De plus, le border du sous menu ne s'affiche pas toujours....

Merci d'avance

Portekoi

EDIT : j'ai remodifié le code car il y avait un sous sous menu dont je n'ai pas besoin

Modifié 16 Décembre 2005 par Portekoi

Dudu · 16 Décembre 2005

Salut,

C'est le code entier que tu nous mets ou tu as oublié d'y coller le doctype à des fins de démonstration plus dépouillée ?

Si c'est la première solution, rajoutes un doctype en urgence. Pas de l'HTML (puisque tu finis tes balises uniques avec un slash), et pas non plus d'XHTML 1.1 puisque ton content-type est "text/html".

Donc au choix XHTML 1.0 Strict ou Transitional, n'importe lequel.

De là, tu passeras du quirks mode au standards-compliant mode ce qui te permettra d'avoir un rendu quasiment équivalent dans tous les navigateurs, excepté peut-être l'autre machin de Microsoft (comme d'hab').

En quirks tu as tous les risques d'avoir un rendu différent par navigateur, et j'imagine que ce n'est pas ce que tu cherches.

Ensuite, soit ton problème se résout tout seul avec le passage au s-c mode, soit tente peut-être de voir avec l'article de référence en la matière, j'ai nommé Suckerfish Dropdowns sur Alistapart, donc le code me semble légèrement moins alambiqué que ton exemple..

Et si l'anglais te rebute terriblement, Pompage a pensé à toi: La vengeance des menus déroulants

Loupilo · 16 Décembre 2005

Met nous tout ça en ligne pour pouvoir t'aider... Là c'est impossible de se faire une idée

**Portekoi** · 16 Décembre 2005

Voili voilou :

http://www.vos-photos.info/hf/test.html

J'ai mis ceci en tête :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Merci

Portekoi

**Portekoi** · 16 Décembre 2005

J'ai trouvé

Fallait mettre auto et pas inherit pour le width

Loupilo · 16 Décembre 2005

Interessant ce que tu fais

Très bien si tu as trouvé mais sur l'exemple que tu as mis en ligne, ça déborde toujours...

**Portekoi** · 16 Décembre 2005

C'est bon

**Portekoi** · 16 Décembre 2005

Hop je reviens

J'ai mis la largeur du site en 98% mais je n'arrive pas à le centrer

Connexion

Menu CSS

Sujets conseillés

Portekoi

Dudu

Loupilo

Portekoi

Portekoi

Loupilo

Portekoi

Portekoi

Veuillez vous connecter pour commenter

Parcourir

Activité