Float : comportement inattendu sous FF [Résolu]

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Float : comportement inattendu sous FF [Résolu]

afbilou

pouet your life

Les floats que j'ai mis dans cette page http://afbilou.free.fr/tmp/float.html ne se positionnent pas comme je m'y attendais. C'est sous firefox (1.04) que j'ai un probleme ... sous IE tout s'affiche comme je le veux. Ce que je veux est simple : 2 colonnes dans lesquelles les elements se suivent verticalement

Sous IE :

Sous FF :

Le code :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Un titre</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css">
body * {
border: 1px solid black;
text-align: center;
background-color: #beb;
}
body {
width: 614px;
margin: 0 auto;
}
div.g {
float: left;
clear: left;
width: 300px;
margin-bottom: 10px;
}
div.d {
float: right;
clear: right;
width: 300px;
margin-bottom: 10px;
}
div#footer {
clear: both;
}
</style>
</head>
<body>
<h1>Bug de positionnement de FF ???</h1>
<div class="g" style="height:100px;">1er dans le flux<br />float/clear: left;</div>
<div class="d" style="height:050px;">2e dans le flux<br />float/clear: right;</div>
<div class="g" style="height:150px;">3e dans le flux<br />float/clear: left;</div>
<div class="d" style="height:050px;">4e dans le flux<br />float/clear: right;</div>
<div class="g" style="height:060px;">5e dans le flux<br />float/clear: left;</div>
<div class="d" style="height:050px;">6e dans le flux<br />float/clear: right;</div>
<div id="footer">7e dans le flux<br />clear: both;</div>
</body>
</html>

Alors je saurais tres bien trouver une solution pour obtenir l'affichage que je veux mais je voudrais savoir si c'est moi qui ait mal compris un truc sur les floats ou si c'est FF qui a un soucis pour ce cas particulier.

Merci

Message édité par afbilou le 07-07-2005 à 11:17:42

Publicité

plainsofpain

Pingouino's lover

C'est quoi tous ces clear ?

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

afbilou

pouet your life

plainsofpain a écrit :

C'est quoi tous ces clear ?

Developpe voir ...

plainsofpain

Pingouino's lover

je me demande juste ce qu'ils apportent, vu que je ne m'en sers pas souvent ...

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

afbilou

pouet your life

Ben c pour disposer les elements en float right les uns en dessous des autres ... et pareil pour left

plainsofpain

Pingouino's lover

Oh yes, j'avais mal lu la css

Je suis super crevé, je vais me coucher je crois, demain je pourrais aider ...

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

gatsusat

le clear c'est pour casser le positionnement float sur l'élément qui l'utilise

admettons 5 images en block et float:left

et si on met un paragraphe P juste après il sera aussi touché par le float:left.

donc à P on lui met un clear:left pour qu'il pase à la ligne

plainsofpain

Pingouino's lover

okay okay. Je le savais pas, mais je suis trop fatigué pour retenir ca maintenant, je repasserai demain donc ...

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

fafane84

Salut à tous :hello:

je ne suis pas un "pro" du CSS, mais voilà comment je ferais :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>
Un titre
</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css">
body * {
border: 1px solid black;
text-align: center;
background-color: #beb;
}
body {
/*width: 614px;*/
width: auto;
margin: 0 auto;
}
div.g, div.d {
background-color:
white; border:none;
}
div.g div, div.d div {
margin-bottom: 10px;
}
div.g {
float: left;
clear: left;
width: 300px;
margin-bottom: 10px;
}
div.d {
float: right;
clear: right;
width: 300px;
/*margin-bottom: 10px;*/
}
div#footer {
clear: both;
}
</style>
</head>
<body>
<h1>Bug de positionnement de FF ???</h1>
<div class="g" >
<div style="height:100px;">
1er dans le flux
<br />
float/clear: left;
</div>
<div style="height:150px;">
3e dans le flux
<br />
float/clear: left;
</div>
<div style="height:060px;">
5e dans le flux
<br />
float/clear: left;
</div>
</div>
<div class="d">
<div style="height:050px;">
2e dans le flux
<br />
float/clear: right;
</div>
<div style="height:050px;">
4e dans le flux
<br />
float/clear: right;
</div>
<div style="height:050px;">
6e dans le flux
<br />
float/clear: right;
</div>
</div>
<div id="footer">
7e dans le flux
<br />
clear: both;
</div>
</body>
</html>

[:fafane84]

Message édité par fafane84 le 05-07-2005 à 12:15:52

---------------
Mon Topic de Vente Hardware

afbilou

pouet your life

Bon et bien le comportement de FF est tout a fait normal.
Quelqu'un a eut la bonne idée de me rappeller les regles de positionnement des boites flottantes !

