28173 sujets

CSS et mise en forme, CSS3

[Résolu]Problème z-index ?

Bonjour à tous,

Je viens de suivre le tuto concernant la mise en place d'un menu déroulant horizontal, et j'ai un petit soucis ... (autrement ce serait pas drôle)

Je place mon menu dans une div avec une position relative. Au préalable, je donne 1 comme z-index à ma div relative.

Ensuite pour mon menu en position absolu, je donne 100 comme z-index
Et ensuite j'affiche avec du javascript qui tâche le texte qui est lié au lien de mon menu.

Or, il se trouve que le flux du texte que j'affiche suite au clic sur le menu est au dessus de mon menu.

Un lien ici pour voir ce que ça donne. Pour tester l'affichage il n'y a que dans le menu histoire parisienne et la période gallo-romaine que ça fonctionne.

Ensuite la partie HTML : 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>La Société de la rose : Grandeur Nature pour Vampire La Mascarade</title>
	
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	
	<style type="text/css" media="screen"><!-- @import <?php echo "\"".$http."style/style.css\"";?>; //--></style>
	<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>

</head>
<body onLoad="document.forms.authentification.login.focus()">
<div id="conteneur">

	<div id="header"><img src=<?php echo $http."images/fond/bandeau_haut.jpg";?> alt="" /></div>
	
	<div id="contenu">
		<div id="col_gauche">
			<ul>
				<li><a href=<?php echo $http."index.php";?> onmouseover="document.accueil.src=<?php echo "'".$http."images/menu/francais/ACCUEILON.jpg'";?>" onmouseout="document.accueil.src=<?php echo "'".$http."images/menu/francais/ACCUEILOFF.jpg'";?>"><img src=<?php echo $http."images/menu/francais/ACCUEILOFF.jpg";?> name="accueil"/></a></li>
				<?php if (session_is_registered("login")){ ?>
					<li><a href=<?php echo $http."deconnexion.php";?> onmouseover="document.deconnexion.src=<?php echo "'".$http."images/menu/francais/DECONNEXIONON.jpg'";?>" onmouseout="document.deconnexion.src=<?php echo "'".$http."images/menu/francais/DECONNEXIONOFF.jpg'";?>"><img src=<?php echo $http."images/menu/francais/DECONNEXIONOFF.jpg";?> name="deconnexion"/></a></li>
				<?php } else{ ?>
				<li><a href=<?php echo $http."index.php/authentification.php";?> onmouseover="document.connexion.src=<?php echo "'".$http."images/menu/francais/CONNEXIONON.jpg'";?>" onmouseout="document.connexion.src=<?php echo "'".$http."images/menu/francais/CONNEXIONOFF.jpg'";?>"><img src=<?php echo $http."images/menu/francais/CONNEXIONOFF.jpg";?> name="connexion"/></a></li>
				<?php } ?>
				<li><a href=<?php echo "\"".$http."index.php/liens.php\"";?> onmouseover="document.liens.src=<?php echo "'".$http."images/menu/francais/LIENSON.jpg'";?>" onmouseout="document.liens.src=<?php echo "'".$http."images/menu/francais/LIENSOFF.jpg'";?>"><img src=<?php echo $http."images/menu/francais/LIENSOFF.jpg";?> name="liens"/></a></li>
				<li><a href=<?php echo "\"".$http."index.php/membres.php\"";?> onmouseover="document.membres.src=<?php echo "'".$http."images/menu/francais/MEMBRESON.jpg'";?>" onmouseout="document.membres.src=<?php echo "'".$http."images/menu/francais/MEMBRESOFF.jpg'";?>"><img src=<?php echo $http."images/menu/francais/MEMBRESOFF.jpg";?> name="membres"/></a></li>
				<li><a href=<?php echo "\"".$http."index.php/contact.php\"";?> onmouseover="document.contact.src=<?php echo "'".$http."images/menu/francais/NOUSCONTACTERON.jpg'";?>" onmouseout="document.contact.src=<?php echo "'".$http."images/menu/francais/NOUSCONTACTEROFF.jpg'";?>"><img src=<?php echo $http."images/menu/francais/NOUSCONTACTEROFF.jpg";?> name="contact"/></a></li>
				<li><a href=<?php echo "\"".$http."index.php/pbn.php\"";?> onmouseover="document.pbn.src=<?php echo "'".$http."images/menu/francais/PARISBYNIGHTON.jpg'";?>" onmouseout="document.pbn.src=<?php echo "'".$http."images/menu/francais/PARISBYNIGHTOFF.jpg'";?>"><img src=<?php echo $http."images/menu/francais/PARISBYNIGHTOFF.jpg";?> name="pbn"/></a></li>
				<?php if (session_is_registered("login")){ ?>
					<li><a href=<?php echo $http."index.php/ficheperso.php";?>>Fiche perso</a></li>
					<li><a href=<?php echo $http."index.php/annuaire.php";?>>Annuaire</a></li>
					<li><a href=<?php echo $http."index.php/download.php";?>>Downloads</a></li>
					<li><a href=<?php echo $http."index.php/influence.php";?>>Influences</a></li>
					<li><a href=<?php echo $http."index.php/exchronique.php";?>>Chronique passée</a></li>
					<li><a href=<?php echo $http."index.php/planningpartie.php";?>>Planning Partie</a></li>
					<li><a href=<?php echo $http."index.php/planningsh.php";?>>Planning Saint Hilaire</a></li>
					<li><a href=<?php echo $http."index.php/modifcompte.php";?>>Modification du compte</a></li>
				<?php } 
						if(session_is_registered("conteur")){ ?>
					<center><p>---------</p></center>
					<li><a href=<?php echo $http."index.php/conteur/index.php";?>>CONTE</a></li>
				<?php } ?>
			</ul>
			<img class="logo" src=<?php echo $http."images/fond/whitewolf.jpg";?> alt="logo White Wolf"/>
		</div>
