Float : comportement inattendu sous FF [Résolu]

Float : comportement inattendu sous FF [Résolu] - HTML/CSS - Programmation

Marsh Posté le 04-07-2005 à 19:39:21    

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 :
http://afbilou.free.fr/tmp/float_ie.jpg
Sous FF :
http://afbilou.free.fr/tmp/float_ff.jpg
 
Le code :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  5. <head>
  6. <title>Un titre</title>
  8. <meta http-equiv="Content-Type"     content="application/xhtml+xml; charset=iso-8859-1" />
  9. <meta http-equiv="Content-Language" content="fr"                                        />
  11. <style type="text/css">
  12.  body * {
  13.   border:    1px solid black;
  14.   text-align:   center;
  15.   background-color: #beb;
  16.  }
  18.  body {
  19.   width:    614px;
  20.   margin:    0 auto;
  21.  }
  23.  div.g {
  24.   float:    left;
  25.   clear:    left;
  26.   width:    300px;
  28.   margin-bottom:  10px;
  29.  }
  31.  div.d {
  32.   float:    right;
  33.   clear:    right;
  34.   width:    300px;
  36.   margin-bottom:  10px;
  37.  }
  39.  div#footer {
  40.   clear:    both;
  41.  }
  43. </style>
  44. </head>
  46. <body>
  48. <h1>Bug de positionnement de FF ???</h1>
  50. <div class="g" style="height:100px;">1er dans le flux<br />float/clear: left;</div>
  51. <div class="d" style="height:050px;">2e  dans le flux<br />float/clear: right;</div>
  52. <div class="g" style="height:150px;">3e  dans le flux<br />float/clear: left;</div>
  53. <div class="d" style="height:050px;">4e  dans le flux<br />float/clear: right;</div>
  54. <div class="g" style="height:060px;">5e  dans le flux<br />float/clear: left;</div>
  55. <div class="d" style="height:050px;">6e  dans le flux<br />float/clear: right;</div>
  57. <div id="footer">7e dans le flux<br />clear: both;</div>
  59. </body>
  61. </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
Reply

Marsh Posté le 04-07-2005 à 19:39:21   

Reply

Marsh Posté le 04-07-2005 à 20:52:49    

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
Reply

Marsh Posté le 04-07-2005 à 21:04:36    

plainsofpain a écrit :

C'est quoi tous ces clear ?


Developpe voir ...

Reply

Marsh Posté le 04-07-2005 à 22:03:23    

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
Reply

Marsh Posté le 04-07-2005 à 22:06:50    

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

Reply

Marsh Posté le 04-07-2005 à 22:09:02    

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
Reply

Marsh Posté le 04-07-2005 à 22:09:49    

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

Reply

Marsh Posté le 04-07-2005 à 22:11:26    

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
Reply

Marsh Posté le 05-07-2005 à 12:12:09    

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

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  3.   <head>
  4.     <title>
  5.       Un titre
  6.     </title>
  7.     <meta http-equiv="Content-Type"     content="application/xhtml+xml; charset=iso-8859-1" />
  8.     <meta http-equiv="Content-Language" content="fr"                                        />
  9.     <style type="text/css">
  10.       body * {
  11.       border:                1px solid black;
  12.       text-align:            center;
  13.       background-color:    #beb;
  14.       }
  15.       body {
  16.       /*width:                614px;*/
  17.       width:                 auto;
  18.       margin:                0 auto;
  19.       }
  20.       div.g, div.d {     
  21.       background-color:   
  22.       white; border:none;
  23.       }
  24.       div.g div, div.d div {
  25.       margin-bottom:        10px;
  26.       }
  27.       div.g {
  28.       float:                left;
  29.       clear:                left;
  30.       width:                300px;
  31.       margin-bottom:        10px;
  32.       }
  33.       div.d {
  34.       float:                right;
  35.       clear:                right;
  36.       width:                300px;
  37.       /*margin-bottom:        10px;*/
  38.       }
  39.       div#footer {
  40.       clear:                both;
  41.       }
  42.     </style>
  43.   </head>
  44.   <body>
  45.     <h1>Bug de positionnement de FF ???</h1>
  46.     <div class="g" >
  47.       <div style="height:100px;">
  48.         1er dans le flux
  49.         <br />
  50.         float/clear: left;
  51.       </div>
  52.       <div style="height:150px;">
  53.         3e  dans le flux
  54.         <br />
  55.         float/clear: left;
  56.       </div>
  57.       <div style="height:060px;">
  58.         5e  dans le flux
  59.         <br />
  60.         float/clear: left;
  61.       </div>
  62.     </div>
  63.     <div class="d">
  64.       <div style="height:050px;">
  65.         2e  dans le flux
  66.         <br />
  67.         float/clear: right;
  68.       </div>
  69.       <div style="height:050px;">
  70.         4e  dans le flux
  71.         <br />
  72.         float/clear: right;
  73.       </div>
  74.       <div style="height:050px;">
  75.         6e  dans le flux
  76.         <br />
  77.         float/clear: right;
  78.       </div>
  79.     </div>
  80.     <div id="footer">
  81.       7e dans le flux
  82.       <br />
  83.       clear: both;
  84.     </div>
  85.   </body>
  86. </html>


 
 [:fafane84]


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

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

Marsh Posté le 05-07-2005 à 15:52:34    

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 ! :D

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
Reply

Marsh Posté le 05-07-2005 à 15:52:34   

Reply

Marsh Posté le 05-07-2005 à 16:23:41    

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
Reply

Marsh Posté le 05-07-2005 à 16:33:00    

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 :D


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

Marsh Posté le 05-07-2005 à 16:36:45    

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 :D


Ben mon site est en XHTML 1.0 strict  :D  
 
J'ai tenu compte d'une remarque similaire faite par FlorentG (je crois) à ce sujet.
 
 [:fafane84]


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

Marsh Posté le 05-07-2005 à 16:46:48    

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


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

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed