[Résolu] directive "clear" en CSS

Message par **Ymai** » 18 nov. 2006, 18:09

Bonjour
Dans le code tout simple suivant:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>
      titre
    </title>
<style type="text/css">
#menu
{float: left; width: 200px; background-color: red;}
#texte 
{background-color: yellow; width: 100%; margin-left: 200px}
.boite {width: 25%; float: left;}
</style>
  </head>
  <body>
    <div id="menu">
      Ligne 1<br>
      Ligne 2<br>
      Ligne 3<br>
      Ligne 4<br>
    </div>
    <div id="texte">
      <div class="boite">boîte 1</div>
      <div class="boite">boîte 2</div>
      <hr style="clear: both;">
      La suite<br>
    </div>
  </body>
</html>

je n'arrive pas à comprendre la raison pour laquelle le
<hr style="clear:both">
que l'on voit vers la fin
provoque un retour sous le niveau du bloc "menu" à gauche.
Ne devrait-il pas simplement provoquer un retour sous la "boîte 2" qui se trouve dans le bloc "texte"?
Ma question est sans doute basique, mais je cale vraiment...
Merci pour tout coup de pouce.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

calimo · Message par **calimo** » 18 nov. 2006, 21:39

http://www.yoyodesign.org/doc/w3c/css2/ ... ow-control

Cette propriété indique quels côtés d'une ou des boîtes d'un élément ne doivent pas être adjacents à une boîte flottante précédente. (Il peut arriver que l'élément lui-même ait des descendants flottants, la propriété 'clear' n'a alors aucun effet sur eux).

Le comportement me semble donc à peu près logique

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1) Gecko/20061010 Firedragon Firefox/2.0

Message par **Ymai** » 19 nov. 2006, 01:34

Merci pour le renvoi au manuel

Sauf qu'il me semblait, en principe, que le "clear" est valable pour le bloc parent.
Dans mon esprit, il doit donc s'appliquer à l'intérieur du bloc "texte" qui est le parent direct.

Ici, à l'intérieur du bloc parent, tout ce qui suit "clear:both" est reporté en dessous du bloc frère "menu".
Quand il est question de "boîte flottante précédente", ne faut-il pas entendre "boîte flottante parente"?

Si tout cela n'est que divagation, me laisser dans mon jus à réfléchir sur la doc

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Mongo Bob · Message par **Mongo Bob** » 19 nov. 2006, 01:55

Je vois pas en quoi le comportement est logique par rapport à la définition de Yoyodesign.
<hr> devrait bien être sous "boîte 1" en fait, mais il faut croire que "clear" interdit la juxtaposition de tout élément précédent, et non seulement du 1er précédent dans le html.
Donc, quand Yoyodesign parle de "une boîte flottante précédente", il parle de toute boîte flottante précédente? Ouais... Ca doit être ça, après tout.
Il faudrait fixer des hauteurs à ces éléments pour voir ce qui arrive (je dis ça, je devrais essayer), incidemment, notons que "clear:left" offre le même comportement que "both" et que "right" ne change rien puisqu'il n'y a rien à droite de <hr>, ça au moins, on comprend.

Mongo Bob · Message par **Mongo Bob** » 19 nov. 2006, 02:13

En lisant plus loin :

Yoyodesign a écrit :Le sommet du bord externe de cette boîte flottante doit se trouver en dessous de toutes boîtes précédentes qui flottent à gauche (pour la valeur 'clear:left'), ou qui flottent à droite (pour la valeur 'clear: right'), ou toutes celles qui flottent (pour la valeur 'clear: both').

Donc, en enlevant les propriétés "float:left" à #texte et #menu, en les plaçant dans le flux courant, donc, je croyais que le <hr> allait se comporter comme le voulait Ymai, et bien non! C'est tout le #texte qui se retrouve sous et à droite de #menu, bon on reverra ça frais et dispo...

Code : Tout sélectionner

<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>
      titre
    </title>
    <style type="text/css">
#menu
    { width: 200px; background-color: red;}
    #texte
    {background-color: yellow; width: 100%; margin-left: 200px}
    .boite {width: 25%;border:solid;}
    </style>
  </head>
  <body>
    <div id="menu">
      Ligne 1<br>
      Ligne 2<br>
      Ligne 3<br>
      Ligne 4<br>
    </div>
    <div id="texte">
      <div class="boite">
        boîte 1
      </div>
      <div class="boite">
        boîte 2
      </div>
      <hr style="clear: both;">
      La suite<br>
    </div>
  </body>
</html>

calimo · Message par **calimo** » 19 nov. 2006, 11:44

Ymai a écrit :Merci pour le renvoi au manuel
Sauf qu'il me semblait, en principe, que le "clear" est valable pour le bloc parent.
Dans mon esprit, il doit donc s'appliquer à l'intérieur du bloc "texte" qui est le parent direct.

Ici, à l'intérieur du bloc parent, tout ce qui suit "clear:both" est reporté en dessous du bloc frère "menu".
Quand il est question de "boîte flottante précédente", ne faut-il pas entendre "boîte flottante parente"?

Non non, parente n'est pas précédente. Précédente ça veut dire "Qui apparaît avant dans l'ordre du HTML" ou quelque chose comme ça.

Exemple :

Code : Tout sélectionner

<p id="p1">paragraphe 1</p>
<p id="p2">paragraphe 2</p>

#p1 précède #p2, mais ce n'est pas du tout son parent. Parent et précédent sont donc deux choses bien différentes.
Ne te fais pas d'illusion, chaque mot a été soigneusement pesé pendant des mois voire des années. Il n'y a pas de telles approximations dans les recommandations du W3C

Allez, j'en rajoute une couche pour la route : http://www.yoyodesign.org/doc/w3c/css2/ ... #preceding

