Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP CSS, attribut "clear"

CSS, attribut "clear"

58 réponses
Avatar
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)
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2 3 4 5
Avatar
unbewusst.sein
SAM wrote:

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



ce que ça donne chez moi, après le minimum-memorum de changements (css
et xsl) :

<http://thoraval.yvon.free.fr/AB2Html_preview/amis.html>

c'est une prévisualisation de mon carnet d'adresse ...

--
Une Bévue
Avatar
SAM
Une Bévue a écrit :
SAM wrote:

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





Ha! tu es en retard d'un tour :
<http://cjoint.com/data/dsrbmktVT2_flottage.htm>

ce que ça donne chez moi, après le minimum-memorum de changements (css
et xsl) :

<http://thoraval.yvon.free.fr/AB2Html_preview/amis.html>

c'est une prévisualisation de mon carnet d'adresse ...



C'est très joli et fonctionnel mais ...

Y a pas beaucoup de vignerons
et
mon Fx n'aime pas trop :
- pas de doc-type
- beurk ces balises de fermeture aux metas et imgs


Niveau "sémantique" ça va râler dans les rangs
:-)

--
sm
Avatar
unbewusst.sein
SAM wrote:

Y a pas beaucoup de vignerons



beuh, c'est juste une **prévisualisation**, j'ai du entrer "à la main"
les pseudos contacts...

et
mon Fx n'aime pas trop :
- pas de doc-type



ça je peux rajouter fastoche...
(quand j'en aurais choisi un ;-))

- beurk ces balises de fermeture aux metas et imgs



ben c'est le proc xslt qui me donne ça en xhtml...


Niveau "sémantique" ça va râler dans les rangs



quand j'aurai pigé à quoi ça peut servir...

là c'est simplement une appli (AB2Html pour Address Book to Html) qui me
convertit le contenu de Carnet d'adresses en Html :

transfo par script ruby du carnet d'adresse en xCard/vCard (draft dawson
dtd)
puis transfo de l'xml produit en plusieurs pages html par xslt 2 (saxon
9)

--
Une Bévue
Avatar
SAM
Une Bévue a écrit :
SAM wrote:

Niveau "sémantique" ça va râler dans les rangs



quand j'aurai pigé à quoi ça peut servir...



tu regardes le dernier exemple (dernier §) et tu y vois que ça présente
pas si mal sans CSS.
Avantage : pas besoin de class à chaque P ou autre jetés dans le HTML.

Maintenant comment marier ça avec du cvs ou le fichier de Carnet ...
ce n'est pas de mon ressort :-/

(sans parler de la complication xml)


là c'est simplement une appli (AB2Html pour Address Book to Html) qui me
convertit le contenu de Carnet d'adresses en Html :



Ha! faut que j'essaie voir à voir
(que j'aille râler un bon coup auprès de son auteur ;-) )

Où as-tu trouvé ça ?
Google ne connait que les interventions d'un certain Yvon à son sujet.
Ni macupdate ni versiontracker ne connaissent.

transfo par script ruby du carnet d'adresse en xCard/vCard (draft dawson
dtd)



Y a encore du D&D qui va partir aux oubliettes ;-)

puis transfo de l'xml produit en plusieurs pages html par xslt 2 (saxon
9)



Oui ? dans l'autre oreille ? J'ai une banane dans celle-ci.

--
sm
Avatar
Laurent vilday
Thibault Jouan a écrit :
<div>
<div style="float: left; width: 49%">
bla bla
</div>
<div style="float: left; width: 49%">
bla bla
</div>
<div>
<div style="clear: both;"></div>



Beurk, dernier <div> inutile.

Je préfère :



Méthode "Old School" et plus proche du hack que d'une technique
conventionnelle. D'autant que IE6, ":after" et "content" ne s'entendent
pas du tout.

clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

<div class="clear">
<div style="float: left; width: 49%">
bla bla
</div>
<div style="float: left; width: 49%">
bla bla
</div>
<div>



La méthode plus moderne est nettement plus simple et, oh bonheur, même
IE6 la comprend du premier coup sans passer par des hacks immondes :

<div style="overflow:auto">
<div style="float:left; width:49%">
foo bar
</div>
<div style="float:left; width:49%">
foo bar
</div>
</div>

--
laurent
Avatar
Olivier Miakinen
Le 18/03/2008 16:48, Andreas Prilop a écrit :

# Servir les pages xhtml avec le type MIME text/html
# aux navigateurs qui ne comprennent pas le application/xhtml+xml



Bullshit!

Il suffit d'utiliser le suffixe .html

http://www.unics.uni-hannover.de/nhtcapri/temp/ignore-content-type.x.html



<cit.>
Internet Explorer 6/7 (Windows XP/2003/Vista) ignores the content-type
when the « file extension » is .html.
</cit.>

1) Je n'en ai jamais entendu parler.

2) Ça ne marche pas chez moi (IE 6 sur Windows 2000). Après une boîte de
dialogue me mettant en garde sur le fait que certains fichiers peuvent
endommager mon ordinateur (ce qui n'est pas du plus bel effet pour une
page web), il me propose le choix entre « Ouvrir », « Enregistrer »,
« Annuler » et « Plus d'infos ». Si je demande d'ouvrir, il refile le
bébé à SeaMonkey qui est mon navigateur par défaut.
Avatar
SAM
Laurent vilday a écrit :

La méthode plus moderne est nettement plus simple et, oh bonheur, même
IE6 la comprend du premier coup sans passer par des hacks immondes :