<div id="col_droite"></div>
	<div id="col_centrale"><img class="titre" src=<?php echo "\"".$http."images/titres/francais/parisbynight.jpg\"";?> alt="Paris by Night"/>
	<script language="Javascript">
	function affich(id){
		for(var i=1;i<3;i++){
			if (id != "paragraphe"+i){
				var archive=document.getElementById("paragraphe"+i).style;
				if(archive.display=='block'){
					archive.display='none';
				}
			}else{
			var archive=document.getElementById(id).style;
				if(archive.display=='block'){
				archive.display='none';
			} else {
				archive.display='block';
			};
			}
		}
	}

</script>
	<div id="menu">
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Histoire Parisienne</dt>

		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#" onClick="affich('paragraphe1');">Période Gallo-romaine</a></li>
				<li><a href="#" onClick="affich('paragraphe2');">Période Mérovingienne</a></li>
				<li><a href="#" onClick="affich('paragraphe3');">Période Carolingienne</a></li>
				<li><a href="#" onClick="affich('paragraphe4');">Premiers Capétiens</a></li>
				<li><a href="#" onClick="affich('paragraphe5');">Les Valois</a></li>
				<li><a href="#" onClick="affich('paragraphe6');">Les Bourbons</a></li>
				<li><a href="#" onClick="affich('paragraphe7');">Révolution</a></li>
				<li><a href="#" onClick="affich('paragraphe8');">Consulat et Empire</a></li>
				<li><a href="#" onClick="affich('paragraphe9');">Restauration</a></li>
				<li><a href="#" onClick="affich('paragraphe10');">Second Empire</a></li>
				<li><a href="#" onClick="affich('paragraphe11');">Troisième République</a></li>
				<li><a href="#" onClick="affich('paragraphe12');">Après-Guerre</a></li>
				</ul>
		</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Scène Parisienne</dt>

			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#" onClick="affich('paragraphe2');">L'art</a></li>
				<li><a href="#" onClick="affich('paragraphe2');">L'architecture</a></li>
				<li><a href="#" onClick="affich('paragraphe2');">Le Louvre</a></li>
				<li><a href="#" onClick="affich('paragraphe2');">L'Opéra</a></li>
				<li><a href="#" onClick="affich('paragraphe2');">La Place Vendôme</a></li>
				<li><a href="#" onClick="affich('paragraphe2');">Monuments de Paris</a></li>
				<li><a href="#" onClick="affich('paragraphe2');">Les influences</a></li>
				<li><a href="#" onClick="affich('paragraphe2');">La finance</a></li>
				<li><a href="#" onClick="affich('paragraphe2');">Les transports</a></li>
				<li><a href="#" onClick="affich('paragraphe2');">L'éducation</a></li>
				<li><a href="#" onClick="affich('paragraphe2');">La bureaucratie</a></li>
				<li><a href="#" onClick="affich('paragraphe2');">La religion</a></li>
				<li><a href="#" onClick="affich('paragraphe2');">La criminalité</a></li>
				<li><a href="#" onClick="affich('paragraphe2');">La police</a></li>
				<li><a href="#" onClick="affich('paragraphe2');">La politique</a></li>
			</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<ul>

				<li><a href="#">Sous-Menu 3.1</a></li>
				<li><a href="#">Sous-Menu 3.2</a></li>
				<li><a href="#">Sous-Menu 3.3</a></li>
				<li><a href="#">Sous-Menu 3.4</a></li>
				<li><a href="#">Sous-Menu 3.5</a></li>
			</ul>

			</dd>
	</dl>

	
		<div id="paragraphe1" style="display: none;">
			<p><i>Période gallo-romaine</i></br>
				<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;La tribu des Parisii (nom celte qui désigne une embarcation fluviale) fut vaincue en 52 av. J.C par les romains conduits par Labienus, lieutenant de César. La ville prend alors le nom de Lutecia (du nom latin qui veut dire boue) et s'étend rapidement sur la rive gauche de la Seine jusqu'à l'actuelle montagne Sainte-Geneviève. Les romains y construisent des thermes, un forum, un théâtre et un amphithéâtre ainsi que des axes routiers et un aqueduc. Lors des invasions barbares du IIIème siècle ap. J.C., les habitants se réfugient sur l'île de la Cité. Saint Denis, premier prévôt de Paris et figure du christianisme, est martyrisé en 250.</br></p>
		</div>
		<div id="paragraphe2" style="display: none;">
		<p><br><i>Période mérovingienne</i></br>
			<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lors de l'invasion des Huns d'Attila, Sainte Geneviève galvanise les habitants de Paris et leur intime l'ordre de ne pas déserter la ville. Clovis, roi des Francs et vainqueur des Romains en 486, s'établit à Paris et en fera la capitale de son royaume. Il sera enterré à l'église des Saints-Apôtres aux côtés de Sainte Geneviève qui donnera son nom à cette montagne. Le fils de Clovis, Childebert Ier, fonde en 558 l'abbaye de Saint-Germain où seront enterrés les mérovingiens. Le royaume de Clovis ne saura être préservé dans son unité et la vie à Paris se concentre sur l'île de la Cité et sur la rive droite de la Seine autour de la Grève.</br></p>
	</div>

