28172 sujets

CSS et mise en forme, CSS3

Bonjour a tous,

je suis en train de faire un menu déroulant pour un intranet. J'ai voulu le faire en CSS afin de me passer du JavaScript pour ce menu. Après tous mes efforts je teste et surprise, il fonctionne sous IE7 mais pas sous FireFox 3 ! J'entends par 'fonctionner' le fait de passer la souris au dessus des rubriques pour en dérouler le contenu. le hover semble marcher sous Firefox (la couleur des rubriques change) mais il ne me déroule pas le sous menu.... Quelqu'un aurait une idée ? Merci a tous !

Code Html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>- Intranet IMJWEB - Accueil -</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="header">

<ul id="menu">
	<li><a href="#">Interventions</a></li>
 		<ul class="sousmenu">
    		<li><a href="#">Créer un ticket</a></li>
        	<li><a href="#">Liste des tickets</a></li>
        	<li><a href="#">Créer un compte rendu</a></li>
        	<li><a href="#">Recherche un compte rendu</a></li>
        	<li><a href="#">Gestion du planning</a></li>
		</ul>
	<li><a href="#">Clients</a></li>
    	<ul class="sousmenu">
    		<li><a href="#">Ajouter un client</a></li>
        	<li><a href="#">Liste des clients</a></li>
        	<li><a href="#">Recherche un client</a></li>
        	<li><a href="#">Liste des contacts</a></li>
		</ul>
	<li><a href="#">Statistiques</a></li>
    	<ul class="sousmenu">
    		<li><a href="#">Production</a></li>
        	<li><a href="#">Temps moyen de traitement</a></li>
        	<li><a href="#">Clients</a></li>
        	<li><a href="#">Codes sources</a></li>
            <li><a href="#">Site web</a></li>
		</ul>
	<li><a href="#">Technique</a></li>
    	<ul class="sousmenu">
    		<li><a href="#">Base de codes</a></li>
        	<li><a href="#">Liens utiles</a></li>
        	<li><a href="#">gestion des techniciens</a></li>
		</ul>
</ul>			
</div>

<div id="middle">
ici c'est le milieu
</div>

<div id="footer">
ici c'est le footer
</div>
</body>
</html>


Code CSS :
@charset "utf-8";
/* CSS Document */

body{
	padding:0;
	margin:0;
}

#header{
	background:url(img/logo_recadre.jpg) no-repeat;
	height:100px;
	}
	
/* MENU */
#menu{
	list-style-type:none;
	margin:0;
	padding:0;
	border:0;
}

#menu li{
	float:left;
	margin:0;
	padding:0;
	border:0;
	width:200px;
}
	
#menu .sousmenu li{
	float:none;
	border:0;
	margin:0;
	padding:0;
}

#menu .sousmenu{
	list-style-type:none;
	margin:0;
	padding:0;
	border:0;
	display:none;
}

#menu li a:link, #menu li a:visited{
	font-size : 20px;
	display:block;
	height:1%;
	background:#999999;
	border-right:1px solid transparent;
	margin:0;
	padding: 4px 20px ;
	text-decoration:none;
}



#menu li a:hover{
	background-color:#666666;
}

#menu .sousmenu li {
	display:block;
	margin:0;
	border:0;
	border-top:1px solid transparent;
}
	
#menu .sousmenu li a{
	font-size : 15px;
}

#menu li:hover > .sousmenu{ 
	display: block; 
}

Modifié par manu-lyon (06 May 2009 - 19:07)
Salut,

Je pense que le problème vient de ta structure HTML. Il faut inclure les sous listes dans les balises <li>.


<ul id="menu">
  <li><a href="#">Interventions</a>
    <ul class="sousmenu">
      <li><a href="#">Créer un ticket</a></li>
      <li><a href="#">Liste des tickets</a></li>
      <li><a href="#">Créer un compte rendu</a></li>
      <li><a href="#">Recherche un compte rendu</a></li>
      <li><a href="#">Gestion du planning</a></li>
    </ul>
  </li>
  .....
</ul>


C'est assez surprenant que ton code fonctionnait sous IE7, mais bon ce navigateur nous réserve toujours de nouvelles surprises Smiley confus .
Effectivement, le code HTML utilisé est invalide.

manu-lyon a écrit :
J'ai voulu le faire en CSS afin de me passer du JavaScript pour ce menu.

Un menu déroulant ne se réalise pas en CSS pur.
Modifié par Florent V. (06 May 2009 - 09:31)
Florent V. a écrit :

Un menu déroulant ne se réalise pas en CSS pur.



Que faut il utiliser en plus ?
Du Javascript ? Avec la librairie jQuery comme dans ce tuto mais en adaptant ?
un grand merci laurent35240, il s'agissait bien d'inclure mes 'ul' des sous menu dans les 'li' parents.

Il est donc bien possible de faire un menu déroulant uniquement en css.

merci beaucoup !
manu-lyon a écrit :
Il est donc bien possible de faire un menu déroulant uniquement en css.

Non.

Mais c'est bien tenté.
Florent, est-ce le terme déroulant que tu réfute ??

C'est vrai qu'on peut faire des menus en cascade avec CSS, mais pas d'effet graphique déroulant...
Arthur69 a écrit :
Florent, est-ce le terme déroulant que tu réfute ??

Non.

C'est juste qu'un machin vaguement utilisable à la souris et complètement inaccessible au clavier n'est pas, à mon sens, un menu de navigation digne de ce nom.

On peut dire ça ainsi: un menu déroulant (ou en cascade) utilisant HTML et CSS uniquement est un mécanisme de navigation cassé, et en tant que tel il ne devrait pas être utilisé.