28172 sujets

CSS et mise en forme, CSS3

Problème positionnement absolu [Résolu]

Bonjour,

j'ai une différence de positionnement entre ie6 et firefox 3.

Voici le code complet :



	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title>titre</title>
	</head>
	<body>
	

	<div style="margin-top:0;background-color:gray;border:30px solid green;">
				<div style="position:relative;border:5px solid red;">
					<div style="background:white;">
						<label>dans le flux</label>	
					</div>
					<div style="position:absolute; bottom:0; border: 5px solid blue;left:200px;">
						 <label>en absolu</label>
					</div>
				</div>
		</div>
	</body>
</html>


Voici les impressions d'écran.

Sur ie6
upload/8671-ms-ie6.JPG

Sur firefox

upload/8671-firefox.jpg

Comme on le voit sur firefox le contenu absolu vient se positionner, comme attentud sur le bas du div de bord rouge positionné en relatif et qui le contient. Mais pas sur ie6 où il se positionne par rapport à la boite de bord vert.

Ce problème est-il connu, comment peut-on le contourner ?

Merci pour tous vos commentaires.
Modifié par jreeman (30 Oct 2009 - 14:20)
Salut,


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
        <title>titre</title> 
    </head> 
    <body> 
     
 
    		<div style="margin-top:0;background-color:gray;border:30px solid green;"> 
    
                <div style="position:relative;border:5px solid red;"> 
                                
                	<div style="position:absolute; border: 5px solid blue;left:200px;"> 
                         <label>en absolu</label> 
                    </div>
                    
                    <div style="background:white;"> 
                        <label>dans le flux</label> 
                    </div>
                    
                </div> 
                
        </div> 
        
    </body> 
</html>


ça te convient?

Ps: sur ie6, la notion de flux est très importante
Modifié par lucas07000 (26 Oct 2009 - 17:58)
tu as enlevé le bottom:0 et du coup le contenu et positionné en haut (comportement par défaut) au lieu d'être en bas.

Je commence à me dire que si le problème n'est pas connu, c'est que quelque part, peut être je ne fais pas comme il faudrait faire.
Du coup voici ce que j'essaie de faire :


j'ai entouré la partie que j'ai conçu en absolute et que je voudrais coller (sous ie6 car sous firefox c'est bon) au bas du bloc entouré en vert.

upload/8671-struct-page.JPG

C'est la seule solution que j'ai trouvé, n'est ce pas comme cela qu'il faut faire ?

A noter qu'en mettant height:0 sur le bloc en absolute, alors ca marche correctement mais c'est vraiment de la bidouille, je serais étonné que ce soit la solution.

Merci d'avance de vos retours.
Modifié par jreeman (06 Nov 2009 - 17:14)
Bonjour,

IE 6 et 7 ont un peu de mal avec le positionnement absolu par rapport à un ancêtre positionné quand cet ancêtre n'a pas le layout. Il faut donc s'arranger pour que l'élément qui te sert de référent et que tu positionnes en relatif ait hasLayout=1.

Le HasLayout, ça se passe par là:
http://www.alsacreations.com/article/lire/76-haslayout-internet-explorer.html

Sur le fond, je ne suis pas sûr que le positionnement absolu soit ce qu'il y a de plus adapté ici. Le schéma donné est trop grossier pour qu'on puisse donner un avis là-dessus (les mots «texte» éparpillés sur le schéma, notamment, c'est une indication trop peu précise sur le design souhaité...). Mais tu devrais pouvoir utiliser le positionnement flottant. À voir...
Merci pour ta réponse, c'est vraiment le problème que je rencontre, mon élément parent n'a pas de layout apparemment, je vais appliquer le hack pour ie6 et 7, je comprends maintenant pourquoi mettre une hauteur même à 0px corrige le problème.


Désolé pour le schéma, j'en ai refait plus explicite pour que tu puisses mieux voir le design :

upload/8671-struct-c.gif

Je pourrais peut-être le faire en flottant avec des breakers mais comme j'ai ce même pattern sur deux colonnes, j'ai peur que les éléments flottants interfèrent entre eux.
Modifié par jreeman (26 Oct 2009 - 22:46)
Sujet clos
Aller à