28220 sujets

CSS et mise en forme, CSS3

[résolu] Menu déroulant - Décalage

Bonjour,

J'ai un petit probleme avec mon menu déroulant. Placé dans le "conteneur" centré, mon menu décale le texte placé dans le bloc "site".
Lorsque le menu est à droite sans etre dans un conteneur, les sous menu s'affiche bien au dessus du texte.
Je suppose donc que j'ai du louper quelques chose.
Mon code :

<!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">
<!--
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 css.alsacreations.com */
body {
margin: 10px 0;
padding: 0;
text-align: center;
background: #AFA99B;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: center;
top: 0px;
left: 0;
z-index:100;
width: 100%; /* précision pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 0.5px solid gray;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: left;
background: #fff;
}
#menu li a{
color: #FFF;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
background: transparent url("fondTR.png") repeat;
}
#menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
 background-color: #e3b21c;
}
#conteneur
{
position: relative; /* on positionne le conteneur */
width: 770px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#site {
z-index: 1;
top : 10px;
left : 10px;
color: #000;
width:500px;
height: 400px;
margin-left: auto;
margin-right: auto;
text-align: left;
background-color:#AFA99B;
border: 1px solid gray; 
}
#footer
{
margin: 0;
padding-right: 10px;
line-height: 30px;
text-align: center;
}
-->
</style>
</head>

<body>

<div id="conteneur">

  <div id="menu">
    <dl>
      <dt onmouseover="javascript:montre();">
        <a href="" title="Retour à l'accueil">Accueil</a>
      </dt>
    </dl>
	
    <dl>			
      <dt onmouseover="javascript:montre('smenu1');">Acteurs</dt>
      <dd id="smenu1">
        <ul>
          <li><a href="équipe.html">L'Equipe pédagogique</a></li>
          <li><a href="élèves.html">Les Elèves</a></li>
	</ul>
      </dd>
    </dl>
    
    <dl>
      <dt onmouseover="javascript:montre('smenu3');">Espace reservé</dt>
      <dd id="smenu3">
	<ul>
          <li><a href="équipe.html">Professeurs</a></li>
          <li><a href="élèves.html">Parents d'élèves</a></li>
	</ul>
      </dd>
    </dl>
    
    <dl>	
      <dt onmouseover="javascript:montre('smenu4');">Nous joindre</dt>
      <dd id="smenu4">
	<ul>
          <li><a href="accès.html">Plan d'accès</a></li>
          <li><a href="contact.html">Contacts</a></li>
	</ul>
      </dd>
    </dl>
	
    <dl>
      <dt onmouseover="javascript:montre();">
        <a href="">Liens</a>
      </dt>
    </dl>
    	
  </div>
  
  <div id="site">
    <h1>Menu horizontal déroulant en CSS</h1>
    <p>Testé sous Internet Explorer, Netscape, Mozilla, Opera et Firebird</p>
    <p>Il vous suffit d'adapter le code source de cette page &agrave; vos besoins. </p>
  </div>
  
  <p id="footer">Réalisation des codes xhtml & css, du tutoriel et du design par ElMoustiko</p>
  
</div>
  
</body>
</html>


Je vous remercie, j'ai beau avoir cherché une réponse sur le site mais sans succès.. Smiley confus
Modifié par syvid (19 May 2005 - 09:46)
Sujet clos
Aller à