[Résolu] Résumé display/position/float

Bonsoir,

Je débute doucement avec les CSS et avant d'aller plus loin, je voudrais que vous confirmiez/infirmiez ce que je pense avoir compris sur le positionnement, avec mes mots à moi. Les tutos du site sont très bons, mais quelques doutes subsistent.

Je numérote pour faciliter vos remarques :

1. La propriété display définit le comportement d'un élément par rapport à ses frères (dans le flux du texte ou pas, occupation de toute la largeur ou adaptation au contenu...)
2. On distingue 2 grandes familles d'éléments : rendu bloc et en ligne.
3. Rendu bloc semble rassembler les display block, table, list-item (block + puce) et sûrement d'autres table-*
4. Rendu en ligne semble rassembler les display inline et inline-block (quoi que ce dernier est souvent cité à part)
5. Je placerais volontier table-cell dans inline, vu qu'il n'introduit pas de saut de ligne. Ou alors carrément à part.

6. La propriété position détermine la façon de calculer la position de l'élément
* static : suit le flux (valeur par défaut)
* relative : décalage possible par rapport à static, mais "réservation" de l'emplacement initial (sans décalage)
* absolute : par rapport au premier parent non-static, souvent un élément en relative sans décalage pour ne rien casser, ou body à défaut

7. La propriété float n'est pas vraiment prévue pour du positionnement mais faute de support complet de display, on fait avec (j'ai lu ça récemment mais j'ai oublié où et je n'ai pas mis la page en favori ). Pour le fonctionnement de float, je pense avoir compris donc je n'ai pas d'autres remarques (faut dire que c'est pas mal rabâché par ici)

Enfin, quelques petites précisions sur display:table-* :
8. display:table: l'élément casse le flux du texte (saut de ligne avant et après) mais n'occupe que la largeur nécessaire au contenu. Pour ce point, c'est juste qu'au final, quand on lit dans l'autre sens (effet produit -> propriété), il n'y a pas trop de lien entre le comportement obtenu et les tables, donc je me dis que j'ai peut-être raté quelque chose.
9. display:table-cell semble se suffire à elle-même, alors faut-il ou y a-t-il un intérêt à retrouver une structure complète de tableau à 3 niveaux display:table > display: table-row > display: table-cell ? (encore une fois, doute sur l'effet produit par rapport au nom de la valeur)

Voila ce que je pense avoir compris, ou quelles sont mes interrogations pour l'instant, merci de me dire si j'ai bon ou si je dois me mettre au macramé

Bonne soirée
Modifié par Seven tears (03 Feb 2010 - 19:58)

Salut Seven tears et bienvenue,

globalement tu as bien compris (tant pis pour le macramé ) mais certaines de tes déclarations ne sont pas très claires.

Comme ça ne m'arrange pas de suivre ta numérotation voici d'abord 2 petites remarques :
* parler de 2 grandes familles de rendu "bloc" et "en-ligne" permet de simplifier les choses... mais c'est plus compliqué que cela. Du coup il n'est pas très utile de ne se référer qu'à ces 2 notions.
* la propriété css display permet de modifier le rendu par défaut d'un élément. On retrouve bien sûr block et inline mais il en existe beaucoup d'autres qui permettent des rendus particuliers. Par exemple display:table-cell permet d'utiliser la propriété vertical-align pour un centrage vertical ce qui ne fonctionnerait pas avec display:block

Je dirais qu'il te manque la lecture des tutos suivants (eh oui... encore de la lecture !) :
Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne.
Mise en page CSS avancée grâce à la propriété display.
Et peut-être le Guide de survie du positionnement CSS.

Bonne continuation.

Seven tears a écrit :
1. La propriété display définit le comportement d'un élément par rapport à ses frères (dans le flux du texte ou pas, occupation de toute la largeur ou adaptation au contenu...)

En fait en général ça définit le mode de calcul des dimensions et de la position de l'élément.
Dans certains cas c'est très dépendant des éléments frères (notamment avec display:table-cell), mais pas toujours.

Seven tears a écrit :
2. On distingue 2 grandes familles d'éléments : rendu bloc et en ligne.

C'est une simplification de HTML4 que l'on ne retrouve pas telle quelle en CSS2. Les notions d'élément de niveau bloc et d'élément de niveau en-ligne sont utiles, mais mieux vaut se pencher sur la propriété display, ses valeurs et les valeurs par défaut pour divers éléments, si on veut vraiment être précis. On peut alors oublier le regroupement de différentes valeurs de display dans telle oul telle catégorie (sans grand intérêt).

Du coup je zappe les points 3 à 5.

Rien à redire sur le 6.

Seven tears a écrit :
9. display:table-cell semble se suffire à elle-même, alors faut-il ou y a-t-il un intérêt à retrouver une structure complète de tableau à 3 niveaux display:table > display: table-row > display: table-cell ? (encore une fois, doute sur l'effet produit par rapport au nom de la valeur)

Si tu ne reproduis pas une structure complète et te contente, par exemple, de deux éléments frères adjacents en display:table-cell, le navigateur va ajouter des conteneurs virtuels (table et table-row) autour. Reproduire explicitement la structure complète n'est intéressant que si tu as besoin de styler ces conteneurs.

Bonjour et merci à tous les deux pour vos réponses

@Heyoan
J'ai bien lu les tutos, j'avais commencé par ceux-là
Le truc, c'est qu'il y a toujours des points sombres, ou pas expliqués comme on s'y attendrait.

Le point particulièrement gênant, c'est sur le raccourci bloc / en ligne. Je les mets volontairement en français pour faire le distingo avec block et inline, valeurs de display. Comme l'insinue Florent, ce n'est pas très précis, et en plus ça apporte une confusion avec les autres domaines : type block/inline quand on classe les éléments html, rendu bloc/en ligne, %block/%inline des dtd (dans une moindre mesure je vous l'accorde)

A la place de ce classement simpliste, connaitriez-vous une référence sur les valeurs de display et l'impact sur le rendu ? Par exemple :
block : l'élément
- casse le flux
- occupe toute la largeur dispo
- a des dimensions modifiables
- a des marges haute et basse
- ?

parce quand je lis sur sitepoint

sitepoint a écrit :
table makes the element behave like a table.

personnellement ça ne m'avance pas plus que ça

Bon, cela dit, on peut retrouver le comportement à grand renfort de tests persos, mais une référence serait un plus.


Une confusion supplémentaire sur bloc/en ligne. Sur le tuto Mise en page CSS avancée grâce à la propriété display, il est dit sur run-in :

le tuto a écrit :
* si l'élément suivant une boîte en enfilade est de type inline, la boîte en enfilade est rendue sous forme de bloc
* si l'élément suivant une boîte en enfilade est de type block, la boîte en enfilade est rendue sous forme d'élément en ligne et insérée au début de la boîte block immédiatement adjacente

Que ciblent ici "type inline" et "type block" ? Les valeurs de display ? La "computed value" ? Autre ?

Florent V a écrit :
Si tu ne reproduis pas une structure complète et te contente, par exemple, de deux éléments frères adjacents en display:table-cell, le navigateur va ajouter des conteneurs virtuels (table et table-row) autour. Reproduire explicitement la structure complète n'est intéressant que si tu as besoin de styler ces conteneurs.

Ah d'accord, c'est bon à savoir.

Merci encore et bonne journée

edit : les citations sans référence ne semblent pas prises en compte dans les messages
Modifié par Seven tears (03 Feb 2010 - 09:14)

Hello,

Seven tears a écrit :

7. La propriété float n'est pas vraiment prévue pour du positionnement mais faute de support complet de display, on fait avec (j'ai lu ça récemment mais j'ai oublié où et je n'ai pas mis la page en favori ).

J'ai dit ça récemment dans ce commentaire, mais tu parles peut-être d'une autre source.

Tiens, ton sujet me fait penser que ce serait peut-être une bonne idée de faire un article qui reprendrait tout ça proprement

Seven tears a écrit :

edit : les citations sans référence ne semblent pas prises en compte dans les messages

Oui c'est un bug récent venu de nulle part

Seven tears a écrit :
Que ciblent ici "type inline" et "type block" ? Les valeurs de display ?

Forcément les valeurs de display (par défaut ou spécifiée par les styles auteur), vu qu'on parle ici de CSS.

Reprenons:

1. En avril 1998, HTML 4.0 parle de Block-level and inline elements.

Voici une version française de HTML 4.01 à ce sujet:

HTML 4.01, traduction française a écrit :
Certains éléments HTML, qui peuvent apparaître dans l'élément BODY, sont dits être de niveau « bloc » [ndt. block-level] tandis que d'autres sont dits de niveau « en-ligne » [ndt. inline] (aussi connu comme sous le nom « niveau texte »). La distinction se fondent sur plusieurs notions :
- Le modèle de contenu. De manière générale, les éléments de bloc peuvent contenir des éléments en-ligne et d'autres éléments de bloc. Et de manière générale, les éléments en-ligne ne peuvent contenir que des données et d'autres éléments en-ligne. L'idée inhérente à cette distinction structurelle, c'est que les éléments de bloc créent des structures « plus grandes » que les éléments en-ligne.
- Le formatage. Par défaut, les éléments de bloc sont formatés différemment des éléments en-ligne. En général, les éléments de bloc commencent sur une nouvelle ligne, et non les éléments en-ligne. Pour des informations concernant les blancs, les sauts de ligne et le formatage des blocs, veuillez consulter la section sur le texte.
- La directionnalité. Pour des raisons techniques impliquant l'algorithme de texte bi-directionnel [UNICODE], les éléments de bloc diffèrent de ceux en-ligne par la manière dont ils héritent des informations de directionnalité. Pour les détails, voir la section sur l'héritage de la direction du texte.

2. En mai 1998, CSS2 devient une recommandation.

En fait, les deux specs ont été développées ou précisées en parallèle à cette époque. Historiquement, HTML s'occupait autant de sémantique que de mise en forme. Dans HTML 4, il en reste des traces, avec notamment des recommandations sur le rendu possible d'un élément donné.

Aujourd'hui, avec le support de CSS 2.1 dans les navigateurs modernes (dont IE8 qui a peut-être bien le support de CSS 2.1 le plus complet), la référence à garder en tête pour comprendre le rendu d'un élément c'est CSS 2.1, avec notamment la propriété display, mais également les propriétés position et float qui ont un impact, overflow aussi, ou encore table-layout (j'en oublie peut-être).

