28172 sujets

CSS et mise en forme, CSS3

Menu horizontal qui décale

J'utilise le menu d'alsacreations horizontal. La position du menu est centrée. Le problème est que quand on déroule les menus, ça décalle tout le bas. Je m'explique, les menus ne passent pas au dessus du texte il le décale. c'est embettant. C'est la même chose avec IE6 et IE7.

Le fichier CSS est :
------------------------
BODY {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
WIDTH: 1000px;
TEXT-ALIGN: left;
margin-top: 40px;
margin-right: auto;
margin-left: auto;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 0 px;
}
#menu dd {
border: 1px solid #296488; /* bordure du menu */
}
#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;
background: #DCE9F0;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

#site {
position: absolute;
z-index: 1;
top : 130px;
left : 100px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}

a {text-decoration: none;
color: black;
color: #222;
}
-->
---------------------------
le fichier HTML est :
----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML lang=fr xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"><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>


<META content="MSHTML 6.00.6001.18023" name=GENERATOR>
<link href="menu.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<div id="menu">
<div align="center">
<dl>
<dt onMouseOver="javascript:montre();"><a href="http://www.e-mmobilier.com"><img src="images/bt_recherche_haut.gif" alt="acheter un bien immobilier, recherche" width="152" height="32" border="0" longdesc="http://www.e-mmobilier.com" /></a></dt>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu1');"><img src="images/bt_pratique_haut.gif" alt="l'immobilier pratique" /></dt>
<dd id="smenu1">
<ul>
<li><a href="emprunt.asp">Calcul d'emprunt</a></li>
<li><a href="article.asp">Articles immobiliers</a></li>
<li><a href="faq.asp">Questions fréquentes</a></li>
<li><a href="lexique.asp">Lexique immobilier</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu2');"><img src="images/bt_agence_haut.gif" alt="Espace agence immobili&egrave;re" width="152" height="32" /></dt>
<dd id="smenu2">
<ul>
<li><a href="agence.asp">Espace réservé</a></li>
<li><a href="annoncer.asp">Devenir client</a></li>
<li><a href="avantage.asp">Noa avantages</a></li>
<li><a href="calendrier.asp">Date de parution</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu3');"><img src="images/bt_distribution_bas.gif" alt="Distribution journal e-mmobilier" width="152" height="32" /></dt>
<dd id="smenu3">
<ul>
<li><a href="points_distribution.asp">Point de distribution</a></li>
<li><a href="abonnement.asp">Vous abonner...</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu4');"><img src="images/bt_plus_haut.gif" alt="Divers renseignements immobiliers" width="152" height="32" /></dt>
<dd id="smenu4">
<ul>
<li><a href="plan_site.asp">Plan du site</a></li>
<li><a href="contact.asp">Contactez-nous</a></li>
<li><a href="partenaire.asp">Nos partenaires</a></li>
<li><a href="info_legales.asp">Infos Légales</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="javascript:montre();"><a href="alerte.asp"><img src="images/bt_vendre_haut.gif" alt="acheter un bien immobilier, recherche" width="152" height="32" border="0" longdesc="http://www.e-mmobilier.com" /></a></dt>
</dl>
</div>
</div>
<p align="center">dqsdq</p>
<p align="center">qsdq</p>
<p align="center">qsdqsd</p>
<p align="center">qsdqsd</p>
<p align="center">qsdqs</p>
<p align="center">dqsdqs</p>
<p align="center">qsdqs</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">qsdqsdsq </p>
</BODY></HTML>

------------

Merci !!!
Sujet clos
Aller à