CSS, attribut "clear"

Le
Mihamina Rakotomandimby
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)
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 6
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Sergio
Le #22030091
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
SAM
Le #22030071
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."


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




--
sm
unbewusst.sein
Le #22030061
Sergio

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
SAM
Le #22030051
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
SAM
Le #22030041
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
Olivier Miakinen
Le #22030031
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.
unbewusst.sein
Le #22030021
SAM
> Peut-être un des contributeurs de ce groupe aurait le "truc" qui
> m'aiderai :)





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
unbewusst.sein
Le #22030011
Olivier Miakinen
Mais je suppose que ton code XHTML était annoncé avec le Content-Type
text/html pour être lisible par Internet Explorer, non ?



oui, merci, c'est bien ça ;-)
--
Une Bévue
Sergio
Le #22030001
Il se trouve que Une Bévue a formulé :
Sergio
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 ?



Perso, je fais :

<br style="clear:both" />

Voire, quand on n'est pas obsédé par les CSS et qu'on n'a pas peur des
"deprecated" :
<br clear="all" />

Là ça passe à tous les coups...

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Thibault Jouan
Le #22029991
On 2008-03-18, Une Bévue
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.



Ce que je ferai, c'est faire flotter l'image *et* l'adresse :

#img,
#addr {
float: left;
}

En supposant que #img est l'image est #addr le conteneur de tes
adresses. Je rajouterai aussi un clear après le conteneur de ces deux
éléments.

--
Thibault Jouan
Publicité
Poster une réponse
Anonyme