18073 sujets

Questions générales et questions de débutants

[Résolu] Sous menus qui decalent le contenu

Bonjour à tous,

Voila mon problème :
J'ai pris le menu déroulant horizontal du tutoriel et je l'ai modifié à ma sauce. (Je débute !!)

Il fonctionne sauf que les sous menus décalent le contenu dans IE et passent sous le contenu dans FF.

Voici mon code CSS :



dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
	top: 110px;
	z-index:100;
	width: 735px;
	height: 22px;
	margin-top: 1px;
	margin: 0 auto;
}

#menu dl {
	float: left;
	height: 22px;
	width: 147px;
}

#menu dt {
	cursor: pointer;
	text-align: center;
	font-family: "Arial Black", Arial, sans-serif;
	font-size: 0.7em;
	height: 22px;
	width: 147px;
	color: #FFFFFF;
}

#menu li {
	text-align: center;
}

#menu li a, #menu dt a {
	color: #666666;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
}

#menu li a:hover, #menu dt a:hover {
background: #E6E6E6;
}

/* Classes pour attribuer le fond couleur des boutons */

#bleu {
	background-color: #00A0C6;
}

#vert {
	background-color: #01AD4E;
}

#orange {
	background-color: #FF9900;
}

#rouge {
	background-color: #FF1A00;
}

#violet {
	background-color: #BA00FF;
}

/* Classes pour attribuer les attributs des sous menus */

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}

#smenu1 {
	background-color: #AEDEFC;
}

#smenu2 {
	background-color: #8ADDAD;
}

#smenu3 {
	background-color: #FCE0BB;
}

#smenu4 {
	background-color: #FFCECA;
}

#smenu5 {
	background-color: #EECDFC;
}



Et voici mon code HTML :



<dl>			
<dt id="bleu" onmouseover="javascript:montre('smenu1');">Unieux Citoyenne</dt>
<dd id="smenu1">
<ul>
<li><a href="#">Equipe Municipale</a></li>
<li><a href="#">Conseil Municipal</a></li>
<li><a href="#">Services Municipaux</a></li>
<li><a href="#">Bulletin Municipal</a></li>
<li><a href="#">Ecoute Citoyenne</a></li>
<li><a href="#">Marchés Publics</a></li>
<li><a href="#">Budgets</a></li>
</ul>
</dd>
</dl>
				
<dl>	
<dt id="vert" onmouseover="javascript:montre('smenu2');">Unieux Découverte</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Histoire et Patrimoine</a></li>
<li><a href="#">Tourisme</a></li>
<li><a href="#">Jumelage</a></li>
<li><a href="#">Unieux en images</a></li>
<li><a href="#">Accès</a></li>
</ul>
</dd>
</dl>
				
<dl>	
<dt id="orange" onmouseover="javascript:montre('smenu3');">Unieux Pratique</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Guide des Associations</a></li>
<li><a href="#">Adresses utiles</a></li>
<li><a href="#">Transport</a></li>
<li><a href="#">Enfance - Jeunesse</a></li>
<li><a href="#">Séniors</a></li>
<li><a href="#">Le Marché</a></li>
<li><a href="#">Environnement</a></li>
</ul>
</dd>
</dl>
				
<dl>	
<dt id="rouge" onmouseover="javascript:montre('smenu4');">Unieux Loisirs</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Sports</a></li>
<li><a href="#">Culture</a></li>
<li><a href="#">Musique</a></li>
<li><a href="#">Lecture</a></li>
<li><a href="#">Cinéma</a></li>
<li><a href="#">A tout Age</a></li>
<li><a href="#">Agenda</a></li>
</ul>
</dd>
</dl>
				
<dl>	
<dt id="violet" onmouseover="javascript:montre('smenu5');">Unieux Administrative</dt>
<dd id="smenu5">
<ul>
<li><a href="#">Démarches Générales</a></li>
<li><a href="#">Démarches Urbanisme</a></li>
</ul>
</dd>
</dl>


Si quelqu'un peut me sauver ...

Merci
Modifié par Julihus (17 Feb 2006 - 16:52)
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Oui j'ai essayé ca ne marche pas...
Je suis en train de vérifier avec ce que m'a dit raphael par rapport aux décalages.

Mais j'ai du mal, après le problème c'est pour centrer le tout
J'ai fixé mon menu et mon conteneur en absolu avec des Z index differents :



#menu {
	width: 735px;
	height: 22px;
	margin-top: 1px;
	margin: 0 auto;
	position: absolute;
	z-index: 100;
}

#conteneur {

	position: absolute;
	z-index:1; /* on positionne le conteneur */
	width: 760px;
	margin:0 auto;
	border: 1px solid #999999;
}


Et voila ce que j'obtient (le conteneur est encadré) :

http://julihus.free.fr/www.ville-unieux.fr/

Maintenant ce n'est plus centré...

Je voudrais que le conteneur soit au milieu de la page
et que le menu soit au milieu du conteneur...

Mais bon j'avance...
C'est bon j'ai résolu mon problème...

J'ai pris un modèle de Dreamweaver.
Je suis repartie à zéro avec des jolis div tout neufs et c'est bon ca marche beaucoup mieux !!

Merci beaucoup !!
Sujet clos
Aller à