28173 sujets

CSS et mise en forme, CSS3

Bonjour, après pas mal de temps perdu a chercher un post traitant de mon cas, je me résouds a en créer un:

Je réalise actuellement un site internet avec une carte de la france interactive, cad que l'on peut cliquer sur différents départements avec des actions différentes.

Pour cela j'ai une série d'images transparentes (une par département) qui se superposent et qui sont associées a des zones réactives enfin bref le problème n'est pas la mais bien dans la superposition de mes images (gif) transparentes.

Avec Firefox tout marche nikel mais sur IE les images se mettent toutes a les unes a la suite des autres et c'est un gros bordel ...

Voila le code HTML :

<body onload="loadDpts()">
    <div id="page">
        <div id="saisieCP"></div>
	<div id="entete">
	    <jsp:include page="../../entete.jsp"/>
	</div>
	<div id="menu">
	    <%@include file="../../menu.jsp" %>
	</div>
	<div id="contenu">
	    Retrouvez nos partenaires dans chaque département :<br/><br/>
            <div id="carte">
	        <img id="carteFrance" src="image/carteFrance/carteFrance.gif" />
	    </div>
	</div>
    </div>
</body>


Ma fonction javascript loadDpts() a une boucle jsp (i incrémenté a chaque fois), a chaque passage je fais :

var img<%=i%> = document.createElement("img");
img<%=i%>.setAttribute("id","img<%=listeDepartements.get(i)%>");
img<%=i%>.setAttribute("src","image/carteFrance/<%=listeDepartements.get(i)%>.gif");
img<%=i%>.setAttribute("style","position:absolute; top:0px; left:0px");
document.getElementById("carte").appendChild(img<%=i%>);


Et pour finir mon CSS associé :

#carte {
	position:relative;
	width:743px;  <-- largeur de mon image
	margin:auto;
}

#carteFrance {
	position:relative;
	border:none;
}


Si quelqu'un pouvait éclairer ma lanterne je lui en serais reconnaissant
merci
Modifié par nash0320 (11 Apr 2007 - 11:19)
problème résolu : ie ne voullait pas de mes monElement.setAttribute()

j'alucine comment c'est du caca en boite ie ... Smiley biggol