Bonjour,

J'ai beau regarder les docs et les tutoriels existants, je ne trouve pas
d'explication satisfaisante sur l'usage et la signification de "clear".

Ce que je ne comprend pas c'est:
- qu'est-ce qui passe à la ligne apres le "clear"?
- qu'est ce que "clear" chamboule?

Jusque là je n'ai pas eu obligation de l'utiliser, mais je vois par
exemple que Joomla (les templates joomlart, plus exactement) l'utilise
beaucoup, et quand je customise ces templates en enlevant le "clear", ça
ne change pas grand chose...

En gros, j'ai regardé la théorie, je comprends pas.
J'ai expérimenté sur des cas de la vraie vie, je comprends pas.

Peut-être un des contributeurs de ce groupe aurait le "truc" qui
m'aiderai

Merci d'avance.

--
Huile Essentielle de Camphre http://www.huile-camphre.fr
Infogerance http://www.infogerance.us
(Serveurs, Postes de travail, Développement logiciel)

Mihamina Rakotomandimby a présenté l'énoncé suivant :
> Bonjour,
>
> J'ai beau regarder les docs et les tutoriels existants, je ne trouve pas
> d'explication satisfaisante sur l'usage et la signification de "clear".
>
> Ce que je ne comprend pas c'est:
> - qu'est-ce qui passe à la ligne apres le "clear"?
> - qu'est ce que "clear" chamboule?
>
> Jusque là je n'ai pas eu obligation de l'utiliser, mais je vois par exemple
> que Joomla (les templates joomlart, plus exactement) l'utilise beaucoup, et
> quand je customise ces templates en enlevant le "clear", ça ne change pas
> grand chose...
>
> En gros, j'ai regardé la théorie, je comprends pas.
> J'ai expérimenté sur des cas de la vraie vie, je comprends pas.
>
> Peut-être un des contributeurs de ce groupe aurait le "truc" qui m'aiderai

Il me semble que c'est l'équivalent de la propriété HTML "clear". En
gros, si t'as des blocs (image...) autour desquels coule ton texte,
après le "clear", le texte qui suit passe obligatoirement en-dessous
des dits blocs (du moins en clear:both, les autres modes étant assez
obscurs).

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org

Mihamina Rakotomandimby a écrit :
> Bonjour,
>
> J'ai beau regarder les docs et les tutoriels existants, je ne trouve pas
> d'explication satisfaisante sur l'usage et la signification de "clear".

pourtant c'est très clair :

"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."

<http://www.yoyodesign.org/doc/w3c/css2/visuren.html#propdef-clear>

> Ce que je ne comprend pas c'est:
> - qu'est-ce qui passe à la ligne apres le "clear"?

c'est "avant" que ça se passe (je dirais : maintenant)

> - qu'est ce que "clear" chamboule?

c'est censé stopper une flottaison

