28172 sujets

CSS et mise en forme, CSS3

Menu deroulant a problemes

Salut à tous

Je débute en CSS et j'aimerais vous demander de l'aide pour arriver à boucler la mise en forme correcte d'un menu déroulant que j'ai essayé de faire en CSS.

Comme vous pourrez vous en rendre compte, j'ai un paquet de problèmes.

Mon 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" />
<link rel="stylesheet" href="images/styles.css" type="text/css" />
<link rel="stylesheet" href="images/menu.css" type="text/css" />
<!--[if !IE]> <-->
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<!--> <![endif]-->
<!--[if IE 8]>
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<![endif]-->
</head>
<body>
<div id="menu">
    <ul>
        <div id="spacer20"></div>
        <li><a href="#">A propos de 5com</a></li>
        <div id="spacer41"></div>
        <li><a class="onglet_actif" href="#">Les M&eacute;tiers de 5com</a>
            <ul>
                <div id="fleche"></div>
                <div id="ligne" style="	margin-top:-2px;"></div>
                <li><a href="#"><img src="images/pixel_transparent.gif" height="8" width="19" alt="" />Docteur Ordinateur</a></li>
                <li><a href="#"><img src="images/pixel_transparent.gif" height="8" width="19" alt="" />Maintenance multi-sites</a></li>
                <li><a href="#"><img src="images/pixel_transparent.gif" height="8" width="19" alt="" />Déploiement de réseaux télécoms</a></li>
                <li><a href="#"><img src="images/pixel_transparent.gif" height="8" width="19" alt="" />Services Informatiques aux PME</a></li>
                <li><a href="#"><img src="images/pixel_transparent.gif" height="8" width="19" alt="" />SSII : Conseil, Intégration et Infogérance</a></li>
                <div id="ligne"></div>
           </ul>
        </li>
        <div id="spacer41"></div>
        <li><a href="#">Réf&eacute;rences</a></li>
        <div id="spacer41"></div>
        <li><a href="#">Recrutement</a></li>
        <div id="spacer41"></div>
        <li><a href="#">Contact</a></li>
    </ul>
</div>
</body>
</html>


et mon CSS


html, body {
	margin:5px 0px 5px 0px;
	padding:0px;
	text-align:center;
	font-family:Arial, Tahoma, Verdana;
	background-color:#FFFFFF;
	font-size:12px;
}

/* MENU */

#menu {
	margin:0;
	padding:0;
	margin-right:4px;
	margin-top:32px;
	width:762px;
	height:33px;
	float:right;
	background-image:url(degrade_menu.jpg);
	background-repeat:no-repeat;
	vertical-align:middle;
	font-size:13px;
	list-style:none;
	line-height:21px;
}
#menu ul {
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:left;
}
#menu ul li { /* Bouton principal */
	float:left;
	margin:auto;
	padding:0;
	width:auto;
}
#menu ul li a { /* Bouton principal lorsqu'un lien pointe dessus */
	display:block;
	padding:0;
	margin:0;
	height:22px;
	line-height:22px;
	margin-top:5px;
	margin-bottom:4px;
	padding-right:7px;
	padding-left:7px;
	color:#7f1554;
	text-decoration:none;
	font-size:13pt;
}
#menu ul li a:hover { /* Survol du Bouton Principal */
	display:block;
	padding:0;
	margin:0;
	height:21px;
	line-height:21px;
	margin-top:4px;
	margin-bottom:-2px;
	padding-right:5px;
	padding-left:5px;
	background-color:#f9fcf3;
	color:#7f1554;
	text-decoration:none;
	font-size:13pt;
	border: solid #7f1554 2px;
}
#menu li ul li a { /*Bouton de Sous Liste lorsqu'un lien pointe dessus */
	margin:0;
	padding:0px 2px 2px 2px;
	display:block;
	width:320px;
	text-decoration:none;
	color:#7f1554;
	font-size:11pt;
	background-image: url(carre_violet.gif);
	background-position: 5px 8px;
	background-repeat: no-repeat;
	border-left: solid #7f1554 2px;
	border-right: solid #7f1554 2px;
}
#menu li ul li a:hover { /* Survol du Bouton Sous Liste */
	margin:0;
	padding:0px 2px 2px 2px;
	color:#FFD700;
	background:#98c13d;
	color:#ffffff;
	font-size:11pt;
	background-image: url(carre_blanc.gif);
	background-position: 5px 8px;
	background-repeat: no-repeat;
	border:none;
	border-left: solid #7f1554 2px;
	border-right: solid #7f1554 2px;
}
#menu li:hover ul li {
	float:none;
	display:block;
	padding:0;
	margin:0;
	width:auto; /* largeur de l'ensemble des lignes de la sous-liste PROBLEME */
	background-color:#f9fcf3;
}
#menu ul li ul { /* Disparition de l'affichage de la Sous Liste */
	display:none;
}
#menu ul li:hover ul { /* Affichage de la Sous Liste */
	display:block;
	z-index:2;
}
#ligne {
	padding:0;
	margin:0;
	height:2px;
	width:auto;
	background-color:#7f1554;
}
#fleche {
	padding:0;
	margin:0;
	border:none;
	border-left: solid #7f1554 2px;
	border-right: solid #7f1554 2px;
	height:30px;
	width:auto;
	background-color:#f9fcf3;
	z-index:1;
}
#spacer20  {
	margin:0;
	padding:0;
	width:20px;
	height:33px;
	float:left;
}
#spacer41  {
	margin:0;
	padding:0;
	width:33px;
	height:33px;
	float:left;
}
.onglet_actif  {
	padding:0;
	margin:0;
	height:21px;
	line-height:21px;
	background-color:#f9fcf3;
	margin-top:4px;
	margin-bottom:-2px;
	padding-right:5px;
	padding-left:5px;
	color:#7f1554;
	text-decoration:none;
	font-size:13pt;
	border: solid #7f1554 2px;
}


