28220 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement absolu surréaliste

Bonjour à tous,

Je me casse la tête depuis hier avec le positionnement absolu de deux blocs, alors je lance un appel à l'aide.

Sous Firefox et Opéra (Windows), ça fonctionne comme je le veux :

http://www.petzl.com/petzl/frontoffice/Sport/static/test/FF.gif

En revanche, IE n'aime pas le fait que le conteneur soit en position relative :

http://www.petzl.com/petzl/frontoffice/Sport/static/test/IE.gif

Je dois pourtant conserver cette position relative, car le conteneur sera ensuite inclu au milieu d'une autre page html.

Je vous donne mon code HTML :

<div id="conteneur"> 
  <p class="marge"><strong>paragraphe en position relative 1</strong> blablabla blablabla b<br /> 
    lablabla blablab<br /> 
    la blablabla blablabla</p> 
  <p class="marge"><strong>paragraphe en position relative 2</strong> blablabla blablabla bl<br /> 
    ablabla blablabla blablabla blablabla</p> 
  <p id="bloc1">Bloc en position absolue n&deg;1 </p> 
  <p class="marge"><strong>paragraphe en position relative 3</strong> blablabla blablabla<br /> 
    blablabla blablabla blablabla<br /> 
    blablabla blablabla blab</p> 
  <p class="marge"><strong>paragraphe en position relative 4</strong> blablabla blablabla blabla<br /> 
    bla blablabla blablabla blablabla blablabla blablabla <br /> 
    blablabla blablabla blablabla</p> 
  <p id="bloc2">Bloc en position absolue n&deg;2</p> 
</div>


et mon code CSS :

#conteneur {
	background: #FFFF66;
	position: relative;
}

#bloc1, #bloc2 {
	position: absolute;
	top: 10px;
	width: 100px;
	height: 100px;
}

#bloc1 {
	background: #00FF00;
	left: 20px;
}

#bloc2 {
	background-color: #FF9900;
	left: 150px;
}

.marge {
	background: #FF00FF;
	position: relative;
	margin: 0 0 0 270px;
}


J'a pourtant déjà utilisé la même méthode pour réaliser des choses similaires, et ça fonctionnait. Je ne comprends absolument pas d'où vient le problème. J'ai même relu entièrement l'explication d'Openweb sur le positionnement absolu (http://openweb.eu.org/articles/initiation_absolue/). A l'aide ! Smiley confus
Modifié par Boris (26 Aug 2005 - 13:49)
Bonjour,

Le haslayout d'IE Windows frappe encore et toujours...

Concrètement, ton conteneur en position relative doit, pour jouer son rôle dans IE Win, être doté dans ce navigateur d'une qualité très particulière : le layout. Celui-ci lui sera conféré par l'intermédiaire de l'une ou l'autre des propriétés suivantes, qui ne sont évidemment pas toujours compatibles avec le design recherché :
- position: absolute
- float: left ou right
- display: inline-block
- width: n'importe quelle valeur (en commentaires conditionnels pour le résevrer à IE)
- height: n'importe quelle valeur (classiquement, un height 1% idem)
- zoom: n'importe quelle valeur (extension CSS Microsoft invalide à placer dans une CSS en commentaires conditionnels, sans effet par ailleurs dans IE5.0)

En outre, le calcul de marges en % d'une élément positionné ferait intervenir encore un autre comportement particulier d'IE Win (heureuseument, ce n'est pas le cas ici).

En fait, il s'agit de faire coIncider auatnt que possible:
- l'élément ascendant en position relative,
- l'élément ascendant doté de layout
- l'élément ascendant dimensionné (si des % interviennent)

Si tu regardes tes précédentes feuilles de style où tu ne rencontrais pas ce problème, tu constateras (espérons-le) que tu avais, sans le savoir, doté ton conteneur de layout par le biais d'une de ces propriétés. Si ce n'était pas le cas, n'oublie surtout pas de le signaler ici avec tous les détails : il serait intéressant de découvrir d'autres propriétés ayant cette capacité Smiley cligne
Modifié par Un vacancier (26 Aug 2005 - 12:43)
Effectivement, si je reprends le dernier exemple en date, j'avais donné une largeur et une hauteur au conteneur.

Du coup, dans le cas qui nous occupe, j'ai mis un float: left qui n'a aucun impact dans la page qui recevra mon conteneur.

Et mon problème est réglé ! Woaw, ça fait bizarre : je me suis cassé la tête pendant deux demi-journées, à réécrire les styles élément par élément pour essayer de localiser le problème.
Et puis je pose la question sur le forum à midi, et en rentrant de déjeuner j'ai la solution... Smiley biggol

Je fais systématiquement des recherches dans les tutoriels d'Openweb et consorts, mais j'avoue que je n'ai pas l'habitude de chercher du côté des bugs d'implémentation dans les navigateurs.
Si vous avez des ressources à me donner, je suis preneur. Smiley smile

Mille mercis pour cette réponse claire et détaillée, vacancier.
Bob
Sujet clos
Aller à