5591 sujets

Sémantique web et HTML

Y aurait-il du relachement?

bonjour,

comme beaucoup d'entre vous, je m'efforce de respecter au mieux les règles et usages de codage pour les pages web et j'ai très souvent lu qu'on devait éviter de mettre des élément Html vides dans les pages.

Et là, en ayant consulté des tutoriels de grande qualité (tuto.com, grafikart, formationvideo.fr) je m'aperçois d'un usage décomplexé de l'élément vide <div class="clear"></div> avec .clear { clear:both; } pour "redresser" des flottants dans le bon chemin....

que pensez vous de cette pratique, qui après tout résous bien des problèmes?
Salut,

Pour ma part, j'évite autant que possible d'alourdir le code HTML d'éléments vides (que ce soit un div ou un br, comme on en trouve également pour le même effet) et applique la propriété clear ailleurs (ou recours au contexte de formatage, ou même à display: table-* si je ne veux pas de flottants).
lionel_css3 a écrit :

que pensez vous de cette pratique, qui après tout résous bien des problèmes?


Elle était bien utile quand on savait pas faire autrement (y'a 6 ou 7 ans).
Un petit article qui retrace les différentes méthodes pour couper le flux:
http://css-tricks.com/snippets/css/clear-fix/

Auparavant on utilisait la vieille méthode du div clear vide avant le fermeture du container, c'était pas top mais l'important c'était de gérer le flux et les marges. Vu comment ça cradosse le code je comprends que côté maintenance on les retrouve encore dans des sites.

Par-contre perso j'ai eu récemment quelques soucis avec la dernière méthode du display table quand j'utilise le :after ou :before pour gérer des ombrés arrondis. Faudrait se pencher dessus mais je pense cette méthode a ses limites, parfois on veut que le container reste un block
> un diapo que je trouve très sympa par Raphaël Goetter pour comprendre un peu la réflexion autour du table: http://fr.slideshare.net/goetter/vive-les-tableaux-de-mise-en-page
> tout ça a tendance à me rappeler des mauvais souvenirs du temps où m'apprenait à créer des sites à la fois en tableaux et en css2 pour pouvoir gérer les refontes & maintenances!! Smiley bawling C'était la mer.. la galère faut bien le dire (mais c'est vrai y'avait aussi des avantages comme le vertical-align center). Bon je remercie quand même le formateur car ça m'a servi et finalement on y revient.
Modifié par loddesign (13 Sep 2012 - 17:26)
heu, overflow, c'est pas mal et le clear sur un pseudo :after aussi ...

faut voir aussi toutes les subtilité possibles selon l'architecture HTML.Maintenant un div en clear dans un template gratos, ça simplifie la vie Smiley smile .

Inline-block + width est aussi une alternative a table et evite les éventuelles incompatibilités de display:table;/position:relative; pour un usage de position:absolute; ensuite.

CSS 2.1/3 sont plus fort et plus subtile qu'il n'y parait.

Cdt,
GC
et oui effectivement mon pb était là, ma div en relative et le :before en absolute dessous pour créer l' ombre arrondie, avec le display table version boilerplate bah t pas possib.. je me rends compte finalement y'a pas de solution miracle, le choix du clearfix est à adapter en fonction de ce qu'on fait mais décidément les tableaux ont un foutu comportement (hé hé dur de pas avoir de rancoeur!) j'aurais quand même tendance à revenir sur ce type de méthode:

.group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .group { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */
Bonjour,

Je trouve qu'en intégration web les solutions les plus subtiles sont souvent les pires, car moins éprouvées et surtout plus compliquées à maintenir par plusieurs intervenants différents. Sans aller jusqu'à dire qu'il faut les éviter, ça demande considération dans un projet où plusieurs personnes peuvent intervenir sur le code, au même moment ou successivement.

Dans la solution du DIV vide avec clear, moi ça ne me choque pas: elle compense son manque d'élégance par une robustesse de bon aloi. Smiley smile

En passant, on a aussi un article sur le sujet ici:
http://www.alsacreations.com/astuce/lire/7-depassement-flottants-css.html
Sujet clos
Aller à