bonsoir à vous tous
voici mon problème :
L'exemple est à l'adresse : http://www.raphael-pinet.com
Le problème vient du menu (lien "l'association"). Il est composé de cinq items de sous-menu et sous IE, je ne peux pas accèder au cinquième item alors que cela ne pose aucun problème sous firefox ou opéra.
Voici le code xhtml
voici le code CSS
Je suis loin d'être sûr que le problème soit le z-index mais je ne vois pas comment régler ça. Si quelqu'un trouve une solution, merci d'avance.
Modifié par rafael (23 May 2007 - 23:44)
voici mon problème :
L'exemple est à l'adresse : http://www.raphael-pinet.com
Le problème vient du menu (lien "l'association"). Il est composé de cinq items de sous-menu et sous IE, je ne peux pas accèder au cinquième item alors que cela ne pose aucun problème sous firefox ou opéra.
Voici le code xhtml
<body>
<div id="conteneur">
<div id="header"> </div>
<div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu1');"> Actualités </dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li> <a href="#"> AMYG </a> </li>
<li> <a href="#"> Monde Combattant </a> </li>
</ul>
</dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');"> L'association </dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('smenu3');">
<ul>
<li> <a href="index.htm"> Qui sommes nous ? </a> </li>
<li> <a href="#"> Historique </a> </li>
<li> <a href="#"> Les membres </a> </li>
<li> <a href="#"> Congrès et AG </a> </li>
<li> <a href="statut.htm"> Statut </a> </li>
</ul>
</dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');"> <a href="#"> Les Sections </a> </dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
</dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');"> Magazine </dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>
<li> <a href="#"> Présentation </a> </li>
<li> <a href="#"> 1er trimestre 2007 </a> </li>
<li> <a href="#"> 2ème trimestre 2007 </a> </li>
</ul>
</dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu5');"> Sainte Maxime </dt>
<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
<ul>
<li> <a href="#"> Présentation </a> </li>
<li> <a href="#"> Les appartements </a> </li>
<li> <a href="#"> Locations </a> </li>
</ul>
</dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu6');"> <a href="#"> Contact </a> </dt>
<dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">
</dt>
</dl>
</div>
<div id="contenu">
<h2> Les Crèches collectives </h2>
<p> Les enfants y sont regroupés au sein d'une collectivité. Ils sont confiés à des adultes qualifiés chargés des soins
d'hygiène, d'alimentation, et de l'éveil par les jeux et autres activités diverses. </p>
<h2> Les Haltes-garderies </h2>
<p> Ce sont des lieux d'accueil temporaire (quinze heures par semaine maximum sur les trois structures) permettant aux enfants
chellois, âgés de dix semaines à six ans, de faire l'apprentissage d'une vie de groupe au travers d'activités éducatives.</p>
<p> Inscriptions : se présenter au bureau des haltes-garderies muni d'un carnet de santé, du numéro de sécurité sociale et d'
allocations de la CAF. </p>
<h2> Les Crèches familiales </h2>
<p> Les enfants sont confiés à des assistantes maternelles. Un personnel qualifié assure le suivi sanitaire et éducatif au
domicile des assistantes et à la crèche durant les activités de groupe. </p>
</div>
</div>
</body>
voici le code CSS
body {
margin: 10px 0;
padding: 0; /* on met le padding à 0 pour Opera qui définit des padding par défaut pour le body */
text-align: center; /* on utilise text-align: center pour IE : c'est la seule façon de centrer les éléments de type block avec IE */
font: 0.8em "Trebuchet MS", helvetica, sans-serif;
background: #003366;
}
/* DEFINITION DE LA DIV CONTENEUR */
div#conteneur {
position: absolute;
top: 0px;
left: 120px;
width: 770px; /* on définit la largeur de la division qui contient l'ensemble de la page à 770 pixels */
margin: 0 auto;
text-align: left; /* rétablissement de l'alignement à gauche */
border: 1px solid #fff;
background: #fff;
}
/* DEFINITION DE LA DIV HEADER */
div#header {
height: 150px; /* on définit la hauteur de la partie header contenant le titre du site */
background: url(IMAGES/header2.jpg) no-repeat left top; /* ajout d'une image de fond de largeur 770px et hauteur 150px */
margin: 0;
}
/* DEFINITION DE LA DIV MENU */
dl,dt,dd,ul,li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
width: 100%;
}
#menu dl {
float: left;
width: 128px;
font-family: verdana, sans-serif;
color: #336699;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #fff;
border: 1px solid #336699;
margin: 1px;
}
#menu dd {
display: none;
border-right: 1px dashed #336699;
border-left: 1px dashed #336699;
}
#menu li {
text-align: left;
background: #fff;
}
#menu li a {
color: #336699;
text-decoration: none;
padding-left: 3px;
display: block;
font-family: verdana, sans-serif;
font-size: 0.8em;
line-height: 2em;
border-bottom: 1px dashed #336699;
height: 100%;
}
#menu li a:hover, #menu li a:focus {
background: #CCCCCC;
}
#menu dt a {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #fff;
font-family: verdana, sans-serif;
color: #336699;
text-decoration: none;
margin: 1px;
}
#menu dt a:hover, #menu dt a:focus {
font-family: verdana, sans-serif;
color: #336699;
}
/* DEFINITION DE LA DIV CONTENU */
div#contenu {
margin-top: 100px;
padding: 0px 30px 0 100 px; /* on crée des espaces à gauche et à droite du contenu */
}
div#contenu h2 {
padding-left: 60px;
line-height: 18px;
font-size: 1.6em;
background: url(IMAGES/petit_logo.jpg) no-repeat left top;
color: #9b2;
}
div#contenu h3 {
padding-left: 20px;
font-size: 1.1em;
color: #336699;
font-family: verdana, sans-serif;
}
div#contenu p {
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
margin-bottom: 0px;
text-align: justify;
line-height: 1.6em;
font-family: verdana, sans-serif;
}
Je suis loin d'être sûr que le problème soit le z-index mais je ne vois pas comment régler ça. Si quelqu'un trouve une solution, merci d'avance.
Modifié par rafael (23 May 2007 - 23:44)