28172 sujets

CSS et mise en forme, CSS3

Pb css et menu déroulant

bonjour,
Voila j'ai un pb avec mon menu deroulant vertical :
je vous met le code css et celui de la page index
le probleme c'est que je n'arrive pas a acceder aux sous menu : dès que la souris arrive dans l'espace centre je perds la main
comme si ma boite centre ou menu etait mal definie mais cela ne marche pas uniquement sur firefox. J'ai fait un test sur un firefox plus recent et ca marche
Pourriez vous me dire si mon code css est correct et si le pb vient de firefox
d'avance merci
Sandrine

Page index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>site fixe menu vertical</title>
</head>
<body>
	<div id="bandeau">Ceci est le bandeau</div>
	<div id="menu">
<ul>

    <li class="rubrique"> <a href="#" title="Ville">Ville</a> </li>    
    <li class="rubrique"> <a href="#" title="Animaux" class="first-rub">Animaux</a> 
      <ul>
        <li class="rubrique"> <a href="#" title="Chat">Chat</a></li>
        <li class="rubrique"> <a href="#" title="Elephant" class="second-rub">Elephant</a></li>
        <li class="rubrique"> <a href="#" title="Tigre" class="second-rub">Tigre</a></li>
        <li class="rubrique"> <a href="#" title="Singe" class="second-rub">Singe</a></li>
        <li class="rubrique"> <a href="#" title="Tortue" class="second-rub">Tortue</a></li>
        <li class="rubrique"> <a href="#" title="Papillon" class="second-rub">Papillon</a></li>
        <li class="rubrique"> <a href="#" title="Girafe" class="second-rub">Girafe</a></li>
        <li class="rubrique"> <a href="#" title="Cheval" class="second-rub">Cheval</a></li>
      </ul>
    </li>    
    <li class="rubrique"> <a href="#" title="Hobbie" class="first-rub">Hobbie</a> 
      <ul>
        <li class="rubrique"> <a href="#" title="Canevas">Canevas</a> 
          <ul>
            <li><a href="#" title="Paysage">Paysage</a></li>
            <li><a href="#" title="Animaux" class="third-rub">Animaux</a></li>
            <li><a href="#" title="Nature morte" class="third-rub">Nature morte</a></li>
          </ul>
        </li>
        <li class="rubrique"> <a href="#" title="Couture" class="second-rub">Couture</a> 
          <ul>
            <li><a href="#" title="A l'enfillade" class="third-rub">A l'enfillade</a></li>
            <li><a href="#" title="A l'exfillade" class="third-rub">A l'exfillade</a></li>
          </ul>
        </li>
        <li class="rubrique"> <a href="#" title="Cuisine" class="second-rub">Cuisine</a> 
          <ul>
            <li><a href="#" title="Couscous" class="third-rub">Couscous</a></li>
            <li><a href="#" title="Paella" class="third-rub">Paella</a></li>
            <li><a href="#" title="Gigot" class="third-rub">Gigot</a></li>
            <li><a href="#" title="Tomates farcies" class="third-rub">Tomates 
              farcies</a></li>
          </ul>
        </li>
        <li class="rubrique"> <a href="#" title="Collection" class="second-rub">Collection</a> 
          <ul>
            <li><a href="#" title="Timbres" class="third-rub">Timbres</a></li>
            <li><a href="#" title="Pedalos" class="third-rub">Pedalos</a></li>
          </ul>
        </li>
      </ul>
    </li>