Citation :

Voici les règles précises qui gouvernent le comportement des flottants :
1. Le bord externe gauche d'une boîte flottant à gauche ne peut pas se trouver au-delà du bord gauche de bloc conteneur. Pour des boîtes flottant à droite, les règles sont les mêmes, mais inversées ;
2. Pour une boîte donnée flottant à gauche, celle ci suivant dans la source un élément ayant déjà généré une autre boîte flottant à gauche, le bord externe gauche de cette boîte doit venir à droite du bord externe droit de la boîte précédente, ou, sinon, son sommet doit venir en dessous du bas de la boîte précédente. Inversement et de la même façon pour des boîtes flottant à droite ;
3. Le bord externe droit d'une boîte flottant à gauche ne peut pas être placé à la droite d'un bord externe gauche d'une quelconque boîte flottant à sa droite. Pour des boîtes flottant à droite, les règles sont les mêmes, mais inversées ;
4. Le sommet externe d'une boîte flottante ne peut pas se trouver au-dessus de celui de son bloc conteneur ;
5. Le sommet externe d'une boîte flottante ne peut pas se trouver au-dessus d'une boîte de bloc ou flottante, générée par un élément précédent dans le document source ;
6. Le sommet externe d'une boîte flottante ne peut pas se trouver au-dessus du sommet d'une boîte de ligne qui contient une boîte générée par un élément survenu plus tôt dans le document source ;
7. Une boîte flottant à gauche, ayant une autre boîte de même type à sa gauche, ne devrait pas avoir son bord externe droit au-delà du bord droit de son bloc conteneur. (Plus librement, un flottant à gauche ne devrait pas dépasser le bord droit, à moins d'être déjà au maximum à gauche). Pour des boîtes flottant à droite, les règles sont les mêmes, mais inversées ;
8. Une boîte flottante doit se trouver aussi haut que possible ;
9. Une boîte flottant à gauche doit aller au maximum vers la gauche et, au maximum vers la droite pour celle flottant à droite. Une position plus haute est préférée à celle qui est plus à gauche ou à droite.

Pour mon cas c'est la regle 5 qui s'applique. On ne peut donc pas empiler des blocs un coup a droite et un coup a gauche au fur et a mesure de leur creation avec des floats. Que fafane84 se rassure je n'etais pas a cours d'idee pour trouver une solution je voulais juste comprendre le comportement qu'avait firefox avec mon exemple : comportement que je pensais erroné (a tord). Pour une fois qu'une mauvaise gestion d'IE correspondais a mes attentes :sarcastic: ...

Message édité par afbilou le 05-07-2005 à 15:54:22

Publicité

fafane84

A vrai dire je n'étais pas trop inquiet

Car pour faire du code CSS et XHTML 1.1 de la sorte, je me doutais un peu que tu n'étais pas novice

Ceci dit le positionnenment "flottant" est aussi passionnant à étudier qu'il est complexe à mettre en oeuvre.

[:fafane84]

---------------
Mon Topic de Vente Hardware

plainsofpain

Pingouino's lover

Au passage, il est impossible de faire du xhtml1.1 correction sans avoir le type "application=xhtml+xml", non compris par IE.

Moralité ? Restez en xhtml 1.0 strict pour l'instant les jeunes

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

fafane84

plainsofpain a écrit :

Au passage, il est impossible de faire du xhtml1.1 correction sans avoir le type "application=xhtml+xml", non compris par IE.

Moralité ? Restez en xhtml 1.0 strict pour l'instant les jeunes

Ben mon site est en XHTML 1.0 strict

J'ai tenu compte d'une remarque similaire faite par FlorentG (je crois) à ce sujet.

[:fafane84]

---------------
Mon Topic de Vente Hardware

plainsofpain

Pingouino's lover

(Non, je ne suis pas un multi de FlorentGai croyez moi didiou )

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

FORUM HardWare.fr

Programmation

HTML/CSS

Float : comportement inattendu sous FF [Résolu]

Sujets relatifs
[Résolu] [VC++] Style visuel XP et manifest	heritage - [résolu !]
[résolu] Problème d'affiche d'un cadre 3D	(RESOLU) [PHP / Mysql] Requete SELECT très complexe
Excel Croisement de données entre 2 feuilles [resolu]	[Résolu] [C#] Déclaration de tableaux d'objets à taille inconnue
Afficher un div au survol d'un lien [résolu]	[VBS] Ouvrir un fichier excel dans une feuille spécifique [Résolu]
pb envoi de mail avec SMTP exchange 2003 [JMail] [Résolu]	position d'un calque limitée dans un tableau [résolu]
Plus de sujets relatifs à : Float : comportement inattendu sous FF [Résolu]

Page générée en 0.076 secondes