Problème de liste occultée dans Menu monté en CSS

Alcaline · 28 Juin 2006

Bonjour,

J'ai un pb avec la liste des éléments dont l'affichage est partiellement caché par d'autres éléments présents sur ma page d'accueil.

Y a t-il une option "toujours visible" pour ce script?

Je précise que le menu déroulant est placé dans un <div> et que la partie qui occulte la liste est dans un autre <div> Même si j'intervertis l'ordre d'affichage, certains éléments de la liste sont invisible.

Mieux que des explications, voici une capture pour imager:

Si quelqu'un pouvait me donner un coup de main... ce serait super sympa.

Voici une partie de la feuille de style:

#abonne {
	width: 400px;
	text-align: center;
	vertical-align: top;
	height: 131px;
	position: absolute;
	left: 1px;
	border: 0px solid Black;
	top: 210px;
}
#abonne2 {
	width: 237px;
	text-align: center;
	vertical-align: top;
	height: 131px;
	position: absolute;
	left: 1px;
	border: 0px solid Black;
	top: 0px;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
border: 0px solid gray;
visibility: visible;
}
#communeinput {
	width: auto;
	height: 22px;
	position: absolute;
	top: 55px;
	left: 170px;
	border: 0px solid Black;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: Black;
}

Voici le script contenu dans le head:


<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';}
}
go_visibility = new Array;
//-->
</script>

et voici le code contenu dans le body:

   <div id="communeinput">
  <div id="menu">
	<dl>	
	 <dt onmouseover="java script:montre('smenu3');"><img src="images/acces-resto.gif" alt="Cliquez ici pour choisir votre commune ou quartier" /></dt>
	 	<dd id="smenu3" onmouseover="java script:montre('smenu3');" onmouseout="java script:montre('');">
	 	<ul>
   <li><a href=".strasbourg-bourse,pizza.htm.">Strasbourg-Bourse</a></li>
   <li><a href=".strasbourg-esplanade,pizza.htm.">Strasbourg-Esplanade</a></li>
   <li><a href=".strasbourg-krutenau,tarte-flambee.htm.">Strasbourg-Krutenau</a></li>
   <li><a href=".strasbourg-meinau,tarte-flambee.htm.">Strasbourg-Meinau</a></li>
   <li><a href=".strasbourg-neudorf-port-du-rhin,plat-chaud.htm.">Strasbourg-Neudorf-Port-du-Rhin</a></li>
   <li><a href=".strasbourg-neuhof,salade.htm.">Strasbourg-Neuhof</a></li>
				</ul>
	 </dd>
   	</dl>
   </div><!-- fin de menu -->
   </div> <!--fin de communeinput-->

   <div id="abonne">
	 <div id="abonne2">
		<form method="get" action="caddy.php">
 <div id="abonne3"><img src="images/espace-abonne.jpg" alt="Espace abonnés" /></div>
 <div id="abonne4haut"><img src="images/bord_gauche_abonne.jpg" alt="Espace abonnés" /></div>
 <div id="abonne4bas"><img src="images/bord_gauche_abonne.jpg" alt="Espace abonnés" /></div>
 <div id="abonne5haut">
	<p><input type="hidden" name="dzone" value="accueil_mdp" /></p>
	<p><input type="hidden" name="action" value="affiche_restos" /></p>
	<div id="abonne5hautmailtitre">Votre email:</div>
	<div id="abonne5hautmailinput"><p><input type="text" name="email" value="" size="20" maxlength="45" /></p></div>
 </div><!-- fin de abonne5haut -->
 <div id="abonne5bas">
  <div id="mdptitre">Mot de passe:</div>
  <div id="mdpinput"><p><input type="password" name="mdp" value="" size="8" maxlength="10" /></p></div>
  <div id="mdpgo"><p><input type="image" src="images/gooff2.jpg" alt="Cliquez sur GO pour vous identifier" /></p></div>  
 </div><!-- fin de abonne5bas -->
 <div id="abonne6haut"><img src="images/bord_droit_abonne.jpg" alt="Espace abonnés" /></div>
 <div id="abonne6bas"><img src="images/bord_droit_abonne.jpg" alt="Espace abonnés" /></div>
 <div id="mdpperdu"><a href='java script:PopupCentrer("popup/mdp_perdu.php",400,185,"menubar=no,scrollbars=yes,statusbar=no")'>J'ai perdu mon mot de passe</a></div>
