Comment positionner les éléments en CSS ?

Bonjour,

C'est juste un détail, mais dans le tuto http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS, il est dit au sujet des éléments float :

a écrit :
L'élément est d'abord placé normallement dans le flux. Donc si un autre élement bloc est placé avant lui, l'élément flottant se positionnera en dessous; et si un élément bloc le suit, ce dernier sera placé dessous. Bref, le comportement classique du positionnement en flux
Ensuite l'élément qui a reçu la propriété float est "poussé" à gauche ou à droite de son conteneur.
Les éléments qui le suivent au sein du conteneur se placent alors autour de lui.

Si dans la dernière phrase soulignée en gras, on ne précise par « les éléments de rendu en-ligne », alors la phrase peut sembler en contradiction avec l'une des phrases précédentes.

Si je dis une bétise, je m'en excuse

Yellah, bonne journée
Modifié par hibou57 (05 Jul 2008 - 05:33)

Salut,

Je ne suis pas sur de comprendre ce que tu ne comprends pas, mais par défaut les éléments bloc s'empileront les uns sous les autres, et le comportement flottant permet qu'un bloc placé après l'élément flottant habille ce dernier. En espérant avoir pu éclairer ton doute.

Bonjour, bonjour,

En fait je me demandais s'il ne manquait pas quelque chose dans la phrase soulignée en gras.

hibou57 a écrit :
En fait je me demandais s'il ne manquait pas quelque chose dans la phrase soulignée en gras.

Au niveau de la syntaxe, non. Au niveau du sens, c'est à voir, mais ça me semble correct.

Florent V. a écrit :

Au niveau de la syntaxe, non. Au niveau du sens, c'est à voir, mais ça me semble correct.

Eh bien fait, quand on lis « Les éléments qui le suivent au sein du conteneur se placent alors autour de lui. », ça laisse penser que ce sont tous les éléments, mais normalement ce sont seulement les éléments qui ont un display:inline (et peut-être inline-block, je ne suis pas certain) qui coulent autour des floats.

Ce n'est pas ça ?

D'ailleur il est bien dit que si un élément bloc le suite, il passe en dessous.

J'espère que je ne donne pas l'impression de tirer par les cheveux, mais quand je cale sur un détail comme celui-ci, ça me met mal à l'aise et j'ai des doutes.
Modifié par hibou57 (09 Jul 2008 - 09:03)

Salut,

Un élément bloc passe au dessous, et c'est bien précisé au début de la phrase, lorsque, je cite : L'élément est d'abord placé normalement dans le flux.
Lorsque tu attribue un comportement flottant à un bloc, Les éléments qui le suivent au sein du conteneur se placent alors autour de lui. Les éléments inline vont très naturellement habiller l'élément flottant, quand aux éléments blocs, ils vont se disposer aux côté de l'élément flottant, si et seulement si, il y a suffisamment de place en largeur pour contenir les deux blocs !

Quand tu te poses ce genre de questions, le mieux est encore de faire une petite page html en 5mn et tester toi même, c'est encore le plus formateur.

Mikachu a écrit :
quand aux éléments blocs, ils vont se disposer aux côté de l'élément flottant

À vrai dire, non. À moins que ces éléments de type bloc ne forment un contexte de formatage (avec un overflow: auto ou overflow: hidden) ou aient le layout (IE uniquement).

Cf. par exemple: http://web.covertprestige.info/test/07-colonnes-flottantes-et-place-dans-le-flux.html

Il y a donc bien une imprécision dans cet article.

Salut,

Mikachu a écrit :
quand aux éléments blocs, ils vont se disposer aux côté de l'élément flottant

Pour compléter les explication de Florent, il n'y a que les éléments inline
(à l'intérieur du bloc aussi) ou du texte anonyme qui vont réellement entourer
le bloc flottant même si dans la pratique on se fait parfois facilement piéger
par ce type de considérations.
Modifié par Hermann (09 Jul 2008 - 16:49)