<div style="overflow:auto">
<div style="float:left; width:49%">
foo bar
</div>
<div style="float:left; width:49%">
foo bar
</div>
</div>



Je sais pas ... pas essayé en aussi simple (quasi vide)
mais ... si, en efet ça améliore pour Fx (bien que je ne comprenne pas
pourquoi un overflow peut régler la question),
en tous cas dans IE, sans un arret de flottaison après le div conteneur
... pas de réel salut, suffit de mettre un bord à l'overflow pour voir.

???? de mettre une largeur à l'overflow semble résoudre le blème
résiduel ...
Si c'est pas em...der le monde rien que pour le plaisir !

--
sm
Avatar
SAM
Olivier Miakinen a écrit :
Le 18/03/2008 16:48, Andreas Prilop a écrit :

Il suffit d'utiliser le suffixe .html

http://www.unics.uni-hannover.de/nhtcapri/temp/ignore-content-type.x.html



<cit.>
Internet Explorer 6/7 (Windows XP/2003/Vista) ignores the content-type
when the « file extension » is .html.
</cit.>

1) Je n'en ai jamais entendu parler.

2) Ça ne marche pas chez moi (IE 6 sur Windows 2000).



Ben si ça marche (IE 6 Win XP) :
<http://www.unics.uni-hannover.de/nhtcapri/temp/ignore-content-type.x.html>
a eté envoyé avec l'en-tête :
"Content-Type: application/xhtml+xml; qs=0.95; charset=utf-8"
et IE s'en est contre-carré.
(ils n'ont pas parlé de Win 2000 ...)

Le test 2 est là pour montrer que les en-tête et suffixe xhtml sont la
condition nécessaire à enduire d'Erreur IE.

Reste à voir si le suffixe xhtml ne suffirait pas à le suicider une
bonne foi.

Bon, c'est déjà bien si Win 2000 arrive tout seul à euthaniser son IE :-)

Après une boîte de
dialogue me mettant en garde sur le fait que certains fichiers peuvent
endommager mon ordinateur (ce qui n'est pas du plus bel effet pour une
page web), il me propose le choix entre « Ouvrir », « Enregistrer »,



tu as bien de la chance (je n'ai rien mis d'autre que ce IE6) j'ai pas
plus que « Enregistrer » et « Annuler ».

« Annuler » et « Plus d'infos ». Si je demande d'ouvrir, il refile le
bébé à SeaMonkey qui est mon navigateur par défaut.




--
sm
Avatar
Laurent vilday
SAM a écrit :
Laurent vilday a écrit :

La méthode plus moderne est nettement plus simple et, oh bonheur, même
IE6 la comprend du premier coup sans passer par des hacks immondes :

<div style="overflow:auto">
<div style="float:left; width:49%">
foo bar
</div>
<div style="float:left; width:49%">
foo bar
</div>
</div>



Je sais pas ... pas essayé en aussi simple (quasi vide)



Faut essayer :p
Après avoir fouillé dans mes bookmarks, je tiens ça de ppk :
<http://www.quirksmode.org/css/clearing.html>

Sauf que il préconise d'utiliser overflow:hidden parce que IE Mac
affiche des scrollbars en auto. Ayant pris le parti d'ignorer purement
et simplement la version Mac de IE, overflow:auto sur le parent des
éléments flottants m'a jusqu'à présent *toujours* permis de manipuler
correctement tout ce beau monde, quelle que soit la complexité de la
mise en page et ce de façon uniforme à travers tous les navigateurs
"usuels".

mais ... si, en efet ça améliore pour Fx (bien que je ne comprenne pas
pourquoi un overflow peut régler la question),
en tous cas dans IE, sans un arret de flottaison après le div conteneur
.... pas de réel salut, suffit de mettre un bord à l'overflow pour voir.



Parce que la propriété "hasLayout" n'est pas définie par défaut pour
l'élément utilisé.
<http://www.satzansatz.de/cssd/onhavinglayout.html>

???? de mettre une largeur à l'overflow semble résoudre le blème
résiduel ...
Si c'est pas em...der le monde rien que pour le plaisir !



Parce que ajouter une largeur permet de définir à true la fameuse et
horrible propriété "hasLayout" (propriétaire) de IE6 et IE7 - supposée
avoir disparue de IE8 mais je n'ai pas pris le temps de vérifier pour
l'instant -

Perso, plutôt que d'attribuer des width à mes éléments juste parce que
IE possède cette saloperie de "hasLayout", je préfère lui appliquer dans
une CSS conditionnelle un truc tout bête :

* { zoom:1 }

Et hop, tous les éléments ont désormais la propriété "hasLayout" définie
à true pour *tous* les éléments avec ou sans width. Jamais testé en mode
quirks, je ne "travaille" que en mode de rendu strict, mais j'imagine
qu'en mode quirks on passe encore une fois dans d'autres cas propres à IE.

--
laurent
Avatar
unbewusst.sein
SAM wrote:

tu regardes le dernier exemple (dernier §) et tu y vois que ça présente
pas si mal sans CSS.
Avantage : pas besoin de class à chaque P ou autre jetés dans le HTML.



OK, je vais refaire cette partie du code...

> là c'est simplement une appli (AB2Html pour Address Book to Html) qui me
> convertit le contenu de Carnet d'adresses en Html :

Ha! faut que j'essaie voir à voir
(que j'aille râler un bon coup auprès de son auteur ;-) )




euh... c'est moi "l'auteur" ...
pas encore "releasable..."


--
Une Bévue
1 2 3 4 5