Si je reprends les paragraphes de HTML 4 sur les concepts de block/inline (qui ne correspondent pas nécessairement, de manière précise, à ce qu'on retrouve en CSS):
- la partie sur le modèle de contenu reste valable (mais on gardera à l'esprit que c'est une simplification);
- la partie sur le formatage a été supplantée par CSS2;
- pour la partie sur la directionnalité je sais pas trop, ça doit encore être valable mais CSS propose aussi des contrôles pour la directionnalité.

Raphael a écrit :
Tiens, ton sujet me fait penser que ce serait peut-être une bonne idée de faire un article qui reprendrait tout ça proprement

En fait il faudrait:
- oublier HTML4 un peu (à la réflexion, on s'en fiche de savoir qu'il y a un groupe d'éléments dans la DTD qui porte l'alias %block);
- réexpliquer précisément le modèle de boite CSS [CSS 2.1] [CSS 3] (en parlant éventuellement de box-sizing);
- présenter en détail les valeurs de display.
Mais ça ferait un truc énorme. Genre deux ou trois articles de fond.

@Raphael
C'est bien ton commentaire que j'avais lu, en effet

@Florent
Merci beaucoup pour cette réponse détaillée, ça éclaircit pas mal de choses.

Je vous remercie tous, je pense avoir obtenu les réponses qu'il me fallait. Je passe le sujet en "résolu" et retourne potasser les docs.

Bonne soirée et certainement à bientôt pour d'autres questions