Bonjour,
j'ai un soucis pour positionner mon menu déroulant horizontal
j'aimerai qu'il soit positionner dans le flux pour la hauteur c'est à dire aprés mon header
et en largeur j'aimerai le centrer
seulement avant de vous donner le code source de tout cela
j'aimerai préciser que je veux que mon site soit extensible à partir de 800/600 (ça se complique, enfin pour moi)
voila le code html
j'ai enlever le blabla de head ,j'ai pas mis le lien pour js puisque chez moi il est dans le fichier html mais pour plus de clarté je l'ai séparé
Code : JavaScript
Code CSS
voila j'espere que vous pourrez m'aider
merci
j'ai un soucis pour positionner mon menu déroulant horizontal
j'aimerai qu'il soit positionner dans le flux pour la hauteur c'est à dire aprés mon header
et en largeur j'aimerai le centrer
seulement avant de vous donner le code source de tout cela
j'aimerai préciser que je veux que mon site soit extensible à partir de 800/600 (ça se complique, enfin pour moi)
voila le code html
<html>
<head>
<link href="css/index.css" rel="stylesheet" type="text/css" media="screen, print, handheld">
</head>
<body>
<div id="header">
<img src="img/blala.png" alt="blabla" />
<h1>
<a href="index.html" title="Accueil">Blabla</a>
</h1>
<p>
Blabla
</p>
</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');">Blabla</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Introduction</a></li>
<li><a href="#">Blabla</a></li>
<li><a href="#">Blabla</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Blabla</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">But et histoire</a></li>
<li><a href="#">Blabla</a></li>
<li><a href="#">Blabla</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Blabla</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Pourquoi?</a></li>
<li><a href="#">Blabla</a></li>
<li><a href="#">Blabla</a></li>
</ul>
</dd>
</dl>
</div>
<div id="content">
<div id="edito">
<h3>Bienvenu sur Siteweb</h3>
</div>
</div>
</body>
</html>j'ai enlever le blabla de head ,j'ai pas mis le lien pour js puisque chez moi il est dans le fichier html mais pour plus de clarté je l'ai séparé
Code : JavaScript
<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>Code CSS
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
body {
margin: 0;
padding: 0;
background: #68acf2;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 10;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}
#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;
}voila j'espere que vous pourrez m'aider
merci