28220 sujets

CSS et mise en forme, CSS3

[Résolu] IE n'aime pas les z-index, moi j'aime pas IE !!!

bonjour,

je me prend la tête depuis un bout de temps sur les z-index avec IE ...
tout marche bien sous FF mais comme dab ca merde avec IE ...

ma page test:
http://perso.wanadoo.fr/zazabe/test/

en faite le blem c'est quand on va sur le premier menu "moi", sous IE le texte entouré de rouge est affiché par dessus,
avec FF ca marche nickel ...

j'ai essayé de changer le paramètre position ou de mettre un z-index de 0 pour ce texte et un de 5 pour tout le reste mais rien a faire avec IE ...

si quelqu'un sais comment faire .... ??


ps: c'est pour quand qu'les normes W3C seront respectées pour TOUS les navigateurs ?
Modifié par JahWarrior (23 Nov 2005 - 22:27)
je vois pas de menu non plus avec firefox, mais IE oui : si tu donnes un peu de css on pourra mieux voir de quoi il retourne...
chez moi les menus sont invisible sous firefox 1.5 et sous opera 8.5.
Sous IE, ils apparaissent...
Modifié par hannah (23 Nov 2005 - 09:19)
Bin la jvois pas ...

jai installé firefox 1.5 rs2 et ils sont bien là ...

en attendant si quelqu'un arrive a les avoir sous FF qui me le dise

pour le css voilà:


css commun à IE et FF

h1, h2, h3, h4, h5, h6, p, li, a {font-family:Arial}

h1 {font-size: 28px;}
h2 {font-size: 20px;}
h3 {font-size: 16px;}
h4 {font-size: 12px;}
h5 {font-size: 10px;}
h6 {font-size: 8px;}


#baniere {
	overflow: hidden;
	position:absolute; 
	top:0px; 
	left:0px;
	background: #bbeeff;
	width: 100%;
	height: 145px;
	z-index:0;
	border: solid 1px;
	cursor:w-resize;
}

#menu {
	position:absolute; 
	left:0px;
	top:145px; 
	height:30px;
        width: 100%;
}

#menu_txt1,#menu_txt2,#menu_txt3,#menu_txt4,#menu_txt5 {
	margin: 0px;
	padding:0px;
	overflow: hidden;
	position:absolute; 
	top:0px;
	left:0px;
	width: 20%;
	height:30px;
	color:#6688ff;
	text-align:center;
        z-index:5;
}



div#princ
{
	border: solid 1px red;
	position:absolute;
	top:200px; 
	z-index:0;
}

div#txt {
	position:absolute; 
	top:3px;
	left:0px;
	width: 100%;
}


div#moua  {
	position:absolute; 
	top:30px; 
	left:0px; 
	width: 100%;
	color: #11aa11;z-index:5;
}

div#passion  {
	position:absolute; 
	top:30px; 
	left:0px; 
	width: 100%;
	color: #11aa11;z-index:5;
}

div#pro  {
	position:absolute; 
	top:30px; 
	left:0px; 
	width: 100%;
	color: #11aa11;z-index:5;
}

div#decouverte  {

	position:absolute; 
	top:30px; 
	left:0px; 
	width: 100%;
	color: #11aa11;z-index:5;
}

div#contact  {
	margin: 0px;padding:0px;
	position:absolute; 
	top:30px; 
	left:0px; 
	width: 100%;
	color: #11aa11;z-index:5;
}



