18041 sujets

Questions générales et questions de débutants

[Résolu] Div qui se superpose mal sous ie9 problème de z-index ?

Bonjour,

Suite à un problème que je n'arrive pas à résoudre je viens vers vous comme dit ma grand mère 2 cerveaux valent mieux qu'un ! ^^

Je vous expose mon problème donc :

Je désire réaliser une map avec des secteurs cliquable qui affiche les adresses

j'ai pour cela 3 div les un au dessus des autres jusque la pas de problème

dans mon premier div j'ai le dessins de la map avec les point des villes ou nous somme implanter, c'est une image en background du div.
dans mon second div rien je m'en sert pour afficher avec du JS les adresses sous forme d'image écris dans le div à la volée.
dans mon 3 eme div j'ai x div qui représente des zone cliquables avec des onclick sur chaque.

pour les z-index le div 1 et en dessous des autre et le div 2 en dessous du 3

je ne sait pas si je m'explique bien mais une demo sera plus parlante à mon avis

lien vers demo : http://www.djineo.net/Adaming/testCarte.php

Voila sous FF ou Chrome tout fonctionne comme je le désire mais sous IE 9 pas possible !

Après le premier clic je me retrouve dans l’impossibilité de faire un autre clic sur une autre zone

voici mon code pour plus de clarté

pour le html

<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Groupe Adaming</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="css/teststyle.css" />
	<script language="javascript" type="text/javascript" src="js/teststyle.js"></script>	
	<script language="javascript" type="text/javascript" src="js/prototype.js"></script>

</head>
<body>
	
<div id="contentBox">
	<div id="bgPageContact">

	</div>
	<div id="bgPageContact2">

	</div>	
	<div id="bgPageContact3">
		<div id="boxZoneParis" onclick="AfficheContactZone('1');"></div>
		<div id="boxZoneLille" onclick="AfficheContactZone('2');"></div>
		<div id="boxZoneNantes" onclick="AfficheContactZone('3');"></div>
		<div id="boxZoneLyon" onclick="AfficheContactZone('4');"></div>
		<div id="boxZoneStrasbourg" onclick="AfficheContactZone('5');"></div>
		<div id="boxZoneBordeaux" onclick="AfficheContactZone('6');"></div>
		<div id="boxZoneAlger" onclick="AfficheContactZone('7');"></div>
		<div id="boxZoneTunis" onclick="AfficheContactZone('8');"></div>
		<div id="boxZoneCasablanca" onclick="AfficheContactZone('9');"></div>
		<div id="boxZoneContact01" onclick="AfficheContact();"></div>
		<div id="boxZoneContact02" onclick="AfficheContact();"></div>
		<div id="boxZoneContact03" onclick="AfficheContact();"></div>
		<div id="boxZonePlan01" onclick="AffichePlan();"></div>
		<div id="boxZonePlan02" onclick="AffichePlan();"></div>
		<div id="boxZonePlan03" onclick="AffichePlan();"></div>	
	</div>	
</div>



pour le css 


/*RESET DES CSS */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    border: 0 none;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0 none;
    padding: 0;
    text-align: left;
    vertical-align: baseline;
    color: #5C6266;
}
body {
    line-height: 1;
}
/*HTML 5*/
header, section, footer, aside, nav, article, figure {display: block; margin:0;}

/*Mise En Page*/
html {

    color: #333333;
    font-size: 16px;
    background-image: url('../images/bg.png');
	background-repeat: repeat-x;  
	background-color: #dfdfdf;
}
body {

    display: table;
    font-family: Arial;
    font-size: 100%;
    text-align: center;
    width: 100%;
}

#contentBox{
	position:absolute;
	top:30px;
	height:800px; 
	width: 100%; 
	margin: 0 auto; 
	z-index:1;
	text-align: right;
}

#bgPageContact3 {
	position:absolute;
	top:210px;
	left:350px;
	height:590px; 
	width: 900px;
	z-index:100;
}
#bgPageContact {
	position:absolute;
	top:210px;
	left:350px;
	height:590px; 
	width: 900px;
	z-index:11;
	background-image: url('../images/carte.png');
	background-repeat: no-repeat;	
	background-position:center bottom;	
}
#bgPageContact2 {
	position:absolute;
	top:210px;
	left:350px;
	height:520px; 
	width: 900px;
	z-index:12;
	text-align:center;
	padding-top: 70px;
}

