Espaceurs de blocs - commentaires Espaceurs de blocs 2011-02-18T03:07:51Z http://romy.tetue.net/espaceurs-de-blocs#forum2665 2011-02-18T03:07:51Z <p>Merci pour vos commentaires éclairés, qui anticipent l'article suivant, dont je hâte donc la publication : <a href="http://romy.tetue.net/clearfix" class="">ClearFix</a>. Jeremie, puis-je t'y citer ?</p> Espaceurs de blocs 2011-02-18T00:16:37Z http://romy.tetue.net/espaceurs-de-blocs#forum2664 2011-02-18T00:16:37Z <p>Ah, merci mille fois @Jeremie. Grâce à ton carré bleu, je viens enfin de comprendre pourquoi <code>overflow:auto;</code> sur le conteneur n'est pas suffisant !</p> <p>Et du coup de comprendre à quoi servent les <code><br class='nettoyeur' /></code> de SPIP :)</p> Espaceurs de blocs 2011-02-16T15:31:49Z http://romy.tetue.net/espaceurs-de-blocs#forum2661 2011-02-16T15:31:49Z <p>Salut Thomas</p> <p>Oui, overflow:hidden est problématique dès que tu as des éléments qui « sortent » du block.</p> <p>J'ai fait quelques test sur le sujet (là : <a href="http://jeremie.patonnier.net/experiences/pseudo-elements/float.html" class="external external auto" rel="nofollow external">http://jeremie.patonnier.net/experiences/pseudo-elements/float.html</a>) et, pour moi, la meilleur technique reste le combo :after + zoom qui permet de se passer totalement de nettoyeurs « en dure » dans le code HTML.</p> Espaceurs de blocs 2011-02-15T21:21:44Z http://romy.tetue.net/espaceurs-de-blocs#forum2660 2011-02-15T21:21:44Z <p>Je suis grand adepte du br class="clear".<br class="manualbr" />Mais j'avoue que l'utilisation de la balise hr (qu'on utilise jamais) est vraiment encore plus simple. Merci !</p> Espaceurs de blocs 2011-02-15T17:06:46Z http://romy.tetue.net/espaceurs-de-blocs#forum2659 2011-02-15T17:06:46Z <p>Salut Jérémie !</p> <p>Quand le contexte le permet j'utilise la méthode :<br class="manualbr" /></p> <div class="precode"><pre dir="ltr" style="text-align: left;" class="css"><code>.INeedToBeCleared { overflow : hidden; zoom : 1; }</code></pre></div> <p><br class="manualbr" />Ça a l'avantage d'avoir le même comportement sur la plupart des navigateurs et de rétablir le flux à l'intérieur du parent sans ajouter de code HTML.</p> <p>Les conséquences dont tu parles sont surement l'interdiction des débordements. On peut s'attendre à rencontrer des bugs si le parent contient des éléments positionnés : menus déroulants, popin, tooltips, etc. <br class="manualbr" />De temps en temps je suis donc quand même obligé d'utiliser un bloc nettoyeur :)</p> <p>Bonne soirée,<br class="manualbr" />Thomas.</p> Espaceurs de blocs 2011-02-15T14:56:31Z http://romy.tetue.net/espaceurs-de-blocs#forum2658 2011-02-15T14:56:31Z <p>Une petite remarque en passant, si vous avez la chance de ne pas avoir à vous soucier de IE6 et 7 (ça viendra un jour) il est également possible d'utiliser le pseudo élément :after qui vous évitera d'avoir à rajouter des choses dans votre code HTML.</p> <div class="precode"><pre dir="ltr" style="text-align: left;" class="css"><code>.INeedToBeCleared:after { content : ""; display : block; height : 0; clear : both; }</code></pre></div> <p>Et il est aussi possible de résoudre ce « problème » dans IE6 et 7 sans avoir à recourir à un quelconque sur balisage HTML ;-) Il faut tout de même y faire un peu attention car cela reviens à donner le « hasLayout » à un élément, ce qui peut avoir des conséquences... mais globalement, ça marche très bien.</p> <div class="precode"><pre dir="ltr" style="text-align: left;" class="css"><code>.INeedToBeCleared { zoom : 1; }</code></pre></div> Espaceurs de blocs 2011-02-15T14:49:42Z http://romy.tetue.net/espaceurs-de-blocs#forum2657 2011-02-15T14:49:42Z <p>Personnellement, j'aime beaucoup le <code><hr /></code> qui ne sert qu'à ça...</p> Espaceurs de blocs 2011-02-15T11:44:53Z http://romy.tetue.net/espaceurs-de-blocs#forum2656 2011-02-15T11:44:53Z <p>Bonjour tetue !</p> <p>Très sympa cette historique sur le rétablissement de flux ! Je crois bien que je n'avais jamais vu une balise <br> avec une classe :)</p> <p>J'aime beaucoup la solution avec le <hr>. Parce que c'est une balise auto-fermante et que la sémantique me convient bien pour cette utilisation.</p> <p>Bonne journée,<br class="manualbr" />Thomas.</p>