</form>
</div><!-- fin de abonne2 -->
</div><!-- fin de abonne -->

[Edit captain_torche : CODEBOX, c'est la "balise" qui te permet de poster un code assez long, sans étirer inutilement la hauteur de ton post. J'ai édité ton post en ce sens.]

xpatval · 28 Juin 2006

'Soir,

CODEBOX serait un plus pour la partie html....

As-tu tenté de valider la page en question, car il doit s'agir, selon toute vraisemblance, d'un problème de z-index.

De plus, et en marge de la question, le formulaire est en method="get". Traitant mot de passe et identifiant, un method="post" serait nettement mieux, non ?

xpatval

jeanpierre949 · 29 Juin 2006

#menu ul {

position: absolute;

}

Alcaline · 29 Juin 2006

Merci xpatval d'avoir répondu

CODEBOX serait un plus pour la partie html....
As-tu tenté de valider la page en question, car il doit s'agir, selon toute vraisemblance, d'un problème de z-index.

CODEBOX est un soft qui test les .css c'est ça? en fait j'utilise le CSS Validator en ligne suivant:

Voir résultat du test avec warning mais positif

De plus, et en marge de la question, le formulaire est en method="get". Traitant mot de passe et identifiant, un method="post" serait nettement mieux, non ?

On m'a toujours conseillé de passer en méthode GET pour des raison de sécurité. Quel est ton point de vue là dessus?

Modifié 29 Juin 2006 par Alcaline

Alcaline · 29 Juin 2006

#menu ul {
position: absolute;

}

en fait j'ai ça dans le css que j'ai oublié de signaler:

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
visibility: visible;
  }

je pense que c'est là que ça se joue mais je n'arrive pas à trouver le terme qui fait que la liste est toujours visible. le visilility ne change rien. J'ai essayé aussi le elevation: higher, le overflow: visible mais sans vraiment maîtriser ce que je fais :blush:

Modifié 29 Juin 2006 par Alcaline

v4np13 · 29 Juin 2006

CODEBOX est un soft qui test les .css c'est ça?

Non, ce n'est pas un logiciel, il te demande de mettre les balises CODEBOX pour les longs codes comme ton code HTML.

Pour valider ton CSS et HTML, va sur le validateur W3C.

On m'a toujours conseillé de passer en méthode GET pour des raison de sécurité. Quel est ton point de vue là dessus?

Le GET passe par l'url tandis que le POST, il envoie les informations sur une autre page (ou sur la même en faisant POST="" ). L'inconvénient du GET, c'est que quelqu'un qui passe derrière toi et qui regarde l'url voit le mot de passe... génant non? Utilise le POST, c'est plus sûr pour les mots de passes,...

Modifié 29 Juin 2006 par v4np13

jeanpierre949 · 29 Juin 2006

mets ul en position:absolute tu verras la difference.

j'ai realisé 150 menus deroulants , je commence a savoir ou reside l'astuce

Modifié 29 Juin 2006 par jeanpierre949

Alcaline · 30 Juin 2006

jeanpierre949, j'ai mis ul en position: absolute comme tu me l'as dit mais ça ne change rien.

Je redonne mon code complet et très allégé pour que ce soit plus facile.

Si quelqu'un pouvait regarder de plus près, ce serait super sympa.

Voici un lien pour le rendu: ici

et voici le source allégé mais complet pour la partie qui m'interresse:


<html>
<head>
<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';}
}
go_visibility = new Array;