/* Zone de contact */

#boxZoneParis {

	position: absolute;
	width:30px;
	height:30px;
	top:170px;
	left:420px;
	cursor: pointer;
	z-index:120;
}
#boxZoneNantes {

	position: absolute;
	width:30px;
	height:30px;
	top:200px;
	left:310px;
	cursor: pointer;
	z-index:120;
}
#boxZoneBordeaux {

	position: absolute;
	width:30px;
	height:30px;
	top:285px;
	left:335px;
	cursor: pointer;
	z-index:120;
}
#boxZoneLille {

	position: absolute;
	width:30px;
	height:30px;
	top:105px;
	left:435px;
	cursor: pointer;
	z-index:120;
}
#boxZoneStrasbourg {

	position: absolute;
	width:30px;
	height:30px;
	top:185px;
	left:540px;
	cursor: pointer;
	z-index:120;
}
#boxZoneLyon {

	position: absolute;
	width:30px;
	height:30px;
	top:270px;
	left:480px;
	cursor: pointer;
	z-index:120;
}
#boxZoneTunis {

	position: absolute;
	width:30px;
	height:30px;
	top:510px;
	left:605px;
	cursor: pointer;
	z-index:120;
}
#boxZoneAlger {

	position: absolute;
	width:30px;
	height:30px;
	top:510px;
	left:435px;
	cursor: pointer;
	z-index:120;
}
#boxZoneCasablanca {

	position: absolute;
	width:30px;
	height:30px;
	top:550px;
	left:195px;
	cursor: pointer;
	z-index:120;
}



et pour finir le js 



////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////Affichage divers
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function writeDiv(boite, texte)
{
	$(boite).innerHTML = texte;
}
function effaceDiv(boite)
{
	$(boite).innerHTML ="";
}
function closeBox(boite)
{
	Element.hide(boite);
}
function afficheBox(boite)
{
	Element.show(boite);
}
////////////////////////////////////////////////////////////////////////////////////////////////////
function AfficheContactZone(zone)
{
	if ( zone == 1){
		var contentContact = "<img src=\"images/Contact/paris.png\" style=\"border:0px solid;\">";
	}
	else if ( zone == 2){
		var contentContact = "<img src=\"images/Contact/lille.png\" style=\"border:0px solid;\">";		
	}
	else if ( zone == 3){
		var contentContact = "<img src=\"images/Contact/nantes.png\" style=\"border:0px solid;\">";		
	}	
	else if ( zone == 4){
		var contentContact = "<img src=\"images/Contact/lyon.png\" style=\"border:0px solid;\">";		
	}	
	else if ( zone == 5){
		var contentContact = "<img src=\"images/Contact/strasbourg.png\" style=\"border:0px solid;\">";		
	}	
	else if ( zone == 6){
		var contentContact = "<img src=\"images/Contact/bordeaux.png\" style=\"border:0px solid;\">";		
	}	
	else if ( zone == 7){
		var contentContact = "<img src=\"images/Contact/alger.png\" style=\"border:0px solid;\">";		
	}
	else if ( zone == 8){
		var contentContact = "<img src=\"images/Contact/tunis.png\" style=\"border:0px solid;\">";		
	}	
	else if ( zone == 9){
		var contentContact = "<img src=\"images/Contact/casablanca.png\" style=\"border:0px solid;\">";		
	}	
		
	writeDiv('bgPageContact2', contentContact);
	
}



Voila j’espère que quelque bonne âmes pourront me sortir de ce casse tête car j'ai fait le tour de la question et je comprend vraiment pas d’où cela peu venir

merci d'avance pour vos réponses !

Bien à vous
Personne ?

Vais tout de même pas être obliger de faire ça en flash Smiley decu

Bon je continue mes recherches.
Bon apparemment j'ai résolu mon problème et donc pour ceux qui serai intéresser c'est juste parce que mes div qui sont avec onclick son vide que IE les affiche à 0px après le premier clic !

J'ai donc du mettre en place des images png transparent dans ces div pour résoudre ce problème !

certainement pas la meilleur des solution mais ça fonctionne c'est le principal !

Merci à tous même si personne na su ou pus me répondre

Bon dev à tous
Sujet clos
Aller à