</div>
</div>
</div>
</body>


Ma partie CSS : 
* {
margin:0;
padding:0;
}

body {
   text-align: left;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   /*font-size: 75.01%;*/
   line-height: 1em;
}

div {
   font-size: 1em;
}

img {
   border: 0;
}

a, a:link, a:active {
   text-decoration: underline;
   background-color: transparent;
   color: #DFAE4F;
   font-size: 75.01%;
}

a:visited {
   text-decoration: underline;
   /*background-color: inherit;*/
  color: #DFAE4F;
  font-size: 75.01%;
}

a:hover {
   text-decoration: none;
   /*background-color: #C3D4DF;*/
   color: #DFAE4F;
   font-size: 75.01%;
   
}

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

p {
	font-size: 75.01%;
	color: #DFAE4F;
}

input, select, textarea {
	background-color: #000;
	border : 1px solid #DFAE4F;
	/*font-size: 75.01%;*/
	color: #FFF;
}

body{ 
	background-repeat: repeat-x;
	background-position: top left;
	margin-top: 1em;    
	background-color: #000;
}

div#conteneur{
	position: absolute;
	width: 1024px;
	left: 50%;
	margin-left: -512px;
}

div#header{
	position: relative;
	margin:0;
	padding:0;
}

/*Ceci corrige le problème des espaces sous Firefox avec les images (il existe une baseline pour le texte)*/
div#header img{
	vertical-align:middle;
}

