[RESOLU]Clear both : <hr/> ou <div> vide ?

Salut,

Finalement, dans le cas ou un float sort de son conteneur quand on agrandit la police ds le navigateur.

Quel est la difference/meilleur choix entre :

<div class="separateur"></div>

et

<hr class="separateur" />

auxquels on affecte :

.separateur{ clear: both; }	

La page en question
Merci de vos conseils.
Modifié par Hum (11 Jun 2006 - 21:35)

Les différences :
– au niveau de la logique du code, le HR (séparation) est plus logique qu'un DIV (conteneur), surtout quand le conteneur est vide ;
– au niveau de la flexibilité de mise en page, le DIV vide est plus flexible qu'un élément HR, qui a des marges incompressibles avec certains navigateurs (dont IE). Par contre, un div vide devrait avoir une hauteur de 0 pixels si on le lui a pas donné de style particulier (padding, margin, height…).

Sinon, je t'invite à envisager d'autres méthodes pour corriger les dépassements de flottants :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-3.html
Modifié par mpop (11 Jun 2006 - 15:11)

...informatif, rapide, et une source pour etre moins bete.


Merci beaucoup mpop,

Bonjour

Un <div> n'étant pas un vrai séparateur et le séparateur étant parfois difficile à styler, j'ai opté pour quelque chose du genre :

<div class="separator"><hr /></div>

<div class="line"><hr /></div>

div.separator hr, div.line hr {
	position: absolute;
	top: -999em;
	left: -999em;
}

div.separator {
	background: url(img/gradient1.png) left bottom repeat-x;
	clear: both;
	width: 100%;
	height: 9px;
}

div.line {
	background: url(img/line.png) left top repeat;
	clear: both;
	width: 433px;
	height: 1px;
	margin-bottom: 0.25em;
}

Salut,
...et moi qui croyais que les em n'étaient qu'une unité de police...

J'ai du mal a suivre entierement ton exemple Stephan, surtout son positionnement qui doit tout envoyer "hors zone visible" alors que des images en bg son attribuées (c'est precisemment là que je decroches),
et pourquoi deux hr ? pour un certain effet graphique visiblement?

Aurait tu un exemple en ligne ou c'est appliqué que je comprennes mieux...
Sinon je testerai pour piger.

Merci.

Bonjour

L'image est en background du <div>.
C'est le <hr /> qui est expédié « in a galaxy far away » .
Le <hr /> prend la relève lorsque CSS est désactivé.

Deux séparateurs parce qu'on peut vouloir deux styles de séparateurs dans une même page

Tu peux observer l'exemple en ligne : Les maladies mentales

Hello,

Hum a écrit :
Salut,

Finalement, dans le cas ou un float sort de son conteneur

Dans ce cas il est très possible qu'il s'agisse d'une question de contexte de formatage.

Le mieux est donc d'étudier cette question :

http://www.blog-and-blues.org/articles/Float%2C_clear_et_contextes_de_formatage

En fait tout le monde devrait étudier cette question...
Modifié par clb56 (12 Jun 2006 - 10:23)

Salut,

merci Stephan pour ton lien.

@clb56 : Je viens de bouquiner la page et quelques liens internes a celle ci, j'ai le sentiment d'avoir été eclairé, mais juste eclairé en fait, les explications finissent par me pommer avec ces histoires de layout...

Il me faudrait du "beaucoup plus vulgarisé".
C'est compliqué quand meme, avec ces histoires de j.s pour tester si ya le layout, c'est bien loin d'etre totalement clair pour moi, mais ça viendras ...

Merci à vous, j'ai déja solutionné mon probleme et ai quelques autres pistes a tester grace a vous...
Modifié par Hum (12 Jun 2006 - 19:11)

Hum a écrit :
les explications finissent par me pommer avec ces histoires de layout...

Oui c'est sur qu'il vaut mieux tester les contextes de formatage dans un premier temps en mettant entre parenthèse Internet Explorer.

Pour le haslayout tu as du remarquer qu'il y avait aussi un article et des tests là dessus dans blog and blues :

http://www.test.blog-and-blues.org/haslayout/trad_temp.html

http://www.test.blog-and-blues.org/haslayout/index.html

C'est au passage la deuxième production technique récente de Laurent Denis qui devrait être bookmarkée par tous les développeurs. Ne serait ce que du fait que cela demande effectivement des lectures répétées pour commencer à se sentir à l'aise

Mais il ne faut pas se décourager car le bénéfice est énorme.

J'ai bien vu les tests, mais j'ai pas compris comment l'attribuer ce fameux layout, a part en donnant une taille(h,w) a l'élement c'est bien ça?
Je suis la recommandation, je bookmark et je relis plus tard...

Merci à tous.
Modifié par Hum (12 Jun 2006 - 23:50)

clb56 a écrit :
Le mieux est donc d'étudier cette question :

http://www.blog-and-blues.org/articles/Float%2C_clear_et_contextes_de_formatage

En fait tout le monde devrait étudier cette question...

Il vaut mieux commencer par la notion de HasLayout, et l'expérimenter un peu, avant de se lancer dans ce cas particulier du contexte de formattage de bloc.
Pour info, j'avais lu cet article il y a trois mois environ, sans rien y comprendre. Depuis, je commence à me repérer dans les histoires de HasLayout, et j'ai tout compris en relisant l'article.

Si tu y a rien compris y'a trois mois, ça me fais me dire que c'est effectivement pointu.

Layout et Has layout, c'est pareil ?
Has layout c'est "qu'il l'a" (le layout)...?

