Div masque une partie de mon menu

Question

LucNo

18 Sep 2006 à 06:55

Bonjour,
Je suis débutant et j'utilise beaucoup votre site et les divers liens pour avancer. J'ai donc chargé le gabarit "<title>Largeur fluide, header/menu haut/menu gauche/menu droite/contenu/footer.</title>". Dans le menu haut j'y ai placé un menu horizontal déroulant verticalement à la place de l'existant, mais lorsque je développe ce menu, les zones menu droit et gauche du gabarit masquent les options, au milieu de la page tout va bien les options du menu sont visibles.

J'ai essayé z-index sur la balise div du menu droit, le menu fonctionne, mais les images, qui remplacent le menu existant, situées dans le menu droit ont disparu.

Voila un bout de temps que je sèche sur le sujet Smiley sweatdrop

LucNo

19 Sep 2006 à 05:31

Malgré les lectures, je vois que je n'ai pas de réponse, je vais donc essayer de préciser mon problème et utiliser les possibilités du forum en envoyant une image suivi du code.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="fr-fr">
<head>
  <title>ACTIVITE OPERATIONNELLE 2005 - SDIS 33.</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <meta http-equiv="Content-Language" content="fr">
  <meta name="Robots" content="follow">
  <meta name="MSSmartTagsPreventParsing" content="TRUE">
  <script type="text/javascript" src="dynMenu.js"></script>
  <script type="text/javascript" src="browserdetect.js"></script>
  <style type="text/css">
