28220 sujets

CSS et mise en forme, CSS3

Problème avec menu déroulant horizontal

Bonjour tout l'monde !

Voilà je suis tombé sur le menu css déroulant horizontal d' Alsa, il est super simple et super beau Smiley smile

Mais j'ai (bien sûr) un problème :
je voudrai que le menu occupe 100% de la largeur du body, donc dans le #menu dl je mets width: 20%; (en sachant que j'ai 5 titres de menu).
Je dois également précisé que j'ai une marge autour du body.

Avec IE, c'est tout bon, le menu part du début du body jusqu'à la fin en prenant en compte les marges

Mais sous Mozilla, le menu commence bien au début du body après la marge, mais fini après !! En fait il prend comme largeur 20% de la page au lieu de 20% body avec les marges !
A noter qu'en position: relative; il prend bien par rapport au marges du body (mais là il est en absolute).

Je me demande donc comment faire pour réaliser quelque chose qui marchera sur tous les navigateurs, est-ce moi qui ne respecte pas les standards, IE, Mozilla ?
J'espère que vous pourrez m'aider, j'y ai passé mon aprèm sans trouver c'est pas ma spécialité le CSS... !
Merci, @+
Modifié par Raphael (20 May 2005 - 13:09)
Voilà un exemple de mon problème (à partir du tutorial), ca vous sera peut-être plus parlant Smiley lol 


<html>
<head>

<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: 2%;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 20%;
}
#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>

<table width="100%" CELLSPACING=0><tr><td>

<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">
				<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();"><a href="">Menu 2</a></dt>
	</dl>

	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">
				<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">
				<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>

</td>
</tr>
</table>

<br>

<TABLE BORDER=0 WIDTH='100%' CELLSPACING=0><tr><td><h3>Bienvenue (Reste du site dans ce tableau)</h3></TD>
</tr>
</table>

</body>

</html>


Avec IE c'est comme je veux, mais avec Mozilla le menu est trop grand !
Je ne vois pas comment résoudre ce pb...
Notez que j'ai rajouter le tableau autour du menu <div> pour justement que ca marche avec IE, et en fait sans ce tableau et en mettant une marge de 1% au body tout autour, et une width du menu à 98% (100% - 1% -1% Smiley cligne ) c'est parfait sous mozilla mais pas sous IE...
Rhaaaa ! Rien n'est compatible !

PS : désolé de poster comme ça, mais je ne vois pas ou l'on peut éditer les posts... ?
roro a écrit :

PS : désolé de poster comme ça, mais je ne vois pas ou l'on peut éditer les posts... ?


Tu dois avoir un bouton éditer en haut à droite de ton post Smiley cligne
Sujet clos
Aller à