Tuto : Un design fluide avec trois colonnes (positionnement flottant)

Bonjour,
Ce tuto, très utile comme les autres , contient en "rappel" une affirmation tirée d'un autre tuto, qui est imprécise ou que je ne comprends pas:

a écrit :
Donc si un autre élément 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.

Il faudrait au minimum préciser dans quels cas l'élément bloc qui suit est placé dessous: car normalement, en raison justement du caractère flottant de la div (dans ce tuto on parle de divs), l'élément bloc suivant est placé autour, et non en dessous, me semble-t-il.
Je me trompe?
Modifié par Ph.Lestang (28 May 2007 - 06:41)

Salut

Ph.Lestang a écrit :
l'élément bloc suivant est placé autour, et non en dessous, me semble-t-il.

Il est placé dessous en terme de profondeur (en arrière plan si tu préfères), c'est son contenu qui lui va être décalé pour se placer "autour".
C'est ce que montre
l'exemple 1 : le div jaune sale est bien "sous" les éléments flottants, alors que son texte a été décalé.
a+

a écrit :
le div jaune sale est bien "sous" les éléments flottants, alors que son texte a été décalé.

Ah, je vois!
Mais s'il s'agit d'une deuxième div flottante du même côté? Il me semblait que même la couleur de fond ne commençait qu'à côté de la première? Donc qu'elle n'était pas "sous" l'autre?

En outre il me semble que le mot "dessous" est employé dans deux sens différents dans la phrase citée par le tuto... Au début il s'agit bien de "après", et non de "en dessous".
Modifié par Ph.Lestang (28 May 2007 - 07:29)

a écrit :
Mais s'il s'agit d'une deuxième div flottante du même côté?

Dans ce cas on n'est plus dans le cas d'un élément bloc du flux, ce 2ème div vient donc flotter à coté du premier flottant (ou dessous - verticalement - s'il n'a pas assez de place à coté).
Tu devrais te faire une page de test avec plusieurs flottants pour bien saisir le mécanisme. Et mets des bordures aux flottants, un background aux non-flottants, tu verras mieux les superpositions.

[ edit ]

a écrit :
En outre il me semble que le mot "dessous" est employé dans deux sens différents dans la phrase citée par le tuto... Au début il s'agit bien de "après", et non de "en dessous".

En effet, la 1ère note de l'encart peut porter à confusion. Faudra voir avec Florent (entre autres), peut-être parler de 1er plan/arrière-plan ?
Modifié par jeje (28 May 2007 - 07:37)

a écrit :
>Mais s'il s'agit d'une deuxième div flottante du même côté?
Dans ce cas on n'est plus dans le cas d'un élément bloc du flux

OK, mais donc sur ce point aussi l'encart (citant un tuto de 2005) est insuffisamment précis, puisqu'il parle sans autre précision "d'élément bloc qui suit":

Un élément div flottant est un élément bloc, non?

Il faudrait peut-être remplacer cette citation "ancienne" par un texte plus précis, mieux adapté au nouveau contexte !
Modifié par Ph.Lestang (28 May 2007 - 10:48)

jeje a écrit :
Tu devrais te faire une page de test avec plusieurs flottants pour bien saisir le mécanisme. Et mets des bordures aux flottants, un background aux non-flottants, tu verras mieux les superpositions.

Ce genre de page de test ? À visualiser dans un navigateur appliquant la transparence PNG (donc tout sauf IE 5-6 ).

jeje a écrit :
En effet, la 1ère note de l'encart peut porter à confusion. Faudra voir avec Florent (entre autres), peut-être parler de 1er plan/arrière-plan ?

Vu que la citation vient d'un article rédigé par Raphaël, je lui passe volontiers la main.

Florent V. a écrit :
Ce genre de page de test ?

Oui Je viens juste de voir ce lien dans le tuto, il n'était pas assez contrasté, pas souligné... (je pinaille ? )
Mais il vaut mieux que Ph.Lestang la construise lui-même, il en apprendra plus.

Florent V. a écrit :
Vu que la citation vient d'un article rédigé par Raphaël, je lui passe volontiers la main.

bien joué

Ph.Lestang a écrit :
Un élément div flottant est un élément bloc, non?

Je dirais que ça dépend de ce qu'on entend par "bloc"
- Non dans le sens où il est maintenant flottant donc hors du flux
- Oui dans le sens où div est nativement de type bloc
- Oui dans le sens où tout élément (bloc ou en-ligne) devenu flottant possède les caractéristiques des éléments de type bloc (redimensionnement...)