18041 sujets

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

Menu horizontal [Résolu]

Bonjour a tous, je suis nouveau sur ce forum. J'ai besion de votre aide.

J'ai pris l'exemple du menu horizontal qui est expliquer sur un tuto de ce site et je l'ai modifier a mon goût.

Ma question est la suivante: Comment faire pour le placer au miliau de mon site? J'aimerais mettre mon headers en haut de mon menu et en bas du menu mettre ma page principal. Pour l'instant il reste toujours en haut même si je met une image en haut de celui-ci.

Merci de bien vouloir m'aider.
Modifié par Dreamweb (16 Apr 2007 - 22:29)
Bonjour,

Pour ma part, je n'ai absolument rien compris. Smiley confus Peux-tu être plus précis et fournir le cas échéant un bout de code sur lequel se baser?
1.J'ai régler mon problème de mettre mon menu en dessous de mon headers, mais je sais pas si c'est ok? Dans mon code css j'ai remplacer (absolut) par (relative)?

3.J'ai un 2ième problème par contre. Quand mes sous-menu apparaissent, il déplace le reste de mon site vers le bas? Comment régler ce problème. (J'avais vue quelque chose du genre sur le forum mais je ne le trouve plus)

4.Mon 3ième problème est le suivant: Comment centrer le menu dans mon site?

Voici mon code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Mon site web</title>
<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;
}
#conteneur {
position: absolute;
width: 100%;
}
#header {
height: 100px;
background-color: #99CCCC;
}
#centre {
background-color: lime;
font: 80% verdana, arial, sans-serif;
color: black
}
#pied {
height: 30px; 
background-color: navy; 
font: 150% verdana, arial, sans-serif; 
color: white
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {position: relative; /* placement du menu, à modifier selon vos besoins */
top: 0; left: 0; z-index: 100; width: 100%}
#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;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}
-->
</style>

</head>
<body>


	  <div id="header">HEADER (image a venir)</a>

</div>
<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>
<div id="centre">Centre<br>
<br>
<br>

<div id="pied">allo
</body>
</html>


Merci de vos réponses
Modifié par Dreamweb (15 Apr 2007 - 18:32)
Sujet clos
Aller à