div.pos1 {z-index:5;position:absolute;left:0px;top:0px;width: 100%;height:20px;background: #eeffee;}
div.pos1:hover {background: #aaffaa;color:#338833;border-left:solid 20px #338833;cursor:pointer;text-align:left;text-indent:5px;font-style: italic;}

div.pos2 {position:absolute;left:0px;top:20px;width: 100%;height:20px;background: #eeffee;}
div.pos2:hover {background: #aaffaa;color:#338833;border-left:solid 20px #338833;cursor:pointer;text-align:left;text-indent:5px;font-style: italic;}

div.pos3 {position:absolute;left:0px;top:40px;width: 100%;height:20px;background: #eeffee;}
div.pos3:hover {background: #aaffaa;color:#338833;border-left:solid 20px #338833;cursor:pointer;text-align:left;text-indent:5px;font-style: italic;}

div.pos4 {position:absolute;left:0px;top:60px;width: 100%;height:20px;background: #eeffee;}
div.pos4:hover {background: #aaffaa;color:#338833;border-left:solid 20px #338833;cursor:pointer;text-align:left;text-indent:5px;font-style: italic;}

div.pos5 {position:absolute;left:0px;top:80px;width: 100%;height:20px;background: #eeffee;}
div.pos5:hover {background: #aaffaa;color:#338833;border-left:solid 20px #338833;cursor:pointer;text-align:left;text-indent:5px;font-style: italic;}

div.pos6 {position:absolute;left:0px;top:100px;width: 100%;height:20px;background: #eeffee;}
div.pos6:hover {background: #aaffaa;color:#338833;border-left:solid 20px #338833;cursor:pointer;text-align:left;text-indent:5px;font-style: italic;}

div.pos7 {position:absolute;left:0px;top:120px;width: 100%;height:20px;background: #eeffee;}
div.pos7:hover {background: #aaffaa;color:#338833;border-left:solid 20px #338833;cursor:pointer;text-align:left;text-indent:5px;font-style: italic;}


#w3c_valid {
	position:absolute; 
	bottom: 15px;
	right:20px;
}



div#menu h3 {
	display:inline;
}


#txt1, #txt2, #txt3, #txt4, #txt5 {display:inline;}


et le XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Michel</title>
</head>
<body>

	<div id="baniere" onMouseUp="etatoff()" onMouseDown="mem_pos()" onMouseMove="deplace()" onMouseOver="cache_tout()">
		<div id="ciel"></div>
		<div id="bandeau"></div>
		<div id="moi"></div>
	</div>


	<div id="menu">
		<div id="menu_txt1" onMouseOver="affiche_moua()" style="left:0%;">
			<script language="JavaScript"  type="text/javascript"> 
			if (!document.all)		document.write("<img id=\"img_ns1\" src=\"img/bouton.png\" />");
			else 					document.write("<div id=\"img_ie1\" class=\"notover\"></div>");
			</script>
		
			<div id="txt"><h4 id="txt1">Moi</h4></div>
			<div id="moua">
				<div class="pos1"><h3>Avant</h3></div>
				<div class="pos2"><h3>Maintenant</h3></div>
				<div class="pos3"><h3>Après</h3></div>
			</div>
		</div>
		
		<div id="menu_txt2" onMouseOver="affiche_passion()" style="left:20%;">
			<script language="JavaScript"  type="text/javascript"> 
			if (!document.all)		document.write("<img id=\"img_ns2\" src=\"img/bouton.png\" />");
			else 					document.write("<div id=\"img_ie2\" class=\"notover\"></div>");
			</script>
			
			<div id="txt"><h4 id="txt2">Passions</h4></div>
			<div id="passion">
				<div class="pos1"><h3>Reggae</h3></div>
				<div class="pos2"><h3>Dessins</h3></div>
				<div class="pos3"><h3>Voyages</h3></div>
			</div>	
		</div>
		
		<div id="menu_txt3" onMouseOver="affiche_pro()" style="left:40%;">
			<script language="JavaScript"  type="text/javascript"> 
			if (!document.all)		document.write("<img id=\"img_ns3\" src=\"img/bouton.png\" />");
			else 					document.write("<div id=\"img_ie3\" class=\"notover\"></div>");
			</script>
			
			<div id="txt"><h4 id="txt3">Pro</h4></div>
			<div id="pro">
				<div class="pos1"><h3>PhotoZama</h3></div>
				<div class="pos2"><h3>Bibliothèque ATTAC</h3></div>
				<div class="pos3"><h3>Site du Triangle</h3></div>
				<div class="pos4"><h3>Sciopta</h3></div>
				<div class="pos5"><h3>Flash</h3></div>
				<div class="pos6"><h3>Director</h3></div>
				<div class="pos7"><h3>Son</h3></div>
			</div>
		</div>

		<div id="menu_txt4" onMouseOver="affiche_decouverte()" style="left:60%;">
			<script language="JavaScript"  type="text/javascript"> 
			if (!document.all)		document.write("<img id=\"img_ns4\" src=\"img/bouton.png\" />");
			else 					document.write("<div id=\"img_ie4\" class=\"notover\"></div>");
			</script>
			
			<div id="txt"><h4 id="txt4">Découverte</h4></div>
			<div id="decouverte">
				<div class="pos1"><h3>VOZAMA</h3></div>
				<div class="pos2"><h3>ATTAC</h3></div>
			</div>
		</div>
		
		<div id="menu_txt5" onMouseOver="affiche_contact()" style="left:80%;" >
		
			<script language="JavaScript"  type="text/javascript"> 
			if (!document.all)		document.write("<img id=\"img_ns5\" src=\"img/bouton.png\" />");
			else 					document.write("<div id=\"img_ie5\" class=\"notover\"></div>");
			</script>
			
			<div id="txt"><h4 id="txt5">Contacts</h4></div>
			<div id="contact">
				<div class="pos1"><h3>Moi</h3></div>
				<div class="pos2"><h3>Liens</h3></div>
			</div>
		</div>
	</div>	
	
	<div id="princ" onMouseOver="cache_tout()">
	<h4>qsdqsdqsdqsss</h4>
	<h5>
	bsddfb<br/>
	fbdfbd<br/>
	fbdf fvs  sdvs dvsdvs<br/>
	fbdfbd<br/>
	fbdf fvs  sdvs dvsdvs<br/>
	bdfbdfbdfdfb<br/>
	dfb<br/>bsddfb<br/>
	fbdfbd<br/><br/>
	fbdf fvs  sdvs dvsdvs<br/>
	fbdfbd<br/>
	fbdf fvs  sdvs dvsdvs<br/>
	bdfbdfbdfdfb<br/>
	dfb<br/>
	</h5>
	</div>
....
....
	</body>
</html>


Jai mis ce qui faut pour comprendre le problème je pense ...

pour ce qui est du javascript j'ai fait ca pour afficher/déafficher le menu: 


function styleCalque(idCalque){
   if (document.all) calqueStyle = document.all[idCalque].style;
   if (document.layers) calqueStyle = document.layers[idCalque];
   if (document.getElementById) calqueStyle = document.getElementById(idCalque).style;
   return calqueStyle;
}

function affiche_decouverte(){
	styleCalque("decouverte").visibility = "visible";
}

function cache_tout(){
styleCalque("moua").visibility = "hidden";			 
styleCalque("passion").visibility = "hidden";			styleCalque("pro").visibility = "hidden";			
styleCalque("decouverte").visibility = "hidden";	
styleCalque("contact").visibility = "hidden";		
}



et ceux qui arrivent à voir les menus avec IE, le texte est en dessus ou en dessous du premier menu ???

ca fait beaucoup de code quand même, c'est pour ca que j'esitais à tout mettre mais si avec ca quelqu'un peut m'aider ... MERCI !!!
Modifié par JahWarrior (23 Nov 2005 - 17:03)
Bin jme sens con de nouveau ...

il suffit de définir la position de tous les éléments et leurs z-index pour que ca marche

je reflechirais à deux fois la prochaine fois avant de poster ...
Sujet clos
Aller à