function PopupCentrer(page,largeur,hauteur,options) {
  var top=(screen.height-hauteur)/2;
  var left=(screen.width-largeur)/2;
  window.open(page,"","top="+top+",left="+left+",width="+largeur+",height="+hauteur+","+options);
}  
//-->
</script>

<style type="text/css">
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu ul {
position: absolute;
}
#menu {
position: absolute;
top: 0;
left: 0;
width: 100%; /* correction pour Opera */
border: 0px solid gray;
visibility: visible;
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
width: 200px;
}
#menu dd {
display: none;
border: 1px solid Red;
width: 200px;
text-align: left;
padding-left: 1px;
}
#menu li {
text-align: left;
background: White;
}
#menu li a, #menu dt a {
color: #000;
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: #7CFC00;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}
#global {
	width: 1000px;
	background-color: White;
	color: Black;
	text-align: center;
}
#partiecentrale {
	position: relative;
	top: 0px;
	left: 0px;
	height: auto;
	width: 1000px;
	background-color: #ffffff;
	color: Black;
	border: 0px solid Black;
	vertical-align: top;
}
#milieu {
	position: absolute;
	top: 0px;
	left: 317px;
	height: auto;
	width: 400px;
	background-color: #ffffff;
	color: Black;
	border: 0px solid Black;
	text-align: center;
	vertical-align: top;
}
#globalcp {
	width: 400px;
	text-align: center;
	vertical-align: top;
	height: 131px;
	position: absolute;
	left: 1px;
	border: 0px solid Black;
	top: 70px;
}
#abonne {
	width: 400px;
	text-align: center;
	vertical-align: top;
	height: 131px;
	position: absolute;
	left: 1px;
	border: 0px solid Black;
	top: 210px;
}
#abonne2 {
	width: 237px;
	text-align: center;
	vertical-align: top;
	height: 131px;
	position: absolute;
	left: 1px;
	border: 0px solid Black;
	top: 0px;
}
#abonne3 {
	width: 98px;
	text-align: center;
	vertical-align: top;
	height: 32px;
	position: absolute;
	left: 1px;
	border: 0px solid Black;
	top: 0px;
   }