</ul>
</div>
	<div id="contenu"> <h1>Mon super site</h1>
       
           <p>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas  faucibus nunc. 
		Morbi quis neque laoreet ante varius rutrum. 
		Nam arcu  ipsum, blandit placerat, pharetra ut, pulvinar in, nulla. 
		Vivamus  condimentum, elit eu faucibus sollicitudin, nisi metus fermentum mi,  s
		ed egestas purus nunc sit amet est. Cras imperdiet, arcu sed placerat  viverra, arcu justo 
		malesuada augue, a tristique nunc neque vitae  ligula. Mauris bibendum. Praesent nibh. 
		Sed in lacus semper dui  lobortis dignissim. Nunc iaculis, tortor sed commodo tincidunt, 
		neque  ligula porttitor orci, venenatis bibendum ante mi id massa.  Pellentesque ipsum urna, 
		posuere non, pellentesque non, tempus at,  ipsum. Aliquam lacinia nisl sit amet ipsum.
		 Nam volutpat vulputate  lacus. Integer orci dui, lacinia non, blandit sit amet, 
		 vulputate vel,  sem. Vestibulum mi neque, pharetra ut, venenatis et, ultricies vitae,  urna.
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas  faucibus nunc. 
		Morbi quis neque laoreet ante varius rutrum. 
		Nam arcu  ipsum, blandit placerat, pharetra ut, pulvinar in, nulla. 
		Vivamus  condimentum, elit eu faucibus sollicitudin, nisi metus fermentum mi,  s
		ed egestas purus nunc sit amet est. Cras imperdiet, arcu sed placerat  viverra, arcu justo 
		malesuada augue, a tristique nunc neque vitae  ligula. Mauris bibendum. Praesent nibh. 
		Sed in lacus semper dui  lobortis dignissim. Nunc iaculis, tortor sed commodo tincidunt, 
		neque  ligula porttitor orci, venenatis bibendum ante mi id massa.  Pellentesque ipsum urna, 
		posuere non, pellentesque non, tempus at,  ipsum. Aliquam lacinia nisl sit amet ipsum.
		 Nam volutpat vulputate  lacus. Integer orci dui, lacinia non, blandit sit amet, 
		 vulputate vel,  sem. Vestibulum mi neque, pharetra ut, venenatis et, ultricies vitae,  urna.
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas  faucibus nunc. 
		Morbi quis neque laoreet ante varius rutrum. 
		Nam arcu  ipsum, blA?c???????`???`t andit placerat, pharetra ut, pulvinar in, nulla. 
		Vivamus  condimentum, elit eu faucibus sollicitudin, nisi metus fermentum mi,  s
		ed egestas purus nunc sit amet est. Cras imperdiet, arcu sed placerat  viverra, arcu justo 
		malesuada augue, a tristique nunc neque vitae  ligula. Mauris bibendum. Praesent nibh. 
		Sed in lacus semper dui  lobortis dignissim. Nunc iaculis, tortor sed commodo tincidunt, 
		neque  ligula porttitor orci, venenatis bibendum ante mi id massa.  Pellentesque ipsum urna, 
		posuere non, pellentesque non, tempus at,  ipsum. Aliquam lacinia nisl sit amet ipsum.
		 Nam volutpat vulputate  lacus. Integer orci dui, lacinia non, blandit sit amet, 
		 vulputate vel,  sem. Vestibulum mi neque, pharetra ut, venenatis et, ultricies vitae,  urna.
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed egestas  faucibus nunc. 
		Morbi quis neque laoreet ante varius rutrum. 
		Nam arcu  ipsum, blandit placerat, pharetra ut, pulvinar in, nulla. 
		Vivamus  condimentum, elit eu faucibus sollicitudin, nisi metus fermentum mi,  s
		ed egestas purus nunc sit amet est. Cras imperdiet, arcu sed placerat  viverra, arcu justo 
		malesuada augue, a tristique nunc neque vitae  ligula. Mauris bibendum. Praesent nibh. 
		Sed in lacus semper dui  lobortis dignissim. Nunc iaculis, tortor sed commodo tincidunt, 
		neque  ligula porttitor orci, venenatis bibendum ante mi id massa.  Pellentesque ipsum urna, 
		posuere non, pellentesque non, tempus at,  ipsum. Aliquam lacinia nisl sit amet ipsum.
		 Nam volutpat vulputate  lacus. Integer orci dui, lacinia non, blandit sit amet, 
		 vulputate vel,  sem. Vestibulum mi neque, pharetra ut, venenatis et, ultricies vitae,  urna.
     </p></div>
	<div id="pied_page">Ceci est le pied de page</div>
</body>
</html>

page css :
body
{
	width: 960px;
	margin: auto;/* marge droite et gauche, pour centrer notre page */
	margin-top: 5px;/* Pour éviter de coller avec le haut de la fenêtre du navigateur */
	margin-bottom: 5px;/* Pour éviter de coller avec le bas de la fenêtre du navigateur */
	background-color: #FFFFCC;/*La couleur de fond : BEIGE*/
	behavior: url(csshover.htc);
}
#bandeau {
	width: 960px;/*on va définir une largeur  */
	height: 50px;/*on va définir et une hauteur*/
	background-color:#00CCFF;
	}
#menu {
	float:left;/**/
	width: auto;/*Très important : on va définir une largeur  */
	height: 400px;/*on va définir une hauteur*/
	background-color:#FF6699;
	}
#contenu {
	width: 710px;/*Très important : on va définir une largeur  <= a la largeur du body+padding*/
	height: 400px;/*on va définir une hauteur*/
	background-color:#FFCC00;
	overflow: auto;/*permet d'avoir un scrollbar sur le coté*/
	}