Je vous remercie par avance pour l'aide que vous pourrez m'apporter.
Salut!

J'ai sous la main ce bout de code pour un menu compatible IE7/8, Firefox et Safari :
(Tu peux le voir "en action" ici )

<ul id="menu">
	 <li><a href="?p=liens1">liens1</a></li>
	 <li><a href="?p=liens2">liens2</a></li>
	 <li><a href="?p=liens3">liens3</a>
	 	<ul id="menu_niveau2">
			 <li><a href="?p=liens3_1">liens3_1</a></li>
			 <li><a href="?p=liens3_2">liens3_2</a></li>
		</ul>
	 </li>
	 <li><a href="?p=liens4">liens4</a> 
	 	<ul id="menu_niveau2">
	 	         <li><a href="?p=liens4_1">liens4_1</a></li>
			 <li><a href="?p=liens4_2">liens4_2</a></li>
			 <li><a href="?p=liens4_3">liens4_3</a></li>
			 <li><a href="?p=liens4_4">liens4_4</a></li>
		</ul>
	</li> 			 		
</ul>




/* Niveau 1 */
ul#menu li
{
	display: block;
	list-style-type: none;
	float: right;
	text-align: center;
	margin-left: 10px;
}

ul#menu li a
{
	display: block;
}

ul#menu li a:hover
{
	text-decoration: none;
}

/* Niveau 2 */


ul#menu_niveau2
{
	display: none;
	position: absolute;
}

ul#menu_niveau2 li
{
	float: none;
	text-align: left;
	position: relative;
        left: 40px;
}

ul#menu_niveau2 li a
{

}

ul#menu_niveau2 li a:hover
{

}

li:hover ul#menu_niveau2
{
	display: block;
}

Modifié par lautrejojo (18 Dec 2009 - 09:51)
Je te remercie.
En vérité je me suis inspire d'un code qui ressemble au tien. tout se passait bien mais mon menu ressemble à une usine a gaz et c'est la que ca se complique. Décalages en tous genres, problèmes de compatibilités etc ...
J'ai passe mon css au vérificateur, tout parait correct.
Je désespère, j'en perds le sommeil là ... Smiley decu
Je pense qu'on est parti du même tuto en ligne Smiley cligne Il semble génial, mais j'ai la sensation qu'il propose justement une usine à gaz, notamment dans la gestion de la compatibilité avec IE.
Cela dit, si tu fais un copier coller du code que je t'ai passé, tel quel, çà marche du tonnerre sans aucun problème de compatibilité.

Je viens d'aller l'éditer en ne laissant que ce qu'il faut absolument garder. Le reste, tu n'as plus qu'à le remettre en forme selon tes besoins.

D'ailleurs, plus besoin de ceci :

<!--[if !IE]> <--> 
<style type="text/CSS"> 
#menu li ul { 
position:absolute; 
} 
</style> 
<!--> <![endif]--> 
<!--[if IE 8]> 
<style type="text/CSS"> 
#menu li ul { 
position:absolute; 
} 
</style>



À partir de là, comme j'ai un peu de mal à me réapproprier ton code, je peux difficilement faire plus. Quoiqu'il arrive, tiens nous au courant si tu trouve une solution Smiley cligne
Sujet clos
Aller à