Bonjour à tous !
Alors voilà, j'ai voulu intégrer un menu déroulant horizontal (made in Alsa) dans un gabarit (made in Alsa too) qui convient plutôt bien à la structure du nouveau site que je dois créer.
Après diverses adaptations je me retrouve avec un code valide mais un affichage déficient sous IE, du moins en ce qui concerne le menu déroulant horizontal qui s'aligne sur le bord gauche de la div id="centre" au lieu de s'aligner sur le bord gauche du conteneur (div id="conteneur").
C'est là que ça se passe, je n'ai volontairement pas encore séparé styles et html.
Permettez-moi de solliciter votre aide !
Modifié par karnabal (31 May 2006 - 12:32)
Alors voilà, j'ai voulu intégrer un menu déroulant horizontal (made in Alsa) dans un gabarit (made in Alsa too) qui convient plutôt bien à la structure du nouveau site que je dois créer.
Après diverses adaptations je me retrouve avec un code valide mais un affichage déficient sous IE, du moins en ce qui concerne le menu déroulant horizontal qui s'aligne sur le bord gauche de la div id="centre" au lieu de s'aligner sur le bord gauche du conteneur (div id="conteneur").
C'est là que ça se passe, je n'ai volontairement pas encore séparé styles et html.
Permettez-moi de solliciter votre aide !
<div id="haut">
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="#" title="Présentation de Motor Avenue">Présentation</a></dt>
</dl>
<dl>
<dt style="background:#D81E1E;" onmouseover="javascript:montre('smenu1');">Annonces 1 </dt>
<dd id="smenu1">
<ul>
<li><a href="#" title="Séléction du jour">Séléction du jour</a></li>
<li><a href="#" title="Occasions des professionnels">Occasions des professionnels</a></li>
<li><a href="#" title="Motos neuves disponibles">Motos neuves disponibles</a></li>
<li><a href="#" title="Références moto">Références moto</a></li>
</ul>
</dd>
</dl>
<dl>
<dt style="background:#C49A5B;" onmouseover="javascript:montre('smenu2');">Moto 2 </dt>
<dd id="smenu2">
<ul>
<li><a href="#" title="Constructeurs">Constructeurs</a></li>
<li><a href="#" title="Equipements">Equipements</a></li>
<li><a href="#" title="Assurance">Assurance</a></li>
<li><a href="#" title="Focus">Focus</a></li>
<li><a href="#" title="Métiers de la moto">Métiers de la moto</a></li>
</ul>
</dd>
</dl>
<dl>
<dt style="background:#FF9C22;" onmouseover="javascript:montre('smenu3');">Pratiquer 3 </dt>
<dd id="smenu3">
<ul>
<li><a href="#" title="Avec une copine">Avec une copine</a></li>
<li><a href="#" title="Actualité">Actualité</a></li>
<li><a href="#" title="Evasion">Evasion</a></li>
</ul>
</dd>
</dl>
<dl>
<dt style="background:#92B9C3;" onmouseover="javascript:montre('smenu4');">Agenda 4 </dt>
<dd id="smenu4">
<ul>
<li><a href="#" title="Agenda">Agenda</a></li>
<li><a href="#" title="Evènements">Evènements</a></li>
</ul>
</dd>
</dl>
<dl>
<dt style="background:#687073;" onmouseover="javascript:montre('smenu5');">Sécurité 5 </dt>
<dd id="smenu5">
<ul>
<li><a href="#" title="Espace prévention">Espace prévention</a></li>
<li><a href="#" title="Les chiffres">Les chiffres</a></li>
</ul>
</dd>
</dl>
</div>
</div>#haut {
position:absolute;
top:50px;
left:auto;
width:732px;
height:18px;
}
#conteneur {
width:738px;
margin:0 auto;
background-color:#CCCCFF;
border:#246494;
border-width:1px;
border-style:solid;
}#menuhaut {
list-style-type: none;
margin: 0;
padding:0;
}
#menuhaut li {
display: inline;
}
#menuhaut a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menuhaut a:hover {
text-decoration: none;
}
#menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
#menugauche li {
margin-bottom: 5px;
}
#menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menugauche a:hover {
text-decoration: none;
}
#menudroit {
list-style-type: none;
margin: 0;
padding:0;
}
#menudroit li {
margin-bottom: 5px;
}
#menudroit a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menudroit a:hover {
text-decoration: none;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
dt { color:#FFFFFF;
}
#menu {
position:absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 739px; /* correction pour Opera */
}
#menu dl {
float: left;
width: 9.6em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background:#808000;
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: black; /* Couleur du texte Moto et Accueil */
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:#D4D4A8;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background:#D4D4A8;
}
#smenu1 li a:hover, #smenu1 li a:focus {
background:#EFCACA;
}
#smenu2 li a:hover, #smenu2 li a:focus {
background:#EBE3D6;
}
#smenu3 li a:hover, #smenu3 li a:focus {
background:#F7E3CB;
}
#smenu4 li a:hover, #smenu4 li a:focus {
background:#DAE2E5;
}
#smenu5 li a:hover, #smenu4 li a:focus {
background:#D8D9DA;
}
#menu dt a {
color: white;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
#smenu1 li {
color:#000000;
}
/* Couleur du texte dans les listes*/
dd#smenu1 li a {color:#D81E1E;}
dd#smenu2 li a {color:#C49A5B;}
dd#smenu3 li a {color:#FF9C22;}
dd#smenu4 li a {color:#92B9C3;}
dd#smenu5 li a {color:#687073;} Modifié par karnabal (31 May 2006 - 12:32)