exemple
- une image en float:right
- du texte (qui va couler à gauche de l'image)
- un nouveau texte dont on veut absolument qu'il commence après l'image
hop! clear:right;

> En gros, j'ai regardé la théorie, je comprends pas.
> J'ai expérimenté sur des cas de la vraie vie, je comprends pas.

c'est paske tu n'as regardé qu'avec des navigateurs assez récents, sans
doute ?

> Peut-être un des contributeurs de ce groupe aurait le "truc" qui
> m'aiderai

<http://cjoint.com/data/dslxpLMoe4_flottage.htm>

--
sm

Sergio <laposte@serge.delbono.net.invalid> wrote:

>
> Il me semble que c'est l'équivalent de la propriété HTML "clear". En
> gros, si t'as des blocs (image...) autour desquels coule ton texte,
> après le "clear", le texte qui suit passe obligatoirement en-dessous
> des dits blocs (du moins en clear:both, les autres modes étant assez
> obscurs).

j'ai eu un pb avec un clear, le code :
css :
div.clear {
clear:both;height:1px;overflow:hidden;
}

html :
<div class="clear"></div>

ça, ça marche comme je veux...

MAIS, le fichier (x)html est parsé/modifié par un proc xml qui me
retourne, au lieu du tag div ci-dessus :
<div class="clear"/>
et là, patatrac ça fout par terre le clear:both;

normal docteur ?

bon, j'ai trouvé un subterfuge en plaçant une espace insécable dans la
div :
<div class="clear"> </div>
espace_insécable_________^

et là, comme le proc xml ne peut modifier, ça roule...

je poste ça car j'ai mis pas mal de temps à comprendre que mon layout
avait été complétement chamboulé par le passage de '<div
class="clear"></div>' à '<div class="clear"/>'...

--
Une Bévue

Une Bévue a écrit :
>
> je poste ça car j'ai mis pas mal de temps à comprendre que mon layout
> avait été complétement chamboulé par le passage de '<div
> class="clear"></div>' à '<div class="clear"/>'...

Pourtant il est usuel d'avoir :

<hr class="clear" />

et que ça fonctionne, non ?

--
sm

Sergio a écrit :
>
> Il me semble que c'est l'équivalent de la propriété HTML "clear". En
> gros, si t'as des blocs (image...) autour desquels coule ton texte,
> après le "clear", le texte qui suit passe obligatoirement en-dessous des
> dits blocs (du moins en clear:both, les autres modes étant assez obscurs).

Il n'y a rien d'obscur, sauf la manière dont IE voit la chose :-(

- clear:left; va arrêter la flottaison gauche précédente
et pas celle à droite

- float:left;clear:left;
pareil : doit arrêter la flottaison gauche des précédents
en plus : flotte à gauche
Problème : IE n'y entrave que d'chi

--
sm

Le 18/03/2008 11:39, SAM répondait à Une Bévue :
>>
>> je poste ça car j'ai mis pas mal de temps à comprendre que mon layout
>> avait été complétement chamboulé par le passage de '<div
>> class="clear"></div>' à '<div class="clear"/>'...

Mais je suppose que ton code XHTML était annoncé avec le Content-Type
text/html pour être lisible par Internet Explorer, non ? Dans ce cas,
les navigateurs ne le considèrent pas comme du XML mais comme du HTML
mal formé, et il appliquent donc les règles de HTML dans la mesure de
leurs moyens. Or <div/> n'est pas une syntaxe autorisée en HTML.

> Pourtant il est usuel d'avoir :
> <hr class="clear" />
> et que ça fonctionne, non ?

Oui, mais là c'est exactement l'inverse : contrairement à l'élément DIV
qui est censé avoir du contenu, l'élément HR est censé être vide. Dans
ce cas, c'est la syntaxe <hr></hr> qui risque de poser des problèmes aux
navigateurs.

SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:

> > Peut-être un des contributeurs de ce groupe aurait le "truc" qui
> > m'aiderai
>
> <http://cjoint.com/data/dslxpLMoe4_flottage.htm>


j'ai un besoin "spécifique" c'est une sorte de carte de visite avec, à
gauche, la photo de la trombine du type, à droite son/sesadresse(s)

si je laisse floater normalement c'est pas jojo, j'obtiens :

|---------------| Adresse personnelle:
| |
| photo | 2, rue de la Poupée qui tousse
| | 75016 Paris
| | Adresse travail :
| |
|---------------| 56, rue du Lapin qui fume
75007 Paris

ce qui me gène c'est le retour de "75007 Paris" au dessous de l'image.

je ne maitrise pas la hauteur du texte à droite.

ce que je souhaite obtenir :

|---------------| Adresse personnelle:
| |
| photo | 2, rue de la Poupée qui tousse
| | 75016 Paris
| | Adresse travail :
| |
|---------------| 56, rue du Lapin qui fume
75007 Paris

c'est-à-dire qu'une adresse commencée à droite reste avec son décalage.
le problème ne survient que lorsque j'ai plus d'une adrese à afficher.
quand il y a une seule adresse l'image étant plus haute que le texte,
c'est OK.

--
Une Bévue