[Résolu] Z-index quand tu nous tiens...

Bonjour,

Je débute en développement web et je découvre avec plaisir ce forum.
Je recherche un peu d'aide à propos d'un souci avec des z-index sur IE.

Je souhaite réaliser une sorte de mise en page tabulaire par onglets.
J'ai donc des zones de texte pour chaque onglet ainsi qu'autant de zones de contenu que j'affiche ou masque suivant l'onglet choisi.

Voilà un screen de mon affichage actuel sous FF puis sous IE :


Mon souci se situe à la jointure de mes onglets et de mon contenu.
En effet, je souhaite masquer la bordure supérieure du contenu en superposant la bordure inférieure des onglets.
Comme on peut le voir sur la capture, cela fonctionne sous FF et j'obtiens l'effet escompté.
IE, lui semble ignorer mes z-index et affiche la bordure supérieure du contenu en continu.
Si je remonte la zone de contenu j'observe nettement que c'est elle qui superpose les onglets et non le contraire !!

IE est pourtant censé gérer les z-index alors je ne sais pas trop quoi faire n'ayant aucune expérience en développement web.

Je joins ici mon code HTML:

<div id="infosprojet">
	<div id="onglets">
		<span id="onglet1" class="ongletactif" onClick="switchOnglet(2, 1);">Propriétés</span>
		<span id="onglet2" class="ongletpassif" onClick="switchOnglet(2, 2);">Client</span>
	</div>
	<div id="contenu1" class="contenu"> <!-- Propriétés -->
		<span style="position:relative; left:12%;">Nom : </span>
		<span style="position:relative; left:25%;">Statut : </span>
		<br /><br /><hr /><br />
		(...)
	</div>
	<div id="contenu2" class="contenu" style="display:none;"> <!-- Client -->
		(...)
	</div>
</div>

Mon code CSS:

/* --- Onglets --- */
.ongletactif, .ongletpassif {
	font-family:Arial;
	font-weight:bold; font-size:10pt;
	text-align:center;
	border-width:1px; border-style:solid; 
	width:90px;
	cursor:pointer; cursor:hand;
	padding-top:5px; padding-bottom:2px;
	float: left;
	z-index:2;
}

.ongletactif { 
	color:#CC0000; background-color:#EBF5FA;  
	border-top-color:#000000; border-right-color:#000000; border-left-color:#000000; border-bottom-color:#EBF5FA;
	height:20px;
}

.ongletpassif { 
	color:#4A4A4A; background-color:#EBEBEB;
	border-top-color:#4A4A4A; border-right-color:#4A4A4A; border-left-color:#4A4A4A; border-bottom-color:#000000; 
	height:18px;
	margin-top:2px;
}

.contenu {
	background-color:#F8F8F8;
	padding:10px;
	float:left;
	width:90%;
	margin-top:-1px;
	border-width:1px;
	border-style:solid;
	border-color: #4A4A4A;
	border-color:#000000; 
	z-index:1;
}

Et mon code JS pour naviguer entre les onglets:

/* Switch l'onglet et affiche le div correspondant */
function switchOnglet (nbonglets, ongletactif) {
	if (!document.getElementById) return; // Pour les navigateurs qui ne supportent pas le DHTML
	for(i=1;i<=nbonglets;i++) {
		if (i==ongletactif) {
			document.getElementById("onglet"+i).className = "ongletactif";
			document.getElementById ("contenu"+i).style.display = "";
		}
		else {
			document.getElementById("onglet"+i).className = "ongletpassif";
			document.getElementById ("contenu"+i).style.display = "none";
		}
	}
}

Merci d'avance
Modifié par Cho7 (22 Apr 2005 - 16:05)

salut !

je ne crois pas que je pourrai vraiment trouver une solution à ton problème, mais tu peux toujours jeter un coup d'oeil sur
cette page.

Voici son code HTML pour ses onglets :

<ul id="tabnav">
     <li class="active"><a href="#">Voiture</a></li>
     <li><a href="#">Vélo</a></li>
     <li><a href="#">Avion</a></li>
     <li><a href="#">Bateau</a></li>
     <li><a href="#">Pieds</a></li>
</ul>

et son code CSS :

ul#tabnav {
    font: bold 11px verdana, arial, sans-serif;
    list-style-type: none;
    padding-bottom: 24px;
    border-bottom: 1px solid #6c6;
    margin: 0;
}

ul#tabnav li {
    float: left;
    height: 21px;
    background-color: #cfc;
    margin: 2px 2px 0 2px;
    border: 1px solid #6c6;
}

ul#tabnav li.active {
    border-bottom: 1px solid #fff;
    background-color: #fff;
}

ul#tabnav li.active a {
    color: #000;
}

#tabnav a {
    float: left;
    display: block;
    color: #666;
    text-decoration: none;
    padding: 4px;
}

#tabnav a:hover {
    background: #fff;
}

Peut-être peux-tu t'en inspirer...

Pour les z-index, je sais pas...
Modifié par johanna33 (21 Apr 2005 - 09:22)

Bonjour,

Merci pour ta réponse Johanna.
La solution que tu proposes à travers ce tutorial est intéressante mais elle ne comporte pas tout à fait les mêmes contraintes.

En effet, dans ta solution on change la couleur du border-bottom de sorte qu'elle se fonde avec la couleur de fond de la page.

C'est exactement l'effet visuel que je souhaite réaliser.

Cependant, dans mon cas, l'onglet est lié avec une boîte située en dessous.
Mon fond de page est blanc mais la boîte a, elle, un fond gris.
Je passe donc la bordure inférieure de l'onglet actif en gris mais encore faut-il qu'il superpose la bordure supérieure de la boîte de contenu.

D'où l'utilisation de z-index.
Une solution qui fonctionne très bien sous FF mais pas sous IE...
Modifié par Cho7 (21 Apr 2005 - 10:55)

Effectivement ça n'a pas l'air de marcher pour ton cas.
Pourtant dans le tuto, il y aussi une ligne horizontale qui est donc cachée lorsque l'onglet est actif, mais sans utiliser de z-index...

Quelqu'un d'autre a-t-il une idée?
Les z-index marchent bien sous IE non ?

Je crois que je tiens une piste :

Note: Z-index only works on elements that have been positioned (eg position:absolute;)!
http://www.w3schools.com/css/pr_pos_z-index.asp

En fait, ce n'est pas le z-index qui fait que ça marche dans Firefox, puisque si tu l'enlèves, ça marche quand même.

Alors, je ne sais pas si dans ton cas tu pourras tout passer en position absolue, c'est assez délicat, donc tu devrais peut-être te contenter que ce soit moins sympa dans IE.

Ok...

J'ai essayé mais passer ces champs en absolute est vraiment trop contraignant.

Je vais donc effectivement me résoudre à perdre cet effet visuel pour IE.
Autant perdre un peu en esthétique mais garder le fonctionnel.

En tout cas merci beaucoup pour ton aide, je vais passer le topic en résolu.