https://ducamp.me/index.php?action=history&feed=atom&title=Bidouillage_de_bo%C3%AEtes
Bidouillage de boîtes - Historique des versions
2026-05-13T01:52:12Z
Historique des révisions pour cette page sur le wiki
MediaWiki 1.35.0
https://ducamp.me/index.php?title=Bidouillage_de_bo%C3%AEtes&diff=38278&oldid=prev
Xtof le 30 juillet 2022 à 02:49
2022-07-30T02:49:38Z
<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="fr">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Version précédente</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version du 30 juillet 2022 à 02:49</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >Ligne 1 :</td>
<td colspan="2" class="diff-lineno">Ligne 1 :</td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[Produis tes souvenirs]] (apprentissage [[CSS]]<del class="diffchange diffchange-inline"> 2001</del>)</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[Produis tes souvenirs]] (apprentissage [[CSS]]<ins class="diffchange diffchange-inline"> 2002-09-15</ins>)</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>(Fichier extrait d'une sauvegarde disque dur MyPassport [[43.01 IndieWeb]] > [[IndieWeb 2013]] > [[Bazar indieweb 2013]])</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>(Fichier extrait d'une sauvegarde disque dur MyPassport [[43.01 IndieWeb]] > [[IndieWeb 2013]] > [[Bazar indieweb 2013]])</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l5" >Ligne 5 :</td>
<td colspan="2" class="diff-lineno">Ligne 5 :</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{stub-fr}}</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{stub-fr}}</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>----</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>----</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
</table>
Xtof
https://ducamp.me/index.php?title=Bidouillage_de_bo%C3%AEtes&diff=38277&oldid=prev
Xtof : Page créée avec « Produis tes souvenirs (apprentissage CSS 2001) (Fichier extrait d'une sauvegarde disque dur MyPassport 43.01 IndieWeb > IndieWeb 2013 > Bazar indieweb 2… »
2022-07-30T02:47:50Z
<p>Page créée avec « <a href="/Produis_tes_souvenirs" class="mw-redirect" title="Produis tes souvenirs">Produis tes souvenirs</a> (apprentissage <a href="/CSS" title="CSS">CSS</a> 2001) (Fichier extrait d'une sauvegarde disque dur MyPassport <a href="/43.01_IndieWeb" title="43.01 IndieWeb">43.01 IndieWeb</a> > <a href="/index.php?title=IndieWeb_2013&action=edit&redlink=1" class="new" title="IndieWeb 2013 (page inexistante)">IndieWeb 2013</a> > Bazar indieweb 2… »</p>
<p><b>Nouvelle page</b></p><div>[[Produis tes souvenirs]] (apprentissage [[CSS]] 2001)<br />
(Fichier extrait d'une sauvegarde disque dur MyPassport [[43.01 IndieWeb]] > [[IndieWeb 2013]] > [[Bazar indieweb 2013]])<br />
<br />
Lien de référence : http://www.tantek.com/CSS/Examples/boxmodelhack.html<br />
<br />
{{stub-fr}}<br />
<br />
<br />
----<br />
<br />
<html><br />
<!DOCTYPE html><br />
<html lang="fr"><br />
<head><br />
<title>Bidouillage de Bo&icirc;tes (#BoxModelHack)</title><br />
<meta name="generator" content="BBEdit 9.6" /><br />
</head><br />
<body><br />
<--<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><br />
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br />
<meta name="generator" content="Fog Creek CityDesk 2.0.19" /><br />
<meta name="citydesk" content="68FBAEF9/62" /><br />
<title>Bidouillage de Boîtes - adaptation fr. par xtof</title><br />
<meta http-equiv="Content-Style-Type" content="text/css" /><br />
<meta http-equiv="Content-Language" content="fr" /><br />
<meta http-equiv="author" name="author" content="Tantek Celik." /><br />
<meta http-equiv="copyright" name="copyright" content="Modèle Boite : &copy; copyright 2001 by Tantek &Ccedil;elik. Tous droits réservés." /><br />
<style type="text/css" media="all">@import "BidouillageBoites.css";</style><br />
--><br />
</head><br />
<body><br />
<br />
<p class="ahem"><br />
<object class="ahem" type="text/html" data="javascript:'&lt;title&gt;'+document.title+'&lt;/title&gt;'"><br />
<big>SVP. <br />
<a href="http://www.webstandards.org/upgrade/" title="Campagne de Mise à Jour des Navigateurs."><br />
Mettez à jour</a> votre navigateur vers un navigateur qui supporte les standards du Web.<br />
</big><br />
</object><br />
</p><br />
<br />
<h1>Bidouillage de Boîtes</h1><br />
<br />
<div class="topbox"><br />
<h2>TopBox</h2><br />
<p><a href="http://www.tantek.com/CSS/Examples/boxmodelhack.html">lien<br />
original</a> (seul lien de référence) • ©<br />
copyright 2001 by Tantek Çelik. All rights reserved.</p><br />
<br />
<p>Adaptation (fr) par xtof pour auto-apprentissage laborieux des<br />
subtilités des CSS ;-). Merci Tantek.</p><br />
<br />
<p><span><img height="311" alt="Coucou ! Les boîtes de Lucie sont rondes et imbriquées. Cet exercice est pour moi un casse-tête : empiler des boîtes carrées et aligner une barre avec une colonne ? Que de mal<br />
à respecter le lien original...A+ tard" src="boites.gif" width="299" /></span></p><br />
<br />
<br />
<p>Ici un échantillon de div avec la class "topbox".</p><br />
<br />
<p>Une bordure de 20px, 30px d'espace autour de<br />
l'élément et 300px de large.</p><br />
<br />
<pre><br />
div.topbox { <br />
border:20px solid;<br />
padding:30px;<br />
background: #ffc;<br />
width:300px;<br />
}<br />
</pre><br />
<br />
<p>La largeur totale incluant les bordures et l'espace autour de<br />
l'élément devrait être de 400px.</p><br />
<br />
<blockquote><br />
<p>20+30+300+30+20 = 400</p><br />
</blockquote><br />
<br />
<p>Les agents utilisateurs qui <em>interprètent mal</em><br />
le modèle de boîte CSS1 en plaçant bordure et<br />
espacement autour de l'élément <em>à<br />
l'intérieur</em> de la largeur spécifiée<br />
devraient donner un résultat d'une largeur totale de<br />
seulement 300px, et une largeur de contenu de seulement<br />
200px.</p><br />
<br />
<blockquote><br />
<p>300-20-30-30-20 = 200</p><br />
</blockquote><br />
<br />
<p>Les barres rouges et bleues en dessous sont là pour la<br />
comparaison. Cette div (incluant ses bordures) devrait être<br />
aussi large que la barre bleue.</p><br />
</div><br />
<br />
<div class="width300">&nbsp;</div><br />
<div class="width400">&nbsp;</div><br />
<br />
<div class="content"><br />
<h2>Contenu</h2><br />
<br />
<p>Ici un échantillon de div avec la classe "content".</p><br />
<br />
<p>Cette div est "stylée" presque comme la div "topbox" :</p><br />
<br />
<pre><br />
div.content { <br />
border:20px solid;<br />
padding:30px;<br />
background: #ffc;<br />
}<br />
</pre><br />
<br />
<p>avec un ajout important. Il y a une seconde règle de<br />
style, qui prend le dessus d'un bogue de parsage CSS dans<br />
IE5/Windows et IE5.5/Windows, pour appliquer une largeur qui est<br />
ensuite outrepassée.</p><br />
<br />
<pre><br />
div.content { <br />
width:400px; <br />
voice-family: "\"}\""; <br />
voice-family:inherit;<br />
width:300px;<br />
} <br />
</pre><br />
<br />
<p>Cette div (comprenant ses bordures) devrait aussi être<br />
aussi large que la barre bleue, même dans IE5/Windows et<br />
IE5.5/Windows.</p><br />
<br />
<p>En plus, nous ajoutons une règle supplémentaire<br />
immédiatement suivie de la règle de style au<br />
dessus, pour aider les UAS qui supportent les sélecteurs<br />
CSS2 et le modèle de boîte CSS, mais ont le<br />
même bogue de parsage que IE5.x/Windows mentionné<br />
au-dessus. Je l'appelle la règle "sois joli avec Opera 5".<br />
Et soyez sûr de ne laisser aucun espace autour du '&gt;'.</p><br />
<br />
<pre><br />
html&gt;body .content {<br />
width:300px;<br />
} <br />
</pre><br />
<br />
<p><span><img height="311" alt="Coucou2 ! Cette photo de Lucie fait 299 pixels de large et se place ici à titre de test .A+ tard" src="boites.gif" width="299" /></span></p><br />
<br />
<br />
<p>Pour finir, notez que les UAs qui ont le bogue de parsage<br />
illustré par la valeur <code>"\"}\""</code>, pourrait<br />
potentiellement ignorer la prochaine règle, de telle<br />
manière que la règle "sois joli dans Opera 5" serve<br />
à aider ces parseurs errants "chopés" là<br />
où va la feuille de style.</p><br />
<br />
<p>Pour démontrer que le parsage des CSS des UAs peut<br />
recouvrer ce point, j'ai ajouté une règle<br />
supplémentaire juste après la<br />
précédente simplement pour clarifier.</p><br />
<br />
<pre><br />
p.ruletest { color: blue }<br />
</pre><br />
<br />
<p class="ruletest">Ce paragraphe a une <code>class="ruletest"</code><br />
et devrait ainsi être coloré en bleu. S'il est<br />
rouge, une règle d'avant (qui devrait avoir<br />
été outrepassée par la dernière) est<br />
en train de prendre un effet non attendu. Notez que cette<br />
dernière règle de style n'est pas<br />
nécessaire, et qu'elle est seulement ici pour illustrer<br />
que le bidouillage de modèle de boîte règle<br />
proprement le nettoyage.</p><br />
<br />
<br />
<br />
<h4>Validez les feuilles de style comme fichiers média indépendants</h4><br />
<p>03/09/2002 Jonathan Horn a noté que le validateur CSS du W3C renvoie des erreurs quand la propriété 'voice-family' est utilisée dans une 'feuille de style écran'.</p><br />
<br />
<p>Comme je le faisais remarquer <a href="http://www.mezzoblue.com/archives/2003/07/26/garden_and_c/#c000783">dans les commentaires</a> de <a href="http://www.mezzoblue.com/">Dave Shea's mezzoblue</a>, <br />
c'est une erreur du validateur W3C CSS. <br />
Le validateur devrait renvoyer un message d'alerte, pas une erreur, quand les propriétés qui ne sont pas supportées par un médium particulier sont utilisées, et cela a été rendu compte au W3C :<br />
</p><br />
<ul><br />
<li><a href="http://lists.w3.org/Archives/Public/www-validator-css/2001Jul/0086.html"><br />
http://lists.w3.org/Archives/Public/www-validator-css/2001Jul/0086.html</a><br />
</li><br />
<li><a href="http://lists.w3.org/Archives/Public/www-validator-css/2001Oct/0070.html"><br />
http://lists.w3.org/Archives/Public/www-validator-css/2001Oct/0070.html</a><br />
</li><br />
</ul><br />
<p><br />
Mon conseil : validez votre feuille de style comme un fichier média indépendant, aussi vous saurez que vous utilisez une CSS <em>valide,</em> et ensuite l'importerez à l'intérieur d'un élément média dépendant aussi bien que nécessaire.<br />
</p><br />
<br />
<h3 id="addendum">Addenda</h3><br />
<p>20020404. Prerit Bhakta a remarqu&eacute; que si vous<br />
ins&eacute;rez le prologue ?xml :</p><br />
<br />
<pre><br />
&lt;?xml version="1.0"?&gt;<br />
</pre><br />
<br />
<p>IE6/Windows utilise ensuite le mod&egrave;le de bo&icirc;te<br />
avec une bizarrerie de caract&egrave;re.</p><br />
<br />
<p>Depuis que le <a<br />
href="http://www.tantek.com/XHTML/Test/minimal.html#withorwithoutxmlprolog"><br />
prologue ?xml n'est pas n&eacute;cessaire</a>, je recommande de<br />
simplement l'omettre.</p><br />
</div><br />
<br />
<br />
<br />
<p class="valid"><br />
<a title="Le Service de Validation du W3C Validation a validé cette page comme XHTML 1.0 Strict" href="http://validator.w3.org/check/referer"><object class="valid" type="image/png" data="http://www.w3.org/Icons/valid-xhtml10"><br />
Valide XHTML 1.0</object></a><br />
<br />
<a title="Le service de validation du W3C CSS a validé cette page comme CSS valide !" href="http://jigsaw.w3.org/css-validator/check/referer"><object class="valid" type="image/gif" data="http://jigsaw.w3.org/css-validator/images/vcss.gif"><br />
CSS Valide.</object></a><br />
<br />
</p><br />
<!--<br />
<div class="contact">dimanche 15 09 2002 <script type="text/javascript"><br />
var site="s10elanceur"<br />
</script><br />
<br />
<script type="text/javascript"<br />
src="http://s10.sitemeter.com/js/counter.js?site=s10elanceur"><br />
</script><br />
<br />
<br />
<a href="http://s10.sitemeter.com/stats.asp?site=s10elanceur"><img alt="site meter"<br />
src="http://s10.sitemeter.com/meter.asp?site=s10elanceur" /></a> <!-- copyright (c)2002 site meter --><br />
<!--webbot bot="htmlmarkup" endspan --> <a href="http://www.elanceur.org/jason/Articles/FeuilleStyleMarkNewHouse.html">Style • Structure • Standards en Francophonie...</a> • <a href="mailto:christophe@elanceur.org">christophe@elanceur.org</a></div><br />
</body></html><br />
--><br />
</body><br />
</html></div>
Xtof