#abonne4haut {
	width: 11px;
	text-align: center;
	vertical-align: top;
	height: 40px;
	position: absolute;
	left: 1px;
	border: 0px solid Black;
	top: 33px;
}
#abonne5haut {
	width: 215px;
	text-align: center;
	vertical-align: top;
	height: 40px;
	position: absolute;
	left: 11px;
	border: 0px solid Black;
	top: 33px;
	background-image: url(images/ligne_jaune_abonne.jpg);
}
#abonne5hautmailtitre {
	width: auto;
	text-align: center;
	vertical-align: middle;
	height: 16px;
	position: absolute;
	left: 1px;
	border: 0px solid Black;
	top: 12px;
	font: bold 13px Arial, Helvetica, sans-serif;
	color: Black;
}
#abonne5hautmailinput {
	width: auto;
	height: auto;
	position: absolute;
	left: 82px;
	border: 0px solid Black;
	top: 10px;
	font: bold 13px Arial, Helvetica, sans-serif;
	color: Black;
}
#abonne5bas {
	width: 11px;
	text-align: center;
	vertical-align: top;
	height: 40px;
	position: absolute;
	left: 1px;
	border: 1px solid Black;
	top: 23px;
	background-image: url(images/ligne_jaune_abonne.jpg);
}
#mdptitre {
	width: auto;
	height: auto;
	position: absolute;
	left: 1px;
	border: 0px solid Black;
	top: 10px;
	font: bold 13px Arial, Helvetica, sans-serif;
	color: Black;
}
#mdpinput {
	width: auto;
	height: auto;
	position: absolute;
	left: 92px;
	border: 0px solid Black;
	top: 9px;
	font: bold 13px Arial, Helvetica, sans-serif;
	color: Black;
}
#mdpgo {
	width: auto;
	height: auto;
	position: absolute;
	left: 180px;
	border: 0px solid Black;
	top: 4px;
}
#abonne4bas {
	width: 11px;
	text-align: center;
	vertical-align: top;
	height: 40px;
	position: absolute;
	left: 1px;
	border: 0px solid Black;
	top: 75px;
}
#abonne5bas {
	width: 215px;
	text-align: center;
	vertical-align: top;
	height: 40px;
	position: absolute;
	left: 11px;
	border: 0px solid Black;
	top: 75px;
	background-image: url(images/ligne_jaune_abonne.jpg);
}
#abonne6haut {
	width: 11px;
	text-align: center;
	vertical-align: top;
	height: 40px;
	position: absolute;
	left: 226px;
	border: 0px solid Black;
	top: 33px;
}
#abonne6bas {
	width: 11px;
	text-align: center;
	vertical-align: top;
	height: 40px;
	position: absolute;
	left: 226px;
	border: 0px solid Black;
	top: 75px;
}
#mdpperdu {
	width: 237px;
	text-align: center;
	vertical-align: top;
	height: 14px;
	position: absolute;
	left: 0px;
	border: 0px solid Black;
	top: 116px;
	font-size: 12px;
	color: Black;
	font-family: Arial, Helvetica, sans-serif;
}
#pizza1 {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 131px;
	width: 192px;
	background-color: #ffffff;
	color: Black;
	border: 0px solid Black;
	text-align: left;
	vertical-align: top;
}
#pcomm2 {
	position: absolute;
	top: 0px;
	left: 192px;
	height: 20px;
	width: 208px;
	background-color: #ffffff;
	color: Black;
	border: 0px solid Black;
	text-align: left;
	vertical-align: top;
}
#cp1 {
	background: url(images/pizza2.jpg);
	width: 198px;
	text-align: left;
	vertical-align: top;
	height: 85px;
	position: absolute;
	top: 27px;
	left: 192px;
	border: 0px solid Black;
}
#cp2 {
	background: url(images/pizza3.jpg);
	width: 11px;
	height: 84px;
	position: absolute;
	top: 27px;
	left: 390px;
	border: 0px solid Black;
}
#entrezcp {
	text-align: left;
	vertical-align: top;
	height: 30px;
	width: 105px;
	position: absolute;
	top: 3px;
	left: 2px;
	border: 0px solid Black;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: White;
	color: Black;
	font-weight: bold;
}
#cpinput {
	text-align: center;
	vertical-align: middle;
	width: 60px;
	height: 22px;
	position: absolute;
	top: 6px;
	left: 110px;
	border: 1px solid Black;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: Black;
}
#communeinput {
	width: auto;
	height: 22px;
	position: absolute;
	top: 55px;
	left: 170px;
	border: 0px solid Black;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: Black;
}
#validez {
	width: 54px;
	height: 20px;
	position: absolute;
	top: 114px;
	left: 335px;
	border: 1px solid Black;
}
#description {
	text-align: left;
	vertical-align: middle;
	width: 400px;
	height: 20px;
	position: absolute;
	top: 0px;
	left: 0px;
	border: 0px solid Black;
}
.arriereplan {
	background: White;
	color: Black;
}
A {text-decoration: none;}
.obj {position: absolute; visibility: visible; top: 0; z-index: 1;}
a:link
	{ text-decoration: underline }
a:visited
	{ text-decoration: underline }
a:hover
	{ text-decoration: underline; }
