18073 sujets

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

[résolu]Problème avec le menu déroulant horizontal - il fait toute la

Bonjour à tous,

J'ai un problème avec le tutoriel pour le menu déroulant avec firefox. Je prends le menu standard disponible sur le site d'Alsacréation (un grand merci d'ailleur), et j'essaye de le centrer. Rien de bien compliquer, mais le résultat est Smiley biggol et je comprends pas pourquoi.

Ma première option de mon menu va jusqu'en bas de la page !!

Voici le code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<!-- Le script Javascript va s'occuper du comportement lors du clic sur les menus parents. -->

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

<style type="text/css" media="screen">
<!-- 
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
text-align: center; /* pour corriger le bug de centrage IE */
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
 position: relative; /* on positionne le conteneur */
 margin-left: auto;
 margin-right: auto;
 width: 800px;
 text-align: left;
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
-->
</style>

</head>

<body>
<div id="menu">
	<dl>

		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>

		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#">Sous-Menu 1.1</a></li>
				<li><a href="#">Sous-Menu 1.2</a></li>
				<li><a href="#">Sous-Menu 1.3</a></li>
				<li><a href="#">Sous-Menu 1.4</a></li>
				<li><a href="#">Sous-Menu 1.5</a></li>
				<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>
		</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>

			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#">Sous-Menu 2.1</a></li>
				<li><a href="#">Sous-Menu 2.2</a></li>
				<li><a href="#">Sous-Menu 2.3</a></li>
				<li><a href="#">Sous-Menu 2.4</a></li>
			</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<ul>

				<li><a href="#">Sous-Menu 3.1</a></li>
				<li><a href="#">Sous-Menu 3.2</a></li>
				<li><a href="#">Sous-Menu 3.3</a></li>
				<li><a href="#">Sous-Menu 3.4</a></li>
				<li><a href="#">Sous-Menu 3.5</a></li>
			</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
			<ul>

				<li><a href="#">Sous-Menu 4.1</a></li>
				<li><a href="#">Sous-Menu 4.2</a></li>
				<li><a href="#">Sous-Menu 4.3</a></li>

			</ul>
			</dd>
	</dl>
	</div>
	<table width="760px">
		<tr>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>Test de position de texte en dessous</td>
		</tr>
	
	</table>
</body>
</html>


Un exemple en utilisation est dispo ici

Une idée sur ce que je rate pour qu'il se positionne bien dans firefox ? Sous IE ca fonctionne.

Bon en plus le postion de mon texte en dessous n'est pas bon non plus, mais une chose à la fois Smiley biggrin

Un grand merci pour tout conseil.

Stressman
Modifié par stressman (08 Jan 2006 - 19:02)
Bonsoir,

Firefox réagit à la DTD incomplète que tu utilises en basculant en mode de rendu Quirks où il reproduit d'anciens comportements de versions antérieures de Mozilla/Netscape. Dans celui-ci, le height:100% de #menu dt a est appliqué littéralement comme étant 100% de la fenêtre d'affichage (en raison du passage du menu de la position absolue à une position relative, mais passons sur les détails Smiley cligne ).

Pour régler le problème (et d'autres potentiels) : repasser simplement en mode de rendu Strict, en utilisant une DTD complète. Voir http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir pour la syntaxe de la DTD
Modifié par Laurent Denis (07 Jan 2006 - 18:54)
Bon, je patauge toujours autant. Smiley sweatdrop

Je repars donc de l'exemple fournis par alsacréation à la page Menu déroulant horizontal

Si je veux que le menu soit centré sur la page, je dois modifier quelles balises ?

Si je reprends l'exemple "Centrer les éléments ou un site web en CSS", je dois iavoir quelque chose du style 
#global {
     margin-left: auto;
     margin-right: auto;
     width: ...;
     text-align: left; /* on rétablit l'alignement normal du texte */
     }


et 

body {
     margin: 0; /* pour éviter les marges */
     text-align: center; /* pour corriger le bug de centrage IE */
     }


mais pour le menu, l'équivalent de #global c'est quoi: mon <div id="menu">?

Ma question en gros, c'est qu'est ce que je dois modifier dans le css pour que le menu soit centré ? Smiley lol (par rigolo en fait, je deviens fou)
stressman a écrit :
mais pour le menu, l'équivalent de #global c'est quoi: mon <div id="menu">?


Oui. Mais tu vas rapidement t'apercevoir que dans IE Win, le centrage de ce menu se heurte à quelques bugs CSS intéressants.
stressman a écrit :

Si je reprends l'exemple "Centrer les éléments ou un site web en CSS"..

Ma question en gros, c'est qu'est ce que je dois modifier dans le css pour que le menu soit centré ? Smiley lol (par rigolo en fait, je deviens fou)


Salut,
pas de quoi devenir fou Smiley eek
Sur la page à laquelle tu fais référence (centrer les éléments...), tu peux lire la dernière partie, "Les marges négatives".

Pour centrer ton menu, tu peux lui donner une largeur fixe, par exemple pour le menu du tuto, 780px (à déterminer en fonction de ton propre menu). Après tu appliques un left 50%, et une marge négative de la moitié de la largeur total de ton menu : 390px. Et voilà.

Ce qui donne 
#menu {
	position: absolute;
	top: 0;	
	z-index:100;
	left: 50%;
	margin-left: -390px;
	width: 780px;	
}
Excellent, merci ca marche. J'ai juste du un peu ajuster la taille de mon menu dl, pour tout faire tenir dans 780 px.

Smiley smile

maintenant je dois trouver comment editer le titre de ce post Smiley sweatdrop
Sujet clos
Aller à