18081 sujets

Questions générales et questions de débutants

[Résolu][CSS] Positionnement flottant sans float parce que IE...

Salut,

Je viens de poser cette question sur developpez.net et on me redirige ici. Alors je m'adresse aux stars des CSS qui seraient dans le coin. Smiley cligne

IE ne comprenant rien au positionnement absolu lorsqu'il est appliqué à des div enfants d'un parent flottant, est-il possible de simuler un positionnement flottant (des div les unes à côté des autres) avec l'attribut position en relative ?
Modifié par Huntress (28 Jul 2005 - 19:52)
Bonjour Huntress

Huntress a écrit :

IE ne comprenant rien au positionnement absolu lorsqu'il est appliqué à des div enfants d'un parent flottant


Disons que c'est une vision expressive, mais peut-être un peu expéditive des choses Smiley lol

Aurais-tu un bout de code (une url, en fait), pour que l'on puisse déjà se faire une idée de ce que tu cherches à réaliser ?
http://location.arromanches.free.fr/float.jpg
http://location.arromanches.free.fr/relative.jpg

voilà,

Maintenant je t'explique avec des mots, je vais essayer d'être le plus claire possible. J'ai 2 div. Une avec une carte de France en float: left; et une autre avec la liste des régions également en float: left.
Ensuite sur la carte de France des div apparaissent suite à des évennements. Elles sont en positionnement absolu. Ca marche sous FF, il met bien les p'tites div sur la carte. Par contre avec IE... il trouve le moyen de me remettre ces petites div (qui sont en position: absolu, rappelons-le) dans le flux. C'est pour ça qu'elles apparaissent complètement à droite sur la capture float.jpg.


C'est grave docteur ? Smiley ohwell

Je pourrais me débrouiller avec un tableau mais n'y a-t-il pas un moyen de remédier à ce problème ?
Huntress a écrit :
n'y a-t-il pas un moyen de remédier à ce problème ?


Oui. Sans doute.

Mais je ne vois pas ce qu'on peut faire pour t'aider dans le vide avec deux copies d'écran Smiley cligne

S'il y a une erreur à rectifier, ou un contournement de bug à ajouter dans ton code... encore nous faudrait-il celui-ci Smiley rolleyes
Tu veux du code ? Ben tu vas en avoir Smiley langue

Ces div portent bien leur nom :

div #carte {
	float: left;
	width: 400px;
	height: 500px;
	border: 1px solid #EEE;
}

div#liste {
	float: left;
	margin-left: 40px;
	width: 400px;
	height: 550px;
	border: 1px solid #EEE;
}


L'une des p'tites div qui met un dessin sur la carte :

div#r_1_flag {
	position: absolute;
	top: 93px;
	left: 202px;
	width: 20px;
	height: 27px;
	border: 0px solid #F00;
}
div>#r_1_flag {
	left: 212px;
}


Et puis pour la structure du XHTML ça donne ça :


<div id="carte">
      <div id="r_1_flag">...</div>
</div>

<div id="liste">
      ...
</div>
Huntress a écrit :
Tu veux du code ? Ben tu vas en avoir Smiley langue


Oui. ça permet de constater les erreurs. Par exemple, celle-ci : un élément en position absolu se placera par défaut par rapport au conteneur initial (la fenêtre du navigateur, si tu préfère).

Pour que ton #r_1_flag se place par rapport à #carte, et non par rapport au conteneur initial, il faut que #carte soit doté d'une position:relative (sans aucun top, left, right ou bottom. Juste cette propriété en plus du float).

Tu vois : ça va beaucoup mieux, avec le code sous les yeux. Donc, s'il y a encore d'autres problèmes, donne tout le code (ou mieux, mets-le en ligne et donne une url) Smiley cligne
Bah oui mais non Smiley decu

On va reprendre dans l'ordre.

Ce que j'ai marche sous FF, qui suit relativement bien les standards.
ET ça marche pas sous IE, qui se fout bien des standards.

Moi il faut qu'au final ma carte soit à la gauche de ma liste. Donc il faut bien que je mette ces 2 div en float: left;

Ensuite il y a les petites div qui sont contenues dans #carte. Donc si je les mets en absolute, elles prendront comme référence #carte. Et je crois pas me tromper en disant ça puisque que sous FF l'affichage est bien.

Donc comment faire pour que IE affiche les petites div dans #carte, et non à la suite de #liste comme si elle était en float à l'extérieur de #carte Smiley confus
On reprends calmement :

Selon les standards, un élément en position absolu ne peut se placer relativement à son élément conteneur que si celui-ci est en position relative.

Selon les standards, un élément peut très bien être à la fois en position relative et en flottant :

div #carte {
[b]float: left;
position: relative;[/b]
width: 400px;
height: 500px;
border: 1px solid #EEE;
}


Je sais bien que FF a ses petites particularités. Qu'IE en a encore plus. Mais tous les deux vont gentiment faire ce qu'on leur dit, en suivant les standards Smiley cligne
Modifié par Laurent Denis (27 Jul 2005 - 18:50)
Marvellous Smiley biggrin

Merci beaucoup, je crois que je reviendrais, le coup du position: relative + float: left; ça m'a mis sur le u Smiley lol
Sujet clos
Aller à