div#contenu{
	margin:0;
	padding:0;
}

div#col_gauche{
	position: relative;
	float: left;
	width: 150px;
	height: 668px;
	background-image: url("../images/fond/colone_gauche.jpg");
	background-repeat: no-repeat;
}

* html div#col_gauche{
	/*propriété de l'élément à gauche à qui il faut enlever la marge pour le three pixel jog*/
	right: 0px;
	margin-left: -3px;
}

ul{
	margin-left: 25px;
	margin-top: 25px;
}

div#col_gauche .logo{
	margin-left: 25px;
	margin-top: 50px;
	color: #DFAE4F;
}

div#col_centrale{
	position: relative;
	z-index: 1;
	margin-left: 150px;
	margin-right: 274px;
	/*width: 660px; donne un layout au contenu et le baisse par rapport aux éléments à l'extérieur*/
	height: 668px;
	background-image: url("../images/fond/colone_centrale.jpg");
	background-repeat: no-repeat;
	color: #DFAE4F;
}

div#col_centrale .titre{
	margin-top: 0px;
}

div#col_centrale table{
	font-size: 75.01%;
	color: #DFAE4F;
}

*html div#col_centrale{
	/* Pour le pixel jog, je baisse la marge à gauche et à droite de 3 pixels */
	margin-left: 147px;
	margin-right: 271px;
}

div#col_centrale table, td, .annuairetdnom{
	border: 1px solid #DFAE4F;
}

div#col_centrale td{
	padding : 3px;
}

div#col_centrale table{
	margin: 3px;
}

div#col_centrale .annuairetdnom{
	padding-left: 5px;
}

div#col_droite{
	position: relative;
	float: right;
	width: 274px;
	height: 668px;
	background-image: url("../images/fond/colone_droite.jpg");
	background-repeat: no-repeat;
}

* html div#col_droite{
	/*même chose pour la colonne de droite pour "rectifier" le three pixel jog*/
	left: -3px;
	margin-right: -3px;
}	

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 120px;
left: 0px;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #000;
border: 1px solid gray;
margin: 0px;
font-size: 75.01%;
}
#menu dd {
display: none;
border: 1px solid gray;
background: #F00;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 1px solid black;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#paragraphe1{
position: absolute;
z-index: 2;
top: 20px;
left:0px;
width: 100%;
background: #CCC;

}

/*mettre le hr dans un div pour contourner le bug des marges supérieures et inférieures sous IE*/
div.hrule { 
   clear: both; 
   visibility: hidden;
   width: 700px; 
   height: 1px; 
   padding: 0; 
   margin: 0; 
}

div hr { 
   position: absolute; 
   top: -999em; 
   left: -999em; 
}


Désolé pour la longueur du message mais au moins vous avez tout.
Merci par avance pour vos réponses afutées !
Modifié par Dali (08 Mar 2007 - 10:23)
Oh la boulette, je viens de corriger le lien.
Et comme ça, ça fait un p'tit up au passage.
Après moults tentatives, j'ai trouvé une bidouille pour que l'affichage se déconne pas sous Firefox et Opera, il suffit de mettre les <li> dans une div avec un z-index supérieur à celui du texte affiché.

En revanche ça déconne toujours autant sur IE.

Une bonne âme siouplé !
Bon et bien j'ai trouvé la solution, elle était bien caché dans ce forum. c'est en fait que mes li n'avaient pas de layout. j'ai ajouté un height: 0; et tout roule maintenant.

Je vais mettre un résolu.
Sujet clos
Aller à