Quand je dis que tout est défini, je ne ment pas

Mongo Bob a écrit :Donc, quand Yoyodesign parle de "une boîte flottante précédente", il parle de toute boîte flottante précédente? Ouais... Ca doit être ça, après tout.

Que veux-tu que ce soit d'autre ?

Mongo Bob a écrit :En lisant plus loin :
Yoyodesign a écrit :Le sommet du bord externe de cette boîte flottante doit se trouver en dessous de toutes boîtes précédentes qui flottent à gauche (pour la valeur 'clear:left'), ou qui flottent à droite (pour la valeur 'clear: right'), ou toutes celles qui flottent (pour la valeur 'clear: both').

Si tu avais lu ce qu'il y a juste avant :

Quand on applique cette propriétés aux éléments flottants, une modification des règles de leur positionnement intervient. On ajoute une contrainte supplémentaire (la dixième) :

Donc ce n'est pas le cas ici vu que le <hr> ne flotte pas lui-même (il me semble).

Encore une fois, attention, chaque mot a son importance et son contexte, il faut vraiment être attentif et rigoureux !

Mongo Bob a écrit :Donc, en enlevant les propriétés "float:left" à #texte et #menu,

Comment fais-tu pour enlever un float:left à #texte ? Il n'existe pas...

Mongo Bob a écrit :en les plaçant dans le flux courant, donc, je croyais que le <hr> allait se comporter comme le voulait Ymai, et bien non! C'est tout le #texte qui se retrouve sous et à droite de #menu, bon on reverra ça frais et dispo...

Oui je crois aussi que ce sera mieux, si le menu ne flotte pas, le texte qui le suit ne va pas se placer à-côté "par magie"

Repose-toi bien

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1) Gecko/20061010 Firegecko Firefox/2.0

Message par **Ymai** » 19 nov. 2006, 11:47

Un peu plus frais à cette heure-ci, je reste dans un profond doute...
Gecko et IE ne semblent pas trop d'accord sur la façon de traiter mon code. Et aucun des deux ne le traite comme je l'aurais souhaité.

Donc, moi, je voudrais "La suite" juste sous la ligne horizontale; comme le fait IE. Mais je voudrais aussi la zone "texte" (jaune) à côté de la zone "menu" (rouge).

calimo · Message par **calimo** » 19 nov. 2006, 11:53

Mets ton #menu en position:absolute et donne une marge à #text correspondante à la largeur de #menu. C'est moins dynamique (il faut définir une largeur, c'est pas forcément terrible).

Je ne sais pas pourquoi IE ne flotte pas. Certainement un bug

Je maintiens que le comportement de Firefox est adéquat.

En attendant CSS3 avec impatience !

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1) Gecko/20061010 Firegecko Firefox/2.0

Message par **Ymai** » 19 nov. 2006, 12:00

OK, merci, ça fonctionne! Même si je n'ai pas encore compris pourquoi la méthode initiale ne roule pas correctement.
Grrrr.... Dire que mon idée de départ était de supprimer les blocs en position "absolute" dans un site.

Merci à Mongo Bob qui a passé la moitié de la nuit à veiller sur ma question

Message par **Ymai** » 19 nov. 2006, 12:10

calimo a écrit :
Ymai a écrit :Merci pour le renvoi au manuel
Sauf qu'il me semblait, en principe, que le "clear" est valable pour le bloc parent.
Dans mon esprit, il doit donc s'appliquer à l'intérieur du bloc "texte" qui est le parent direct.

Ici, à l'intérieur du bloc parent, tout ce qui suit "clear:both" est reporté en dessous du bloc frère "menu".
Quand il est question de "boîte flottante précédente", ne faut-il pas entendre "boîte flottante parente"?
Non non, parente n'est pas précédente. Précédente ça veut dire "Qui apparaît avant dans l'ordre du HTML" ou quelque chose comme ça.

Exemple :
Code : Tout sélectionner
<p id="p1">paragraphe 1</p>
<p id="p2">paragraphe 2</p>
#p1 précède #p2, mais ce n'est pas du tout son parent. Parent et précédent sont donc deux choses bien différentes.

Nous sommes, je pense, bien d'accord sur la terminologie.
body est parent de
- menu et
- texte

texte est parent de
chacune des boîtes

J'espérais que dans la descendance de "texte" tout se passe indépendamment de la branche "menu".
Il me semble qu'il y a quelque chose d'inesthétique dans la solution qui consiste à changer le statut de "texte" et le mettre en "absolute".
Je suis un éternel insatisfait.

Mongo Bob · Message par **Mongo Bob** » 19 nov. 2006, 13:01

OK, tout faux, merci pour l'ironie habituelle, calimo...

calimo · Message par **calimo** » 19 nov. 2006, 13:42

Ymai a écrit :Grrrr.... Dire que mon idée de départ était de supprimer les blocs en position "absolute" dans un site.

Ah oui alors évidemment, dans ce cas

Il ne te reste plus qu'à te faire engager au W3C pour développer ça : http://www.w3.org/TR/2005/WD-css3-layout-20051215/
Ensuite, il faudra que tu apprennes la programmation pour que Mozilla, IE et les autres le supportent. Et ça, ça risque de prendre du temps (je veux dire, qu'ils le supportent. Je pense que ça prendra beaucoup plus de temps que d'apprendre la programmation et le faire soi-même, mais bon...)

Plus sincèrement, ce document de travail est la preuve que les solutions actuelles de positionnement ne sont pas du tout satisfaisantes. Rassures-toi, je n'en suis pas satisfait non plus, mais il faut faire avec

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1) Gecko/20061010 Firegecko Firefox/2.0

Geckozone

[Résolu] directive "clear" en CSS

[Résolu] directive "clear" en CSS

Qui est en ligne ?