Bonjour,
J'ai un petit problème avec le menu déroulant horizontal !
Quand ma page est de taille normal, pas de soucis le menu est centré, mais lorque je met Internet Explorer en plein page, le menu ne suit pas et reste sur la gauche !
Merci de votre aide :
le menu :
le css externe :
Modifié par voxibis (24 Aug 2005 - 11:53)
J'ai un petit problème avec le menu déroulant horizontal !
Quand ma page est de taille normal, pas de soucis le menu est centré, mais lorque je met Internet Explorer en plein page, le menu ne suit pas et reste sur la gauche !
Merci de votre aide :
le menu :
<!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" />
<link rel="stylesheet" type="text/css" href="test.css" media="screen" />
<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">
body {
position: relative;
margin-left: 0px;
margin-right:0px;
width: 760 px; /* largeur obligatoire pour être centré */
font: 0.769em verdana, arial, sans-serif;
z-index: 100;
}
dl, dt, dd, ul, li { background-image: url(../banniere/menu.jpg); list-style-type: none; margin: 0; padding: 0; height: 20px; }
#menu {
position: absolute;
margin-top: auto;
z-index:100;
width: 100%;
}
#menu dl {margin-left: 1px; margin-right:0px; margin: 1.9px; width: 12.329999999999em; float: left }
#menu dt { font-weight: bold; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; text-align: center; cursor: pointer }
#menu li { font-weight: bold; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; text-align: center }
#menu dd { }
#menu li a, #menu dt a { color: #000; text-decoration: none; background-image: url(../banniere/menu.jpg); background-repeat: repeat; background-attachment: scroll; background-position: 0 0; display: block; height: 100% }
#menu li a:hover, #menu dt a:hover { background: #ff9 }
a {text-decoration: none;
color: black;
color: #222;
}
</style>
</head>
<body>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="../../index.php" title="Retour à l'accueil">ACCUEIL</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">PRODUITS</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="../produit/produit.php">Collections</a></li>
<li><a href="../produit/nouveau.php">Nouveautés</a></li>
<li><a href="../produit/rupture.php">Ruptures</a></li>
<li><a href="../produit/sorties_collection.php">Sorties de collections</a></li>
<li><a href="../produit/fiches_produits.php">Fiches produits</a></li>
<li><a href="../produit/statistique.php">Statistiques</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">COMMUNICATION</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="../com/plv_visuel.php">PLV/visuel</a></li>
<li><a href="../com/catalogue.php">Catalogues</a></li>
<li><a href="../com/flash.php">Flash</a></li>
<li><a href="../com/logos.php">Logos</a></li>
<li><a href="../com/salons.php">Salons</a></li>
<li><a href="../com/revue_de_presse.php">Revue de presse</a></li>
<li><a href="../com/dossier_de_presse.php">Dossier de presse</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">COMMERCIAL</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><font color="red"> FRANCE </font></li>
<li><a href="../commercial/representants_f.php">Représentants</a></li>
<li><a href="../commercial/tarifs_f.php">Tarifs</a></li>
<li><a href="../commercial/operations_f.php">Opérations</a></li>
<li><a href="../commercial/promos_f.php">Promos</a></li>
<li><a href="../commercial/soldes_f.php">Soldes</a></li>
<li><strong><font color="red">EXPORT</font></strong></li>
<li><a href="../commercial/distributeurs_ex.php">Distributeurs</a></li>
<li><a href="../commercial/tarifs_ex.php">Tarifs</a></li>
<li><a href="../commercial/operations_ex.php">Opérations</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">DIVERS</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>
<li><a href="../../divers/ca.php">Chiffre d'affaire</a></li>
<li><a href="../../divers/vie_entreprise.php">Vie de l'entreprise</a></li>
<li><a href="../../divers/reussites_majeures.php">Réussites majeures</a></li>
<li><a href="../../divers/administration.php">Administratif</a></li>
<li><a href="../../phpBB2/index.php" target="blank">Forum</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>
le css externe :
body
{ background: #cf6; text-align: center; margin: 0 0 10px; padding: 0; position: relative }
div#conteneur
{ background: #fff; text-align: left; width: 760px; height: 1000px; border: solid 2px #9f0 }
div#en_tete
{ background-color: transparent; background-image: none; background-position: 0 0; text-align: left; margin: 0 auto; position: relative; width: 750px; }
div#menu
{ background-image: none; text-align: center; position: absolute; z-index:100; left:74px ; width: 100%; height: 30px;}Modifié par voxibis (24 Aug 2005 - 11:53)
Merci d'avance !
[/sinon]