Bien.

Hum a écrit :
Si tu y a rien compris y'a trois mois, ça me fais me dire que c'est effectivement pointu.

J'ai pas mal progressé en trois mois, en particulier sur cette question.

Hum a écrit :
Layout et Has layout, c'est pareil ?
Has layout c'est "qu'il l'a" (le layout)...?

Vi c'est ça.

mpop a écrit :

Il vaut mieux commencer par la notion de HasLayout, et l'expérimenter un peu, avant de se lancer dans ce cas particulier du contexte de formattage de bloc.

Je dirais non en fait, il y a une proximité dans la parution des deux articles mais il faut bien différencier les sujets.

Le contexte de formatage est un sujet à comprendre en lui même.

Le haslayout est un problème spécifique à IE (en tant que source de bug et en exagérant à peine de tous les bugs) qu'il faut résoudre.

La question du contexte de formatage devrait être abordée je pense de la manière la plus sereine qui soit et donc en mettant entre parenthèse (méthodologiquement parlant) la gestion des difficultés liées aux bug d'IE (dues aux haslayout).

si l'on si prend autrement il y a un vrai risque de confusion pour des débutants avec une équivalence :
Contexte de formatage <==> Résolution de bug IE/haslayout

Ce serait catastrophique :
Le premier terme est une question intéressante et essentielle des propriétés css.

Le second est un ver qui potentiellement peut pourrir n'importe quelle mise en oeuvre de propriété css.

clb56 a écrit :
La question du contexte de formatage devrait être abordée je pense de la manière la plus sereine qui soit et donc en mettant entre parenthèse (méthodologiquement parlant) la gestion des difficultés liées aux bug d'IE (dues aux haslayout).

Dans un but fort louable d'élévation de l'âme, tout à fait.
Mais le développeur moyen qui veut « un truc qui marche », il ne va rien comprendre aux solutions proposées (qui sont tout de même multiple : la solution générale, et le truc pour IE) s'il ne connaît pas déjà les bases du comportement d'IE dans ce cas là. Si l'on arrive sur cet article de Laurent Denis en pensant trouver une solution à un problème concret que l'on rencontre, et qu'on n'a pas cette base, c'est là qu'on risque de confondre HasLayout et contexte de formatage de bloc.

En tout cas moi c'est ce que ça m'avait fait il y a quelques mois

mpop a écrit :

Dans un but fort louable d'élévation de l'âme, tout à fait.

Mmmmm...

Ou tout simplement dans une invitation à envisager les css aussi dans une logique d'apprentissage et pas seulement avec le souci pragmatique de la production immédiate orientée Web marketing way of life
Ce n'est sans doute pas si compliqué, il ne s'agit que d'une question de méthode.

Cela dit il est vrai que le travail sur le haslayout est bien une propédeutique. Mais pas spécialement de la question du contexte de formatage mais de toutes mises en oeuvre de propriétés de style puisque par dessus le marché ça peut nous tomber dessus n'importe quand (si j'ai bien compris il n'y a pas de recension exhaustive possible a priori donc il faut vérifier et tester systématiquement, et surtout avoir toujours la chose à l'esprit).

C'est un sujet qui passionne a ce que je vois !

Pour ma part, débutant, y'a rien a confondre, l'ensemble de tout ce que j'ai pu lire reste plutot flou...

Mais c'est là que je me dis que si j'ai pas l'impression de voir de difference, c'est justement que je confond...

Bref, je relirai plus tard, je testerai un ou deux trucs...

Hum a écrit :
Pour ma part, débutant, y'a rien a confondre, l'ensemble de tout ce que j'ai pu lire reste plutot flou...

En fait pour pas s'y perdre c'est simple :
– soit tu t'attaques au concept de contexte de formattage de bloc (le nom fait peur mais en fait ça mord pas) et tu fermes les yeux au moment où ça parle des subtilités d'IE ;
– soit tu t'attaques d'abord au concept (et applications) du HasLayout, et tu n'abordes le contexte de formattage de bloc qu'après-coup.

C'est juste faire les deux de front qui est difficile. Mais c'est vrai que le contexte de formattage de bloc et le HasLayout sont deux choses séparées, et que comprendre le premier ne devrait pas demander une connaissance quelconque du deuxième… à condition de sauter le passage « Spécial IE ».

je relance ce topic, car j'ai le oucis avec IE qui me rajoute systématiquement sur la commande clear:both ce foutu padding.

J'ai bien étudié les différents liens du présent topic, mais personne ne donne de solutions clairs... comment diable doit on s'y prendre pour qu'IE rentre dans les clous ?

Bonsoir Toucouleur,

Ton message me semble hélas trop imprécis pour que quiconque puisse t'apporter une aide efficace.

Toucouleur a écrit :
je relance ce topic, car j'ai le oucis avec IE qui me rajoute systématiquement sur la commande clear:both ce foutu padding.

Je vois mal comment un navigateur peut affecter un padding à une propriété CSS. À un élément HTML, je veux bien, mais à une propriété CSS ?

Que désigne « la commande clear:both » dans ton cas ?
Quel est précisément le problème observé ?

Petit conseil :
– fournir le code incriminé (html + css) et une capture d'écran du rendu fautif ;
– alternativement, et c'est la solution qui a ma préférence, fournir une page de test en ligne en décrivant au préalable le problème observé.

On ne fait pas faire d'omelette sans fournir des œufs, n'est-ce pas ?
Modifié par mpop (21 Jul 2006 - 21:26)