z-index ou la problématique des float ?

[xpatval]

Bonjour,

Dans cet exemple, vous pouvez constater que la photo grand format passe sous divers éléments, au lieu de les chevaucher. Les différents z-index que j'ai pu placer n'ont pas eu l'effet escompté.

La structure du site est relativement simple, avec, dans un container, une partie gauche en float:left (où se trouve la miniature de la photo), et une partie "centrale" en position relative.

Ci-dessous la portion css de la structure globale:

*,body {
margin: 0;
padding: 0;
}
body {
font: normal 12px Arial, Geneva, sans-serif;
background-color: #e8e8ec;
text-align: center;
height: 100%;
color: #555;
}
/*contanier*/
#container {
top: 0px;
width: 950px;
margin: 0 auto;
text-align: left;
position: relative;
background: #fff url(commun/fd_bg.jpg) top center repeat-y;
}
/*partie centrale*/
#cont_central {
width: 910px;
margin-left:20px;
}
#cont_central_2 {
width: 100%;
overflow: hidden;
}
#cent {
position: relative;
top: 0;
margin-left: 270px;
line-height: 16px;
}
div.fond {
width:593px;
margin:25px 20px 20px 25px;border:none;background:#efefef url(commun/bg_fond.jpg) top right repeat-y;padding-bottom:0;}
/*fin partie centrale*/
/*partie gauche*/
#gau {
float:left;
width: 270px;
border-left:1px solid #666;
background: #fff url(commun/fd_gau.jpg) bottom left no-repeat;
}
div.fond_left {
width:260px;
margin:5px 20px 20px 15px;border:none;background:#efefef url(commun/bg_fond.jpg) top right repeat-y;padding-bottom:0;}
/*fin partie gauche*/

Quelqu'un a-t-il une idée de la faisabilité de la chose ? Où placer les z-index ?

Merci de vos réponses,

xpatval

[jcaron]

Mets ça sur ton image:

position: relative;
z-index: 1000;

Jacques.

[xpatval]

Merci de ta réponse.

C'est tout bon sous FF, Opera, Safari, mais pas IE(8)...!!

Toujours aussi pénible IE ?

D'ailleurs, est-ce la même chose sous IE7 (je ne l'ai plus, peux plus tester avec) ?

Je mets en ligne l'exemple avec les nouveaux styles.

xpatval

[jmi]

J'ai regardé sous IE6, même soucis, j'ai pas le 7.

Avec en prime, le bloc de droite (blabla) qui est positionné plus bas que le bloc de gauche, pas assez de place je suppose...

[xpatval]

J'ai regardé sous IE6, même soucis, j'ai pas le 7.

Avec en prime, le bloc de droite (blabla) qui est positionné plus bas que le bloc de gauche, pas assez de place je suppose...

Pfff...Comme c'est pénible ça ! Je n'ai plus IE6.

Le problème de l'affichage de la grande image provient du float, mal géré par Internet Explorer, quelque soit sa version ?

xpatval

[jmi]

Pfff...Comme c'est pénible ça ! Je n'ai plus IE6.

Le problème de l'affichage de la grande image provient du float, mal géré par Internet Explorer, quelque soit sa version ?

xpatval

Pas certain que le problème vienne du positionnement float de ton div, le plus simple et de supprimer le float et de voir si z-index passe par dessus.

[xpatval]

Pas certain que le problème vienne du positionnement float de ton div, le plus simple et de supprimer le float et de voir si z-index passe par dessus.

Mouais, tu as raison: float ou pas float, l'image reste en dessous, uniquement sous IE.

Ca m'intrigue beaucoup, cette histoire. Deux blocs "indépendants" côte-à-côte, et le flux de l'image est chevauché.

Je cherche, je cherche....

quelques nouveaux tests plus tard...

Euréka ?

Je pensais (à tord ?)(tue ?) que les z-index ne s'associaient qu'avec des pos:relative.

Mais j'en ai collé un sur le :hover du lien de la miniature, pourtant en absolute. IE8 ne dénature plus l'effet.

Pour ceux qui possèdent encore IE6 et 7, pouvez-vous me dire si ça baigne ?

Merci,

xpatval

[jmi]

Ca roule sous IE6, par contre le bloc "blabla" est encore descendu ( reste plus bas que le bloc de gauche )

[xpatval]

Le bloc central devrait être au bon niveau, maintenant...

Merci de vos réponses,

xpatval