input
	{ font-family: ms Sans Serif,Verdana,Helvetica; color: #8A2BE2;  font-size: 10px;  font-weight: bold }
body
	{ 
	margin-left: 0;
	margin-top: 0;
	background-color: #FFFFFF;
   margin: 0;
   padding: 0;
   background: white;
   font: 80% verdana, arial, sans-serif;	
	}
</style>
</head>

<body class="arriereplan">
<div id="global">
 <div id="partiecentrale">
  <div id="milieu">
   <!----- Choix du quartier ----------------------------------------->
   <div id="globalcp">
	<div id="cp2"></div>
	<div id="pizza1"><img src="images/pizza1.jpg" alt="Selectionnez votre quartier de livraison" /></div>
	<div id="pcomm2"><img src="images/pcomm2.jpg" alt="" /></div>
	<div id="cp1"></div>
	<div id="communeinput">
	 <div id="menu">
	  <dl>	
	   <dt onmouseover="java script:montre('smenu3');"><img src="images/acces-resto.gif" alt="Cliquez ici pour choisir votre commune ou quartier" /></dt>
		  <dd id="smenu3" onmouseover="java script:montre('smenu3');" onmouseout="java script:montre('');">
			<ul>
		  <li><a href="">Strasbourg-Bourse</a></li>
		  <li><a href="">Strasbourg-Elsau</a></li>
		  <li><a href="">Strasbourg-Esplanade</a></li>
		  <li><a href="">Strasbourg-Krutenau</a></li>
		  <li><a href="">Strasbourg-Meinau</a></li>
		  <li><a href="">Strasbourg-Montagne verte</a></li>
		  <li><a href="">Strasbourg-Neudorf-Port-du-Rhin</a></li>
		  <li><a href="">Strasbourg-Neuhof</a></li>
		  </ul>
		</dd>
   	   </dl>
	 </div><!-- fin id menu -->
	</div><!--fin id communeinput-->
   </div><!--fin id globalcp-->
   <!----- accès abonnés ----------------------------------------->
   <div id="abonne">
	<div id="abonne2">
	 <form method="get" action="caddy.php">
	 <div id="abonne3"><img src="images/espace-abonne.jpg" alt="Espace abonnés" /></div>
	 <div id="abonne4haut"><img src="images/bord_gauche_abonne.jpg" alt="Espace abonnés" /></div>
	 <div id="abonne4bas"><img src="images/bord_gauche_abonne.jpg" alt="Espace abonnés" /></div>
	 <div id="abonne5haut">
	  <p><input type="hidden" name="dzone" value="accueil_mdp" /></p>
	  <p><input type="hidden" name="action" value="affiche_restos" /></p>
	  <div id="abonne5hautmailtitre">Votre email:</div>
	  <div id="abonne5hautmailinput"><p><input type="text" name="email" value="" size="20" maxlength="45" /></p></div>
	 </div><!-- fin de abonne5haut -->
	 <div id="abonne5bas">
	  <div id="mdptitre">Mot de passe:</div>
	  <div id="mdpinput"><p><input type="password" name="mdp" value="" size="8" maxlength="10" /></p></div>
	  <div id="mdpgo"><p><input type="image" src="images/gooff2.jpg" alt="Cliquez sur GO pour vous identifier" /></p></div>  
	 </div><!-- fin de abonne5bas -->
	 <div id="abonne6haut"><img src="images/bord_droit_abonne.jpg" alt="Espace abonnés" /></div>
	 <div id="abonne6bas"><img src="images/bord_droit_abonne.jpg" alt="Espace abonnés" /></div>
	 <div id="mdpperdu"><a href='java script:PopupCentrer("popup/mdp_perdu.php",400,185,"menubar=no,scrollbars=yes,statusbar=no")'>J'ai perdu mon mot de passe</a></div>
	 </form>
	</div><!-- fin de abonne2 -->
   </div><!-- fin de abonne -->
  </div><!-- fin de milieu -->
 </div><!-- fin de partiecentrale --> 
</div><!-- fin de global -->

</body>   
</html>

Sinon, je vais faire passer en formulaire en GET, merci v4np13

Edit captain_torche : Prière d'utiliser la balise CODEBOX pour les longs morceaux de codes.

Modifié 30 Juin 2006 par captain_torche

Connexion

Problème de liste occultée dans Menu monté en CSS

Sujets conseillés

Alcaline

xpatval

jeanpierre949

Alcaline

Alcaline

v4np13

jeanpierre949

Alcaline

Veuillez vous connecter pour commenter

Parcourir

Activité