@import url(menu.css); / ce menu ne comporte aucun z-index
  </style>
  <style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 0.8em;
}
#header {
background-color: #ffffff;
height: 73px;
}
#haut {
height: 30px;
background-color: #cccccc;
z-index: 0;                         / si je modifie la valeur rien ne se passe
}
#conteneur {
position: absolute;
width: 100%;
background-color: #cccccc;
}
#centre {
margin-left: 100px;
margin-right: 150px;
background-color: #999999;
text-align: center;
}
#gauche {
position: absolute;
left: 0;
width: 150px;
}
#droite {
position: absolute;
width: 150px;
right: 0;
z-index: 0;                / si je modifie la valeur (-1) les icones disparaissent
}
.menuhaut {
margin: 0;
padding: 0;
list-style-type: none;
background-color: #cccccc;
z-index: 0;                / si je modifie la valeur rien ne se passe
}
.menuhaut li {
display: inline;
z-index: 0;                / si je modifie la valeur rien ne se passe
}
.menuhaut a {
border-style: none;
margin: 0 2px;
color: #ffffff;
z-index: 0;               / si je modifie la valeur rien ne se passe
}
.menugauche {
margin: 0;
padding: 0;
list-style-type: none;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menudroit {
margin: 5px;
padding: 0;
list-style-type: none;
}
.menudroit li {
padding-left: 1px;
}
.menudroit a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
p {
border-style: none;
margin-right: 0;
top: 10px;
padding-left: 0;
margin-left: 40px;
margin-top: 30px;
}
div {
background-color: #cccccc;
}
  </style>
</head>
<body
 style="color: rgb(0, 0, 0); background-color: rgb(204, 204, 255); direction: ltr;"
 alink="#000099" link="#000099" vlink="#990099">
<div style="top: 0px; height: 600px;" id="conteneur">
<div id="header"><a
 href="ACTIVITE%20OPERATIONNELLE%202005%20-%20SDIS%2033"><img
 style="border: 0px solid ; left: 0px; width: 974px; height: 70px;"
 alt="charteGOP" title="bandeau"
 src="BandeauSDIS33ActiviteOps2005.jpg"></a><a
 href="ACTIVITE%20OPERATIONNELLE%202005%20-%20SDIS%2033"><br>
</a></div>
<div id="haut">
<ul class="menuhaut">
  <ul id="menu">
    <li><a href="#menu1">Approche
g&eacute;ographique</a>
      <ul>
        <li><a href="menuHorizontal.html#">D&eacute;partement
&#9658;</a>
          <ul>
            <li><a href="menuHorizontal.html#">Ann&eacute;e
2005 &#9658;</a>
              <ul>
                <li><a href="menuHorizontal.html#">Int
par nature</a></li>
                <li><a href="menuHorizontal.html#">Int
par groupement</a></li>
              </ul>
            </li>
            <li><a href="menuHorizontal.html#">Comparatif
2001 &agrave; 2005 &#9658;</a>
              <ul>
                <li><a href="menuHorizontal.html#">Toutes
natures confondues</a></li>
                <li><a href="menuHorizontal.html#">Par
nature</a></li>
                <li><a href="menuHorizontal.html#">Par
groupement</a></li>
              </ul>
            </li>
            <li><a href="menuHorizontal.html#">Campagne
FDF &#9658;</a>
              <ul>
                <li><a href="menuHorizontal.html#">Feux
et superficies</a></li>
                <li><a href="menuHorizontal.html#">Par
mois</a></li>
                <li><a href="menuHorizontal.html#">Comparatif
mensuel 2003 &agrave; 2005</a></li>
                <li><a href="menuHorizontal.html#">Par
groupement</a></li>
                <li><a href="menuHorizontal.html#">Niveau
de risque FDF</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Groupement &#9658;</a>
          <ul>
            <li><a href="#">G&eacute;n&eacute;rales</a></li>
            <li><a href="#">Incendies</a></li>
            <li><a href="#">Accidents circulation</a></li>
            <li><a href="#">Secours &agrave;
personnes</a></li>
            <li><a href="#">Diverses</a></li>
            <li><a href="#">FDF</a></li>
          </ul>
        </li>
        <li><a href="#">Centres de secours &#9658;</a>
          <ul>
            <li><a href="#">Gpt NE</a></li>
            <li><a href="#">Gpt NO</a></li>
            <li><a href="#">Gpt Centre</a></li>
            <li><a href="#">Gpt SE</a></li>
            <li><a href="#">Gpt SO</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#menu2">&nbsp; &nbsp; Faits
marquants &nbsp; &nbsp; &nbsp;</a>
      <ul>
        <li><a href="#">Gpt NE</a></li>
        <li><a href="#">Gpt NO</a></li>
        <li><a href="#">Gpt Centre</a></li>
        <li><a href="menuHorizontal.html#">Gpt SE</a></li>
        <li><a href="menuHorizontal.html#">Gpt SO</a></li>
      </ul>
    </li>
    <li><a href="#menu3">Sources des
donn&eacute;es</a>
      <ul>
        <li><a href="#">Informations</a></li>
      </ul>
    </li>
    <li><a href="menuHorizontal.html#">Approche
th&eacute;matique</a>
      <ul>
        <li><a href="menuHorizontal.html#">Incendies
&#9658;</a>
          <ul>
            <li><a href="menuHorizontal.html#">NE</a></li>
            <li><a href="menuHorizontal.html#">NO</a></li>
            <li><a href="menuHorizontal.html#">Centre</a></li>
            <li><a href="menuHorizontal.html#">SE</a></li>
            <li><a href="menuHorizontal.html#">SO</a></li>
          </ul>
        </li>
        <li><a href="menuHorizontal.html#">Accidents
circulation &#9658;</a>
          <ul>
            <li><a href="menuHorizontal.html#">NE</a></li>
            <li><a href="menuHorizontal.html#">NO</a></li>
            <li><a href="menuHorizontal.html#">Centre</a></li>
            <li><a href="menuHorizontal.html#">SE</a></li>
            <li><a href="menuHorizontal.html#">SO</a></li>
          </ul>
        </li>
        <li><a href="menuHorizontal.html#">Secours
&agrave; personne &#9658;</a>
          <ul>
            <li><a href="menuHorizontal.html#">NE</a></li>
            <li><a href="menuHorizontal.html#">NO</a></li>
            <li><a href="menuHorizontal.html#">Centre</a></li>
            <li><a href="menuHorizontal.html#">SE</a></li>
            <li><a href="menuHorizontal.html#">SO</a></li>
          </ul>
        </li>
        <li><a href="menuHorizontal.html#">Diverses &#9658;</a>
          <ul>
            <li><a href="menuHorizontal.html#">NE</a></li>
            <li><a href="menuHorizontal.html#">NO</a></li>
            <li><a href="menuHorizontal.html#">Centre</a></li>
            <li><a href="menuHorizontal.html#">SE</a></li>
            <li><a href="menuHorizontal.html#">SO</a></li>
          </ul>
        </li>
        <li><a href="menuHorizontal.html#">FDF &#9658;</a>
          <ul>
            <li><a href="menuHorizontal.html#">NE</a></li>
            <li><a href="menuHorizontal.html#">NO</a></li>
            <li><a href="menuHorizontal.html#">Centre</a></li>
            <li><a href="menuHorizontal.html#">SE</a></li>
            <li><a href="menuHorizontal.html#">SO</a></li>
            <ul>
              <li>
                <ul>
                  <li>
                    <ul>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <script type="text/javascript">
initMenu();
  </script><!--/****************************************/
</ul--><br>
</ul>
</div>
<div style="left: 0px; width: 149px; height: 496px; top: 103px;"
 id="gauche">&nbsp; &nbsp; <br>
&nbsp;<img
 style="top: 119px; left: 5px; width: 116px; height: 170px;"
 alt="CarteD&eacute;partement" title="D&eacute;partement"
 src="../Activit%E9%20Op%E9rationnelle%202005/carteDptOmbre.png">
&nbsp;&nbsp; <img
 style="top: 292px; left: 0px; width: 136px; height: 168px;"
 alt="CarteGroupement" title="Groupements"
 src="../Activit%E9%20Op%E9rationnelle%202005/CarteEclat%E9GptOmbre.png">
<br>
<br>
<img style="left: 38px; width: 121px; top: 488px; height: 111px;"
 alt="CatreCentre" title="Centres de secours"
 src="../Activit%E9%20Op%E9rationnelle%202005/SecteurCisOmbre.png"><br>
&nbsp;
&nbsp;<br>
</div>
<div style="top: 103px; height: 496px;" id="droite">
<p><img
 style="top: 129px; height: 62px; width: 62px; left: 827px;"
 alt="Incendie" title="INC" src="LogoIncendie.jpg"></p>
<p><img
 style="top: 130px; left: 908px; width: 62px; height: 62px;"
 alt="Accident" title="AC" src="LogoAccident.jpg"></p>
<p><img
 style="top: 194px; left: 824px; width: 62px; height: 62px;"
 alt="SecourAPersonne" title="SAP" src="Brancardrouge.jpg"></p>
<p><img
 style="top: 197px; left: 907px; width: 62px; height: 62px;"
 alt="OperationDiverse" title="DIV" src="LogoOp%E9Div.jpg"></p>
<p><img
 style="top: 256px; left: 824px; width: 62px; height: 62px;"
 alt="FeuForet" title="FDF" src="LogoFDF1.jpg"></p>
<br>
</div>
<div id="centre"><br>
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<img
 style="width: 500px; height: 425px;" alt="Photo4natures"
 title="4natures" src="photo4natures.png"><br>
&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; <img
 style="left: 205px; width: 453px; top: 518px; height: 98px;"
 alt="NombreInterventions"
 title="Nombre d'interventions pour l'ann&eacute;e" src="73481.gif"><br>
</div>
</div>
</body>
</html>
[#][b][/#][/b]

Modifié par LucNo (19 Sep 2006 - 17:37)

koala64

Modérateur

19 Sep 2006 à 06:33

Bonjour Lucno et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici tes codes HTML, CSS, JS, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

LucNo

19 Sep 2006 à 17:35

Bonjour et merci pour cette info. Mais, je ne trouve pas le bouton "éditer", ni l'info "profil", je vois juste "Citer"

Raphael

Administrateur

19 Sep 2006 à 17:40

LucNo a écrit :
Bonjour et merci pour cette info. Mais, je ne trouve pas le bouton "éditer", ni l'info "profil", je vois juste "Citer"

Hello,

Tu es sûr d'être connecté sur le forum ? Le lien "profil" apparaît si tu es connecté uniquement.
Sinon il s'agit certainement d'un problème de cookies que ton navigateur n'accepte pas.

EDIT : apparemment tu as réussi Smiley cligne

Modifié par Raphael (19 Sep 2006 - 17:41)

LucNo

21 Sep 2006 à 23:02

Kiwi,
Tu peux effacer ce message, j'ai trouvé la réponse. Il fallait que j'affecte un z-index:1 à la balise "a" du menu, dont le CSS ne figure pas dans mon post. Il s'agit d'un CSS externalisé.
Je pense donc que ce message n'a pas d'intérêt pour les personnes qui consultent le forum.

A toi de voir

Sujet clos

CSS et mise en forme, CSS3

Div masque une partie de mon menu