#pied_page {
	clear:both;
	width: 960px;/*Très important : on va définir une largeur  <= a la largeur du body+padding*/
	height:50px;
	background-color:#33FF99;
	}
/* the menu */
ul,li,a {
	display:block;
	margin:0;
	padding:0;
	border:0;
}
ul {
	width:150px;/*LONGUEUR CONTENEUR UL */
	border:1px solid #000000;/*BORDURE NOIRE DU CONTENEUR UL*/
	background:gray;/*COULEUR CONTENEUR gris*/
	list-style:none;/*pas de style de liste */
}
li {
	position:relative;/**/
	padding:1px;
	padding-left:2px;/*DISTANCE A GAUCHE DES MENUS DANS LE CONTENEUR UL*/
	z-index:9;
}
a {
	padding:2px;
	border:1px solid white;
	text-decoration:none;
	color:white;
	font-weight:bold;
	width:150px; /* IE */
	background-color: gray;
}
a:hover {
	border-color:gray;
	background-color:#CCCCCC;
	color:black;
}
/* regular hovers */
li.rubrique ul {
	position:absolute;/**/
	left:120px; /* IE */
	top:5px;
}		
	
li.rubrique>ul { left:140px; } /* others */

li>a { width:auto; } /* others */

li.rubrique a:hover {
	background-color:#CCCCCC;
}
	
/* hovers with specificity */
li.rubrique:hover { z-index:100; }		
	
	
		
ul ul, li:hover ul ul {
	display:none;
}

li:hover ul, li:hover li:hover ul {
	display:block;
}

Modifié par sand (27 Jun 2008 - 17:46)
Bonjour Sandrine Smiley smile ,

tu as bien mis en forme ton code html mais pas le code css. Pourrais-tu éditer ton message afin de corriger cela Smiley cligne ?

Par ailleurs, et sans regarder plus avant le code, plusieurs déclarations ne seront pas comprises par IE6 :
li>a
li.rubrique>ul
li:hover
etc...
bonjour,
voila c'est fait
mais apres un retest avec firefox plus recent ca marche !!!!!
mais je suis preneuse de mes erreurs

car j'ai du mal a trouver un menu deroulant vertical sur le net sans htc
suite a un demenagement je serais coupé internet mais n'hesitez a me donner mes erreurs, je reviens bientot
d'avance merci de votre aide
sandrine
sand a écrit :
personne pour me donner mes erreurs css Smiley decu Smiley decu

S'il s'agit d'erreurs CSS, le validateur CSS du W3C sera heureux de te les donner. En l'occurrence, il n'y en a qu'une: l'utilisation de la propriété behavior, qui est une extension propriétaire propre à Internet Explorer (donc non standard, et retoquée par le validateur).

Cela n'empêche pas les divers problèmes de rendu que tu peux rencontrer, bien sûr, car un code valide peut être mal conçu, ou mal compris par les navigateurs, voire les deux à la fois. À ce propos, si je puis me permettre une digression: les débutants devraient avoir l'interdiction absolue de faire un menu déroulant, vu le côté casse-gueule de l'exercice. Smiley cligne

Pour le reste, pas le temps de reconstituer une page complète à partir de ton code pour tester ça avec divers navigateurs. Une page en ligne déjà prête à l'emploi aurait été un plus pour recevoir de l'aide. Smiley smile
Bonsoir,

Ton menu déroulant marche très bien sous firefox. Le problème c'est toujours IE...

Aujourd'hui, un pourcentage non négligeable de la population navigue encore sous IE6 qui, entre autres nombreux défauts, ne supporte pas les propriétés :hover (et autres) sur autre chose que les balises <a>.

Donc tu ne peux pas compter sur un li:hover... Car même si ça marche chez toi, ça ne marchera pas chez environ 30% des utilisateurs.
Les propriétés type li>child, il ne faut pas compter dessus non plus, pour les mêmes raisons.

Toutes les trucs propriétaires type behavior sont à proscrire, sauf nécessité type affichage des png sous ie6, et encore, là les filtres sont à préférer.

Pour ma part, après de nombreux essais infructueux, et pourtant je ne suis pas une bleue en css, je me suis rabattue sur javascript pour les menus déroulants : je prévois tous les états des menus en css, et j'ajoute juste une propriété "visibility:visible;" via javascript au rollover du lien du menu. Il y a de bonnes solutions toutes prêtes aussi via Jquery.

Il y a TOUJOURS des problèmes avec ie6. C'est la seule manière que j'ai trouvé de faire des menus avec un html propre.

Donc, bonne chance pour la suite !
Sujet clos
Aller à