28172 sujets

CSS et mise en forme, CSS3

Ie6 et ie7 : pb de div superposés

Bonjour,

Voilà j'ai un soucis, qui va sembler bien commun à certains.

J'ai une image dans un div, et par dessus cette image, un autre div avec du texte.

le rendu est nikel sous firefox, et ie8.
par contre, sous ie6 et ie7, mon div de texte a disparu !

si j'enlève le "position=absolute" du texte, le div du texte se place alors au dessus de l'image sous ie 6 / 7 / 8 et firefox.

y-a-t-il une solution à ce pb ?
j'ai essayé avec "zoom:1" et rien à faire.

dois-je en conclure que ce n'est pas le fait de ne pas avoir de layout, mais le fait d'en avoir un justement ?

dans ce cas, comment exclure cet élément du layout ?
Hello,

Peux-tu nous montrer ton code ?

Sinon tu ne peux pas mettre ton image en background et écrire ton text dans la div ?
désolé, je travaille en local pour le moment, et ça serait un peu le bazare de tout mettre en ligne.

en fait c assez complexe dans le sens ou c'est un slider d'image comme vu ici :
http://www.fuseboxtheatre.com

sauf que j'ai voulu faire plus compliqué : une grosse image avec le texte DESSUS.

je pense que j'ai trouvé une solution, ça semble marcher :

j'ai mis un "position:absolute" pour le conteneur - qui n'avait rien - (div de l'image ) et un "position:relative" pour le div du texte qui est dessus.
( c'était un "position:absolute" avant ).

je pense que du coup, le "position:absolute" FORCE le div du texte à rester dans celui de l'image, car le "position:relative" est par rapport à l'image.
( si j'ai tout bien compris !)

voici donc les styles du conteneur (image ) et du texte dessus :


#featured_media{
z-index: 10;
width: 640px;
height: 270px;
position: absolute;
}

#featured_text{
z-index: 9999;
position: relative;
float: right;
width: 515px;
height: 96px;
padding: 0;
margin-top: 150px;
background: url('img/bgnews.png') no-repeat top left;
}

j'ai du aligner le texte à droite.... car à gauche, le premier texte de la première image se décale AVANT l'image... bizarre ( bug ie6 ? )
en mettant un float right, tout est ok.
je vais juste rajouter un margin pour décalé mon texte à gauche et ainsi "truander" ie
Alors si j'ai bien compris le premier message, tu as une div avec :
- ton image
- ta div contenant le texte

C'est ça ?

Si c'est ça, il faut que ta div contenant ton image soit en position relative et que t'as div contenant le texte soit en position absolute et que tes 2 div soient de la même taille.
Et il faut aussi mettre un float:left sur ton image.

Ca doit donner ça en gros :


<div id="featured_media">
<img src="ton chemin"alt="on rempli le alt" />
<div id="featured_text">
Ton texte blablabla...
</div>
</div>


Et pour ie6 t'es obligé de mettre une marge négative avec if ie.
Modifié par pfoofen (16 Aug 2009 - 12:47)
Sujet clos
Aller à