28173 sujets

CSS et mise en forme, CSS3

Marge négative et z-index

Bonjour à tous, un petit problème visible ici :

http://foutoir.info/test_chevauchement

C'est dans le cadre d'une mise en pages en colonnes. Je voudrais que le bloc du bandeau "en lumière" passe au-dessus du bloc de contenu et cache le filet. J'ai donc utilisé une marge négative de 10px pour le bloc de contenu (placé, dans le flux, juste après le bloc du bandeau) et j'ai attribué au bloc du bandeau un z-index de 2 pour qu'il s'affiche au-dessus. Mais ça ne marche pas...

Si j'inverse les blocs dans le flux et attribue une marge négative au bloc du bandeau, ça fonctionne, mais je dois décaler le contenu texte du bloc vers le bas et cela me pose des tas de problèmes pour la suite de la mise en page avec IE.

Quelqu'un aurait une indication pour faire cela simplement ?

Merci.
F.

Je viens de m'apercevoir que le texte est bien au-dessus du filet mais pas le background. Ce n'est rien de dire que je suis perplexe ... ;o)
Modifié par ouranos2 (06 Jan 2007 - 19:05)
Salut,
Le z-index ne fonctionne que si le div a un positionnement absolute (rectifiez moi si je me trompe) donc met un positionement au div bandeau_en_lumiere
et un positionement + z-index au div enlumiere
Donc, comme j'essaie justement d'abandonner le positionnement absolu pour un problème d'ajustement de la hauteur de mon conteneur à mes blocs à contenu dynamique, me voici au point de départ ...

Merci à toi.
Sais-tu si mon conteneur s'adaptera à la hauteur de mes colonnes si j'ai des blocs en "relative" ? A vrai dire, il faudra que j'aille relire le comportement d'un élément en position relative ... ;o)
Merci.
Bonsoir,
Le z-index ne s'applique qu'aux éléments positionnés
(absolute, fixed ou relatif)
Pourquoi tu n'imbriques pas ton div "en lumière" à l'intèrieur
de l'autre? ça me semble plus logique:
<div id="enlumiere">
<div id="bandeau_en_lumiere">En lumiere</div>
Problème de z-index pour le filet Problème de z-index pour le filet Problème de 
z-index pour le filet Problème de z-index pour le filet</div>

Modifié par Hermann (07 Jan 2007 - 18:21)
ouranos2 a écrit :
Tu veux dire avec une marge négative pour que le bandeau chevauche le filet du bloc de contenu ?


Non mais c'est quand même important si jamais tu ois deplacer ton block:
l'autre doit suivre.
Supprimer la bordure du haut peut se faire tres simplement en CSS
(border-top:none)
Ah mais justement, je ne peux pas supprimer toute la bordure supèrieure, c'est un chevauchement d'un bloc sur le bord supérieur d'un autre bloc ... Quant au déplacement des blocs, c'était encore plus simple en utilisant le positionnement absolu ... Mais justement, je tente de voir si le passage ... euh ... éthique ... ;o) à la mise en page fluide, ne génère pas trop de lourdeur de manipulations en cas de modifs répétées ... D'ailleurs fluidité, dans mon cas, prête un peu à sourire, puisque je ne veux pas modifier la largeur de mes colonnes en fonction de l'affichage, pour des raisons de lisibilité. C'est essentiellement pour une raison d'englobement de mes éléments dynamiques dans un conteneur que j'ai abandonné le positionnement absolu.
Quoiqu'il en soit, merci du coup de main ... Pour le moment j'en reste à la solution donnée par Ghost de déclarer le bloc en relatif.

F

F.
Sujet clos
Aller à