Le modèle Clr est identique au modèle anglophone en:template:-.
Il est ajouté pour séparer une section supérieure contenant des objets flottants (images, boîtes) de la section suivante d'un article.
Avant : le titre de section et le texte sont coincés entre l'image et la fiche descriptive.
Ajout de {{Clr|left}} : le titre de section et le texte se reportent sous l'image située à gauche. Mais pas sous la fiche descriptive qui est à droite.
Ajout de {{Clr}} : le titre de section et le texte se reportent plus bas que l'image de gauche et la fiche descriptive de droite.
Ajout de {{Saut|200px}} : le titre de section et le texte se décalent seulement plus bas de 200 pixels (exemple), sur le côté de l'image.
Cliquez sur une vignette pour l’agrandir.
Le modèle Clear (Modèle:Clear) est une variante qui ajoute une barre horizontale.
Exemple : section 1
Marc & Nils (2004)
cette image n'est suivie ni d'un Clr ni d'un Clear...
Exemple : section 2
...et la section 2 sera donc malencontreusement collée à la section 1. Heureusement, la section 2 se termine par...
{{Clr}}
Exemple : section 3
Marc & Nils (2004)
...en sorte que la section 3 est mieux séparée. Elle se termine par...
{{Clear}}
Exemple : section 4
...en sorte qu'une barre horizontale précède la section 4.
Attention, l'utilisation de ce modèle peut perturber l'affichage des pages ([1]
Sur mon mediawiki, c'est le cas. Pour y remédier, il faudrait changer le statut "float" du panneau de navigation, mais je ne sais pas comment faire (changer une classe dans css ? dans monobook.php ?)
Suite (dans les idées) : si quelqu'un ou quelqu'une qui a le droit de modifier la page lit ce messsage, voici ce que l'on pourrait ajouter :
[[ar:قالب:تحديد]]
[[bg:Шаблон:Clear]]
[[en:Template:Clear]]
[[es:Plantilla:Clear]]
[[is:Snið:Ryðja]]
[[ia:Patrono:Clear]]
[[it:Template:Clear]]
[[ja:Template:Clear]]
[[vi:Tiêu bản:Clear]]
[[fi:Malline:Clear]]
[[no:mal:Clear]]
[[pl:Szablon:Clear]]
[[pt:Predefinição:Limpar]]
[[sv:Mall:Clear]]
[[zh:Template:Clear]]
Merci, --Wikinade (d) 2 avril 2009 à 12:47 (CEST)[répondre]
Non, la syntaxe <div /> est une syntaxe wiki, et non du HTML (même si elle emprunte la même forme). Mediawiki produit le code HTML final, avec les deux balises ouvrante et fermante. Tout va bien. --Lgd (d) 3 avril 2009 à 07:55 (CEST)[répondre]
Pas d'accord ! L'écriture avec un / n'est permise QUE si le document est analysé à XHTML. Le site a beau être écrit en XHTML, rien ne garantit que le navigateur utilise un parseur XML. S'il utilise un parseur SGML ou HTML, le div n'est pas fermé (car le / n'est pas reconnu comme un terminateur, et le div se prolonge donc après, avec un effet de bord sur les fermetures suivantes de div englobants, qui peuvent alors se fermer trop bas quand le navigateur va tenter de rajouter implicitement 'à la fin de tous les blocs, des fermetures implicites.)
Comme la fermeture explicite du div est obligatoire (le / joue ce rôle en XML/XHTML, mais pas en SGML/HTML...), il ne reste qu'une solution :
Bref effectivement, il ne faut pas utiliser la syntaxe abrégée façon XML, car ce n'est pas compatible avec tous les navigateurs.
De plus, un autre problème apparait dans IE6: un div, même entièrement vide a une hauteur minimale de (1em)*(line-height). Pour que ce clear ait une hauteur effectivement 0 (comme en XHTML ou HTML5), il faudrait lui ajouter "line-height:0". Mais encore, ça ne suffit pas à certains navigateurs. La solution serait alors d'inclure une image transparente de 1 pixel dedans:
Et dans ce cas la hauteur sera de 1 pixel minimum (il n'y a pas de moyen portable pour rendre cette hauteur égale à 0: si on cache l'image avec display:none, le div devient vide et reprend sa taille minimale de (1em)*(line-height).
On présuppose que pusique le site est conforme XHTML, il va être traité avec un parseur XML dans les navigateurs. Ce qui n'est pas le cas si le navigateur pour une raison ou une aute bascule en "mode de compatibilité" (ou Quirks mode) par exemple avec IE qui alors n'utilise plus son parseur XML, mais utilise un parseur SGML pour construire le DOM HTML. La mise en page alors s'en ressent car les blocs ne sont plus encapsulés correctement.
Faites le test suivant sous IE, en cliquant sur l'icône du "mode de compatibilité" affichée à côté de la barre d'adresse. Vous verrez l'effet du parsing SGML au lieu de XML de notre site XHTML. Le DOM obtenu est alors incorrect car le div ne se ferme pas à l'endroit attendu... Ce sera encore plus vrai avec les navigateurs HTML5 (la plupart ne supportent pas le parseur XML et sont revenus au parseur SGML pour des raisons de performance (car le parseur XML suppose d'abord de vérifier que le XML complet de la page est correct. S'il ne l'est pas, la page est réanalysée depuis le début (à condition qu'elle soit entièrement chargée, non compris les ressources externes comme images, scripts et feuiles CSS). L'affichage progressif de la page est donc désactivé en XML.
Hors si on revient au parseur SGML au lieu de XML, le code validé XHTML du site ne sert plus: il sera analysé en HTML selon les règles de formatage du SGML (avec fermeture optionelle de certaines balises, et fermeture obligatoire d'autres (mais sans reconnaissance de la fermeture abrégée "/>" qui en SGML n'est pas supportée, le "/" ayant un autre rôle. pour indiquer la fin de la balise d'ouverture, le > fait alors partie du texte, jusqu'au prochain ">" ou "/". On obtient alors un ">" visible, et le div n'est pas fermé...
Les parseurs HTML modernes non basés sur les règles SGML en revanche vont abandonner cette règle de parsing SGML, et reconnaître la fermeture abrégée "/>" pour une balise sans contenu.
On ne peut employer la syntaxe abrégée QUE pour les éléments qui ne peuvent jamais avoir de contenu (uniquement : "image", "hr", "br", "meta", "link") et dans lesquel le "/" n'est pas interprété comme la fin de la balise d'ouverture mais comme un caractère parasite, un pseudo-attribut... les mêmes élements ne devant aussi jamais utiliser la syntaxe longue permise en XML/XHTML (avec deux balises).
Il se trouve justement que MediaWiki ne transforme pas (ou plus ?) un "<div />" en "<div></div>" (il le laisse inchangé car c'est valide en XHTML seulement, mais pas en HTML ou SGML) : cela se produit dans certaines pages où il oublie de le faire...
Je n'arrive pas à configurer mediawiki pour qu'il transforme le <div/> en <div></div>, ça ne fonctionne pas avec une installation par défaut et pas non plus avec Tidy, je ne trouve pas d'où vient ce changement qui est pourtant fait sur wikipédia. Du coup je ne peux pas reprendre le contenu des très nombreux articles qui utilisent ce modèle car toute la mise en page est décalée. Si quelqu'un a une idée... sinon je compte changer le modèle, de toutes façons je ne vois pas trop l'intérêt d'utiliser cette syntaxe incompatible avec de nombreux doctypes et qui empêche de reprendre facilement le contenu. –Akeron(d)29 mars 2012 à 17:18 (CEST)[répondre]
J'ai finalement trouvé comment faire : il ne faut pas utiliser le Tidy par défaut mais le compiler à partir du cvs en suivant ces instructions, après mettre $wgUseTidy=true; $wgTidyBin='/chemin/vers/tidy'; (en remplaçant avec le nouveau chemin) dans LocalSettings.php et ça marche, les <div style="clear:both"/> sont transformés en <div style="clear:both"></div>. –Akeron(d)29 mars 2012 à 22:12 (CEST)[répondre]
Ah... C'est bon à savoir en effet . C'est vraiment curieux, ça ne m'évoque aucun souvenir lors de précédentes installations, mais c'était il y a quelques versions... Cordialement, --Lgd (d) 29 mars 2012 à 22:18 (CEST)[répondre]
Je ne connais pas ce modèle, j'ai mis des div directement dans le texte pour faire comme une image [2] mais il y a peut-être une manière plus propre de le faire. –Akéron(d)28 août 2015 à 15:14 (CEST)[répondre]
Si on utilise le <div class="thumb tright"><div class="thumbinner"> l'image se met à la bonne place, mais avec un cadre disgracieux. Comment éviter cela ? --Io Herodotus (discuter) 27 mai 2018 à 07:18 (CEST)[répondre]
