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)
Ensuite j'utilise cette classe sur le parent de mes éléments flottant, par exemple :
CSS :
div.element img { float: left; }
XHTML :
<div class="element clear"> <img src="toto" alt="titi" /> bla bla bla </div>
Comme ça il n'est pas nécessaire d'avoir un élément de plus dans la page, qui selon moi n'a rien à y faire d'un point de vue sémantique.
-- Thibault Jouan
Lea GRIS
Olivier Miakinen a écrit :
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.
Pour ce genre de problèmes j'utilise une petite astuce qui fonctionne merveilleusement bien avec Apache :
Il est possible d'adapter cette réécriture du type MIME aux différents langages de scriptes; puisqu'il suffit d'interroger la variable d'en-tête HTTP_ACCEPT et envoyer le type MIME compatible.
# Servir les pages xhtml avec le type MIME text/html # aux navigateurs qui ne comprennent pas le application/xhtml+xml
AddType application/xhtml+xml .xhtml
RewriteEngine On RewriteBase /
# l'en-tête Http Accept ne contient pas "application/xhtml+xml" RewriteCond %{HTTP_ACCEPT} !application/xhtml+xml
# Le fichier demandé se termine en .xhtml RewriteCond %{REQUEST_FILENAME} .*.xhtml
# L'expression prend en compte toute URL : # - Signifie pas de substitution. # T définit le type MIME comme text/html, # L indique que c'est la dernière règle RewriteRule ^.*$ - "[T=text/html,L]"
-- Léa Gris
Olivier Miakinen a écrit :
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.
Pour ce genre de problèmes j'utilise une petite astuce qui fonctionne
merveilleusement bien avec Apache :
Il est possible d'adapter cette réécriture du type MIME aux différents
langages de scriptes; puisqu'il suffit d'interroger la variable
d'en-tête HTTP_ACCEPT et envoyer le type MIME compatible.
# Servir les pages xhtml avec le type MIME text/html
# aux navigateurs qui ne comprennent pas le application/xhtml+xml
AddType application/xhtml+xml .xhtml
RewriteEngine On
RewriteBase /
# l'en-tête Http Accept ne contient pas "application/xhtml+xml"
RewriteCond %{HTTP_ACCEPT} !application/xhtml+xml
# Le fichier demandé se termine en .xhtml
RewriteCond %{REQUEST_FILENAME} .*.xhtml
# L'expression prend en compte toute URL :
# - Signifie pas de substitution.
# T définit le type MIME comme text/html,
# L indique que c'est la dernière règle
RewriteRule ^.*$ - "[T=text/html,L]"
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.
Pour ce genre de problèmes j'utilise une petite astuce qui fonctionne merveilleusement bien avec Apache :
Il est possible d'adapter cette réécriture du type MIME aux différents langages de scriptes; puisqu'il suffit d'interroger la variable d'en-tête HTTP_ACCEPT et envoyer le type MIME compatible.
# Servir les pages xhtml avec le type MIME text/html # aux navigateurs qui ne comprennent pas le application/xhtml+xml
AddType application/xhtml+xml .xhtml
RewriteEngine On RewriteBase /
# l'en-tête Http Accept ne contient pas "application/xhtml+xml" RewriteCond %{HTTP_ACCEPT} !application/xhtml+xml
# Le fichier demandé se termine en .xhtml RewriteCond %{REQUEST_FILENAME} .*.xhtml
# L'expression prend en compte toute URL : # - Signifie pas de substitution. # T définit le type MIME comme text/html, # L indique que c'est la dernière règle RewriteRule ^.*$ - "[T=text/html,L]"
-- Léa Gris
unbewusst.sein
Thibault Jouan <tj+ wrote:
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.
OK, merci bien, j'essaie derechef ;-) -- Une Bévue
Thibault Jouan <tj+nntp@a13.fr> wrote:
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.
OK, merci bien, j'essaie derechef ;-)
--
Une Bévue
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.
OK, merci bien, j'essaie derechef ;-) -- Une Bévue
Olivier Miakinen
Le 18/03/2008 14:11, Lea GRIS m'a répondu :
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. [...]
Pour ce genre de problèmes j'utilise une petite astuce qui fonctionne merveilleusement bien avec Apache :
[...]
# Servir les pages xhtml avec le type MIME text/html # aux navigateurs qui ne comprennent pas le application/xhtml+xml
[...]
Et donc tu auras un rendu correct dans les navigateurs traitant le XML, mais complètement bugué dans les autres... Je suis d'accord que c'est une bonne idée pour vérifier que notre code XML est correct (et pour préparer l'avenir) mais cela ne doit pas nous dispenser de faire en sorte que la soupe de balises qu'est XHTML en text/html ne soit pas trop éloignée de la norme HTML 4.01.
Le 18/03/2008 14:11, Lea GRIS m'a répondu :
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.
[...]
Pour ce genre de problèmes j'utilise une petite astuce qui fonctionne
merveilleusement bien avec Apache :
[...]
# Servir les pages xhtml avec le type MIME text/html
# aux navigateurs qui ne comprennent pas le application/xhtml+xml
[...]
Et donc tu auras un rendu correct dans les navigateurs traitant le XML,
mais complètement bugué dans les autres... Je suis d'accord que c'est
une bonne idée pour vérifier que notre code XML est correct (et pour
préparer l'avenir) mais cela ne doit pas nous dispenser de faire en
sorte que la soupe de balises qu'est XHTML en text/html ne soit pas
trop éloignée de la norme HTML 4.01.
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. [...]
Pour ce genre de problèmes j'utilise une petite astuce qui fonctionne merveilleusement bien avec Apache :
[...]
# Servir les pages xhtml avec le type MIME text/html # aux navigateurs qui ne comprennent pas le application/xhtml+xml
[...]
Et donc tu auras un rendu correct dans les navigateurs traitant le XML, mais complètement bugué dans les autres... Je suis d'accord que c'est une bonne idée pour vérifier que notre code XML est correct (et pour préparer l'avenir) mais cela ne doit pas nous dispenser de faire en sorte que la soupe de balises qu'est XHTML en text/html ne soit pas trop éloignée de la norme HTML 4.01.
SAM
Une Bévue a écrit :
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.
suffit qu'elle soit dans un block flottant, non ?
<http://cjoint.com/data/dsqi2ug8Au_flottage.htm> (en bas)
-- sm
Une Bévue a écrit :
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.
suffit qu'elle soit dans un block flottant, non ?
<http://cjoint.com/data/dsqi2ug8Au_flottage.htm>
(en bas)
|---------------| 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.
suffit qu'elle soit dans un block flottant, non ?
<http://cjoint.com/data/dsqi2ug8Au_flottage.htm> (en bas)
-- sm
SAM
Thibault Jouan a écrit :
Comme ça il n'est pas nécessaire d'avoir un élément de plus dans la page, qui selon moi n'a rien à y faire d'un point de vue sémantique.
Pas très certain ... une adresse (avec son intitulé) pourrait être assimilée à une définition (qui fait partie des balises genre listes)
-- sm
Thibault Jouan a écrit :
Comme ça il n'est pas nécessaire d'avoir un élément de plus dans la
page, qui selon moi n'a rien à y faire d'un point de vue sémantique.
Pas très certain ... une adresse (avec son intitulé) pourrait être
assimilée à une définition (qui fait partie des balises genre listes)
<div class="clear"> <div style="float: left; width: 49%"> bla bla </div> <div style="float: left; width: 49%"> bla bla </div> <div>
Ce qui me gène ici c'est que le dernier div n'a selon moi aucun sens, donc je préfère la solution que j'ai évoquée, c'est à dire faire le clear uniquement en CSS sans toucher à la structure du document.
Par contre si à chaque « clear » on devait avoir quelquechose de « visible » là j'opterai pour la seconde.
D'une manière générale je préfère éviter de modifier la structure du document pour ce qui concerne uniquement l'apparence. De même, sauf bonnes raisons j'évite les style="" en dur comme ceux que j'ai écrits au dessus :-)
-- Thibault Jouan
On 2008-03-18, SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:
Thibault Jouan a écrit :
Comme ça il n'est pas nécessaire d'avoir un élément de plus dans la
page, qui selon moi n'a rien à y faire d'un point de vue sémantique.
Pas très certain ... une adresse (avec son intitulé) pourrait être
assimilée à une définition (qui fait partie des balises genre listes)
Soit je ne me suis pas bien expliqué, soit je n'ai pas compris ton
exemple. Voici le type de chose qui me « gène » :
<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>
<div class="clear">
<div style="float: left; width: 49%">
bla bla
</div>
<div style="float: left; width: 49%">
bla bla
</div>
<div>
Ce qui me gène ici c'est que le dernier div n'a selon moi aucun sens,
donc je préfère la solution que j'ai évoquée, c'est à dire faire le
clear uniquement en CSS sans toucher à la structure du document.
Par contre si à chaque « clear » on devait avoir quelquechose de
« visible » là j'opterai pour la seconde.
D'une manière générale je préfère éviter de modifier la structure du
document pour ce qui concerne uniquement l'apparence. De même, sauf
bonnes raisons j'évite les style="" en dur comme ceux que j'ai écrits au
dessus :-)
<div class="clear"> <div style="float: left; width: 49%"> bla bla </div> <div style="float: left; width: 49%"> bla bla </div> <div>
Ce qui me gène ici c'est que le dernier div n'a selon moi aucun sens, donc je préfère la solution que j'ai évoquée, c'est à dire faire le clear uniquement en CSS sans toucher à la structure du document.
Par contre si à chaque « clear » on devait avoir quelquechose de « visible » là j'opterai pour la seconde.
D'une manière générale je préfère éviter de modifier la structure du document pour ce qui concerne uniquement l'apparence. De même, sauf bonnes raisons j'évite les style="" en dur comme ceux que j'ai écrits au dessus :-)
-- Thibault Jouan
Andreas Prilop
On Tue, 18 Mar 2008, Lea GRIS wrote:
# Servir les pages xhtml avec le type MIME text/html # aux navigateurs qui ne comprennent pas le application/xhtml+xml
-- In memoriam Alan J. Flavell http://groups.google.com/groups/search?q=author:Alan.J.Flavell
SAM
Thibault Jouan a écrit :
On 2008-03-18, SAM wrote:
Thibault Jouan a écrit :
Comme ça il n'est pas nécessaire d'avoir un élément de plus dans la page, qui selon moi n'a rien à y faire d'un point de vue sémantique.
Pas très certain ... une adresse (avec son intitulé) pourrait être assimilée à une définition (qui fait partie des balises genre listes)
D'une manière générale je préfère éviter de modifier la structure du document pour ce qui concerne uniquement l'apparence. De même, sauf bonnes raisons j'évite les style="" en dur comme ceux que j'ai écrits au dessus :-)
c'est à dire que ce que j'ai compris : - on traite des fiches <- un block me semble OK - fiche avec image <- une img me semble OK - fiche avec adresse(s) <- une liste me semble OK (definition = super)
ce qui donnerait :
<div class='trombine'> <h2>Dupond>/h2> <img src="dupont.jpg" atl=""> <dl> <dt></dt> <dt>Adresse personnelle:</dt> <dd>2, rue de la Poupée qui tousse</dd> <dd>75007 Paris</dd> <dt>Adresse travail :</dt> <dd>56, rue du Lapin qui fume</dd> <dd>75007 Paris</dd> </dl> </div>
Bon ... on pourrait peut-être aller jusqu'à :
<ul id="trombine"> <li> <h2>Dupond</h2> <img src="dupont.jpg" atl=""> <dl> <dt></dt> <dt>Adresse personnelle:</dt> <dd>2, rue de la Poupée qui tousse</dd> <dd>75007 Paris</dd> <dt>Adresse travail :</dt> <dd>56, rue du Lapin qui fume</dd> <dd>75007 Paris</dd> </dl> </li> <li> <h2>Durand</h2> <img src="durand.jpg" atl=""> <dl> <dt></dt> <dt>Adresse personnelle:</dt> <dd>2, rue de la Momie qui tousse</dd> <dd>75007 Paris</dd> <dt>Adresse travail :</dt> <dd>56, rue du Zombi qui fume</dd> <dd>75007 Paris</dd> </dl> </li> </ul>
Mais là je ne suis pas certain que ce soit autorisé tout ce St Frusquin dans les LI.
Néanmoins Firefox n'a pas l'air de râler : <http://cjoint.com/data/dsrbmktVT2_flottage.htm> et ... ce n'est pas si mal avec ou sans CSS (pas regardé si IE ...)
-- sm
Thibault Jouan a écrit :
On 2008-03-18, SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:
Thibault Jouan a écrit :
Comme ça il n'est pas nécessaire d'avoir un élément de plus dans la
page, qui selon moi n'a rien à y faire d'un point de vue sémantique.
Pas très certain ... une adresse (avec son intitulé) pourrait être
assimilée à une définition (qui fait partie des balises genre listes)
D'une manière générale je préfère éviter de modifier la structure du
document pour ce qui concerne uniquement l'apparence. De même, sauf
bonnes raisons j'évite les style="" en dur comme ceux que j'ai écrits au
dessus :-)
c'est à dire que ce que j'ai compris :
- on traite des fiches <- un block me semble OK
- fiche avec image <- une img me semble OK
- fiche avec adresse(s) <- une liste me semble OK (definition = super)
ce qui donnerait :
<div class='trombine'>
<h2>Dupond>/h2>
<img src="dupont.jpg" atl="">
<dl>
<dt></dt>
<dt>Adresse personnelle:</dt>
<dd>2, rue de la Poupée qui tousse</dd>
<dd>75007 Paris</dd>
<dt>Adresse travail :</dt>
<dd>56, rue du Lapin qui fume</dd>
<dd>75007 Paris</dd>
</dl>
</div>
Bon ... on pourrait peut-être aller jusqu'à :
<ul id="trombine">
<li>
<h2>Dupond</h2>
<img src="dupont.jpg" atl="">
<dl>
<dt></dt>
<dt>Adresse personnelle:</dt>
<dd>2, rue de la Poupée qui tousse</dd>
<dd>75007 Paris</dd>
<dt>Adresse travail :</dt>
<dd>56, rue du Lapin qui fume</dd>
<dd>75007 Paris</dd>
</dl>
</li>
<li>
<h2>Durand</h2>
<img src="durand.jpg" atl="">
<dl>
<dt></dt>
<dt>Adresse personnelle:</dt>
<dd>2, rue de la Momie qui tousse</dd>
<dd>75007 Paris</dd>
<dt>Adresse travail :</dt>
<dd>56, rue du Zombi qui fume</dd>
<dd>75007 Paris</dd>
</dl>
</li>
</ul>
Mais là je ne suis pas certain que ce soit autorisé tout ce St Frusquin
dans les LI.
Néanmoins Firefox n'a pas l'air de râler :
<http://cjoint.com/data/dsrbmktVT2_flottage.htm>
et ... ce n'est pas si mal avec ou sans CSS
(pas regardé si IE ...)
Comme ça il n'est pas nécessaire d'avoir un élément de plus dans la page, qui selon moi n'a rien à y faire d'un point de vue sémantique.
Pas très certain ... une adresse (avec son intitulé) pourrait être assimilée à une définition (qui fait partie des balises genre listes)
D'une manière générale je préfère éviter de modifier la structure du document pour ce qui concerne uniquement l'apparence. De même, sauf bonnes raisons j'évite les style="" en dur comme ceux que j'ai écrits au dessus :-)
c'est à dire que ce que j'ai compris : - on traite des fiches <- un block me semble OK - fiche avec image <- une img me semble OK - fiche avec adresse(s) <- une liste me semble OK (definition = super)
ce qui donnerait :
<div class='trombine'> <h2>Dupond>/h2> <img src="dupont.jpg" atl=""> <dl> <dt></dt> <dt>Adresse personnelle:</dt> <dd>2, rue de la Poupée qui tousse</dd> <dd>75007 Paris</dd> <dt>Adresse travail :</dt> <dd>56, rue du Lapin qui fume</dd> <dd>75007 Paris</dd> </dl> </div>
Bon ... on pourrait peut-être aller jusqu'à :
<ul id="trombine"> <li> <h2>Dupond</h2> <img src="dupont.jpg" atl=""> <dl> <dt></dt> <dt>Adresse personnelle:</dt> <dd>2, rue de la Poupée qui tousse</dd> <dd>75007 Paris</dd> <dt>Adresse travail :</dt> <dd>56, rue du Lapin qui fume</dd> <dd>75007 Paris</dd> </dl> </li> <li> <h2>Durand</h2> <img src="durand.jpg" atl=""> <dl> <dt></dt> <dt>Adresse personnelle:</dt> <dd>2, rue de la Momie qui tousse</dd> <dd>75007 Paris</dd> <dt>Adresse travail :</dt> <dd>56, rue du Zombi qui fume</dd> <dd>75007 Paris</dd> </dl> </li> </ul>
Mais là je ne suis pas certain que ce soit autorisé tout ce St Frusquin dans les LI.
Néanmoins Firefox n'a pas l'air de râler : <http://cjoint.com/data/dsrbmktVT2_flottage.htm> et ... ce n'est pas si mal avec ou sans CSS (pas regardé si IE ...)
