18041 sujets

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

Aide position menu dynamique honrizontal

Bonjour à tous,

voilà, je souhaite mettre un menu dynamique honrizontal sur mon site, pour cela j'ai pris modèle sur le tuto que Alsacreations propose
(http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal)
or je coince pour l'emplacement de ce menu, en effet la feuille de style prévoit une position absolue

#menu {
position: absolute;
z-index:100;
width: 100%;
}

et c'est là que ce pose la question, comment faire pour placer la zone du menu dans une cellule pour que mon menu suive un alignement parfait par rapport à la structure de mon site ??

J'ai essayé de remplacer absolute par relative mais ca ne résoud en rien mon problème, si quelqu'un pourrait m'aider ca serait gentil... Smiley biggrin

Merci d'avance
bonjour,moi aussi ja'avais le meme probleme,remplacé avsolute par relative ne donne pas le résulta voulu,moi par exemple j'ai voulu mettre mon menu entre 2 tables alors j'ai ajouté une balise div(un calque) à tout le contenu de mon site : div=calque 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<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">
<!-- 
/* CSS issu des tutoriels  http://css.alsacreations.com  */
body {
	background-color: #ffffff;
	margin: 0px;
	padding: 0px;
	height: 100%;
}
dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#calque {
	width: 800px;
	margin: auto;
}
 
#menu {
	position: absolute;
	z-index:100;
	width: 100%;
	margin: auto;
} 
#menu dl {
	float: left;
	width: 107px;
	margin: 0 1px;
} 
#menu dt {
	cursor: pointer;
	text-align: center;
	margin-top  : 0px;	
	vertical-align:middle; 
	border: #ff0000;
	border-width: 20px ;
	background: #ff0000;	
	font-family: verdana;
	font-size: 12px;
	
	
}

#menu dd {
border: 1px solid gray;

}
#menu li {
text-align: center;
background: #fff;

} 
#menu li a, #menu dt a {
	color: #ff000f;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	
	
	
}
#menu li a:hover {
	background: #CFCFD1;
 
}
#menu  dt a:hover {
	background: #DB2E2E;
	color: #E9E9E9;
}
 
#menu dt a  {
	margin-top: 0px;
}

a {
	text-decoration: none;
	color: black;
	color: #222;
	
	
}  
-->
</style>
</head>

<body>
<div id="calque"> 
<table width=800 height=100 border=2 bordercolor=#FF0000 summary="">
	<tr>
		
		<td>&nbsp;</td>
	</tr>
</table>

<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><br>
 <table width=800 height=200 border=2 bordercolor=#FF0000 summary="">
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>


</div>
</body>
</html>

j'espere que ça va vous servire Smiley smile .
Sujet clos
Aller à