Mado Posté 3 Septembre 2004 Posté 3 Septembre 2004 bijour quand on parle de flux c'est quoi exactement? c'est la façon dont est ecrite la page en html? l'ordre dans lequel on met les blocs? par exemple ca veut dire quoi ca? Le positionnement absolu « retire » totalement du flux le contenu concerné : sa position est déterminée par référence aux limites du conteneur. merci marie
Sebastien Posté 3 Septembre 2004 Posté 3 Septembre 2004 Le flux c'est la facon par defaut dont les éléments s'agencent, de gauche à droite et de haut en bas. Certaines propriétés permettent de sortir des éléments du flux c'est à dire de les positionner specifiquement. Mais les gourous du CSS saureont surement t'apporter une meilleure réponse que la mienne
Monique Posté 4 Septembre 2004 Posté 4 Septembre 2004 Bonjour, Le flux normal est le mode de positionnement par défaut des éléments d'une page Web. Ces éléments sont lus et interprétés dans l'ordre où ils se trouvent dans le code. Dans ce mode - les éléments de type block (div, hx, p, ul, pre, blockquote...) se placent verticalement, les uns en-dessous des autres - les éléments de type inline (span, a, img, q, cite...) se placent horizontalement, les uns à côté des autres. Le positionnement absolu ou le postionnement flottant sortent un élément du flux normal. Pour en savoir plus : - les 3 articles d'initiation au positionnement CSS sur Openweb - le billet CSS : Quel positionnement choisir ? du Blog Alsacreations
LaurentDenis Posté 4 Septembre 2004 Posté 4 Septembre 2004 (modifié) En bâclant ça schématiquement, et en regrettant de ne pas avoir le temps de mettre quelques petits dessins pour illustrer : A partir du code HTML, le moteur CSS du navigateur détermine un arbre du document, c'est à dire une structure hiérarchisée pyramidale où chaque élément, ou chaque portion de contenu, a un élément parent unique, et peut-être lui-même parent d'autres éléments. Au sommet, le "parent ultime" de l'ensemble est l'élément racine du document (concrètement <body> en HTML, <html> en XHTML). Chaque élément présent dans l'arbre du document génère une boîte CSS, qui peut être principalement: - une boîte bloc - ou une boîte en ligne. Cette boîte définit un conteneur pour ses éventuels éléments enfants. Les boîtes sont traitées grosso-modo selon l'ordre de leur apparition dans le code HTML. Chacune va se placer à l'écran en obéissant à un des 3 schémas de positionnement CSS : - le positionnement en flux, qui comprend principalement les éléments: *qui n'ont pas de propriété position, ce qui revient à dire position:static *qui ont une propriété position:relative - le positionnement flottant: les éléments qui ont une propriété float:left ou float:right. - le positionnement absolu: les éléments qui ont: * une propriété position: absolute * ou une propriété position fixed Dans le schéma de positionnement en flux, la place finale à l'écran d'une boîte est déterminée par sa nature de boîte bloc ou en ligne, et par l'interaction avec les boîtes avoisinantes : - les boîtes blocs se succèdent verticalement, séparées par leurs marges. Une boîte bloc "repousse la boîte suivante à la ligne" - les boîtes en ligne se succèdent horizontalement, et se fractionnent en boîtes en ligne empilées verticalement si elles ne disposent pas de la largeur suffisante. Une boîte en ligne "repousse la boîte en ligne suivante vers la droite" s'il y a assez de largeur disponible, vers le bas dans le cas contraire. Les éléments dotés d'une propriété position:relative sont des éléments en flux traités en deux temps : - la boîte est alors placée selon les règles du flux ci-dessus, - puis elle est décalée horizontalement et/ou verticalement à partir de cet emplacement. Dans le schéma de positionnement des flottants, la place finale à l'écran d'une boîte dépend beaucoup moins de la nature de la boîte (elle devient de toute façon une boîte bloc) : une boîte flottante est d'abord placée conformément au flux, puis elle est retirée de celui-ci pour être repoussée le plus loin possible vers la droite ou vers la gauche dans les limites du conteneur. Une boîte flottante ne "rejette plus à la ligne" les boîtes bloc qui viennent après elles dans l'arbre du document : celles-ci peuvent s'écouler à côté d'elle. Dans le schéma de positionnement absolu, la place finale d'une boîte ne dépend plus de sa nature originelle de boîte bloc ou en ligne, et n'interagit plus avec les autres boîtes du flux : la boîte dotée d'une propriété position:absolute ou position:fixed n'est pas d'abord placée dans le flux. Elle est immédiatement placée "arbitrairement" à une position donnée dans son conteneur, quitte à recouvrir d'autres boîtes ou à être recouverte par d'autres boîte. En conclusion : C'est le degré de liberté donnée à une boîte par rapport à sa nature bloc/en ligne et par rapport à l'action des autres boîtes qui différencie les 3 schémas de positionnement: - Dans le flux, une boîte se place selon sa nature de boîte bloc / en ligne, et en interaction complète avec les autres boîtes du flux; - Dans les flottants, une boîte se place d'abord selon le flux, mais l'interaction avec les autres boîtes est allégée, puisqu'elle autorise celles-ci à se placer à côté d'elle. - Dans le positionnement absolu, une boîte se place sans aucune interaction avec les autres boîtes. Elle est totalement libérée du flux. Il faut faire attention au mot position qui induit en erreur si on le prend au sens intuitif (un élément en position:relative n'est pas un élément positionnné). Il ne faudrait employer ce mot qu'avec le sens de "valeur de la propriété qui s'appelle "position". Modifié 5 Septembre 2004 par LaurentDenis
Mado Posté 4 Septembre 2004 Auteur Posté 4 Septembre 2004 merci a tous ca fait une semaine que j'etudie tout ca float, position absolue relative fixed, les probleme avec IE etc sur openweb et differentes sources, mais c'est pas evident quelques fois les termes employés mais c'est bon la je capte et merci Laurent et a tous pour vos explications franchement c'est trop top Marie
Raphael Posté 4 Septembre 2004 Posté 4 Septembre 2004 Effectivement, c'est le genre de résumé qui me paraît capital. La plupart des problèmes des débutants (et autres) provient de la mauvaise connaissance de ce concept, or je trouve qu'il est vraiment très (trop) résumé sur OpenWeb (et tous les autres sites d'explications CSS d'ailleurs). Ce n'est pas une critique d'OpenWeb mais je pense qu'une explication comme la tienne permettrait à tous de commencer sur d'excellentes bases. Si tu es d'accord, j'aimerais reprendre ces explications (en les reformulant bien-sûr), sur le tutoriel de positionnement d'Alsa. J'attends ton accord naturellement.
Raphael Posté 4 Septembre 2004 Posté 4 Septembre 2004 (modifié) Les éléments dotés d'une propriété position:relative sont des éléments en flux traités en deux temps :- la boîte est alors placée selon les règles du flux ci-dessus, - puis elle est décalée horizontalement et/ou verticalement à partir de cet emplacement. Cette position reste (pour moi en tout cas) toujours assez floue. En fait, si on se limite à ce que tu dis, cela revient exactement au même que les éléments dans le flux normal : eux aussi se placent selon les règles du flux, puis sont décalés horizontalement ou verticalement (selon les marges qu'on leur donne). La seule différence serait que le décalage de la position relative se fait à l'aide des propriétés top et left et non margin-top et margin-left. En fait, corrige-moi si je me trompe, mais le placement de l'élément en position relative dépend du dernier élément positionné avant lui, contrairement aux éléments dans le flux normal. Ce serait là la grosse (seule ?) différence entre un élément en position relative et un élément dans le flux normal. Par contre pour les float et les positions absolues, l'élément ne tient plus compte de son conteneur (il dépasse par exemple, d'où l'une des utilités du clear pour les flottants). En clair, comme le dit Eric Meyer, un document (body) qui ne contient que des éléments positionnés en absolu n'a pas de dimension ! Je suis en-train de faire différents petits tests à ce sujet et je me demande comment interprêter ce comportement : #conteneur {background: yellow;width: 30em;/* pas de hauteur définie pour le conteneur */}#bloc {width: 10em;height: 20em;background: green;float: left;} - Sur IE : le conteneur s'allonge en fonction du bloc flottant contenu - Sur Gecko : le flottant "sort" du conteneur. Si, comme tu le dis, le flottant sort du flux, dans ce cas le comportement Gecko est normal et IE aurait tort. Est-ce juste ? Modifié 4 Septembre 2004 par Sibelius
LaurentDenis Posté 5 Septembre 2004 Posté 5 Septembre 2004 (modifié) [edit] C'est tellement long que je mets des "En bref" en gras pour les gens pressés [/edit] Hum... Je crois qu'une bonne partie de tes question sont liées à la distinction à faire entre : - les schémas de positionnement : "placer" un élément, ce qui est dans un certain nombre de cas indépendant de ses dimensions. - le calcul des hauteurs et des marges : une fois placé, un élément a une certaine hauteur qui interviendra dans le calcul des dimensions de son conteneur, et dans le placement d'autres éléments qui le suivent dans l'abre du document. Un rappel pour ce qui suit (ce n'un qu'un des cas de figures du calcul des dimensions, mais c'est le plus fréquent, et celui qui intervient dans les questions ci-dessous): 10.6 Le calcul des hauteurs et des marges[...] 10.6.3 Les éléments de type bloc non remplacés dans un flux normal et éléments flottants non remplacés [...] Seuls les enfants dans un flux normal sont pris en compte (c.à.d. les boîtes des éléments flottants et celles des éléments en position absolue sont ignorées, les boîtes des éléments en position relative sont considérées sans leur décalage). http://www.w3.org/TR/REC-CSS2/visudet.html#q17 A partir de là : [A propos de la position relative] En fait, si on se limite à ce que tu dis, cela revient exactement au même que les éléments dans le flux normal : eux aussi se placent selon les règles du flux, puis sont décalés horizontalement ou verticalement (selon les marges qu'on leur donne). La seule différence serait que le décalage de la position relative se fait à l'aide des propriétés top et left et non margin-top et margin-left. Non... et oui un peu : - Oui, un élément en position relative reste un élément en flux, et les comportements sont donc effectivement très proches. - Mais un élément en flux n'est pas placé, "puis" décalé selon sa marge : il est placé en fonction de ses marges, (avec fusion des marges verticales des boîtes blocs), et agit avec ses marges sur le placement de l'élément en flux qui le suit. - alors que le décalage d'un élément en position relative, après son placement, n'agit plus sur le placement de l'élément qui le suit. Prenons les deux exemples suivants : span {margin-left: -40px;}<p>Exemple de <span>position relative</span></p> et span {position: relative;left: -40px;}<p>Exemple de <span>position relative</span></p> Le résultat est trompeusement identique, en effet : dans les deux cas, les mots "position relative" sont décalés vers la gauche et recouvrent les mots qui précèdent. Mais le mécanisme est en réalité bien différent. Il suffit d'ajouter du contenu pour s'en apercevoir : Exemple de <span>position relative</span> et encore du contenu Cette fois, on voit bien la différence : - Quand les éléments sont placés uniquement en flux, le "et encore du contenu" est placé immédiatement à côté du contenu du span, car il l'a suivi dans son margin-left: -40px : les élément sont placés en fonction de leurs marges respectives; - Quand le span est placé en position relative, le "et encore du contenu" est placé exactement comme si le span n'avait pas subit son décalage vers la gauche (il y a un espace de 40px entre les deux) : la position relative du span n'a aucune influence sur le placement des éléments qui le suivent. Dans le même ordre d'idée, une position relative du type top: -40px permet de décaler le span vers le haut indépendamment de son bloc conteneur, ce qu'une marge top négative ne permettrait pas de faire. En bref: Un élément en flux+position relative est: - placé normalement et c'est ce placement qui influera sur le placement à l'écran des éléments précédents/suivants. - puis décalé horizontalement/verticalement, et ce décalage n'a pas d'influence sur le placement à l'écran des éléments précédents/suivants. En fait, corrige-moi si je me trompe, mais le placement de l'élément en position relative dépend du dernier élément positionné avant lui, contrairement aux éléments dans le flux normal.Ce serait là la grosse (seule ?) différence entre un élément en position relative et un élément dans le flux normal. Heu... Ce serait plutôt le contraire : - Dans les deux cas, les éléments en flux normal/en flux+relative se placent en fonction de l'élément en flux/flottant précédent... - Mais le "décalage" de l'élément en position relative, qui intervient après le placement en flux, et qui donne le placement final, est totalement indifférent à l'élément qui le précède (il peut le recouvrir, voir les exemples précédents) Par contre pour les float et les positions absolues, l'élément ne tient plus compte de son conteneur (il dépasse par exemple, d'où l'une des utilités du clear pour les flottants). Hum... le raccourci est un peu rapide : ne mélangeons pas "placer un élément dans un conteneur" et "calculer les dimensions du conteneur" (voir la citation de CSS2 en début de post) Pour les éléments en position absolue, l'élément tient compte de son conteneur pour se placer : c'est celui-ci qui sert de référence aux valeurs des propriétés top, left, etc. En revanche, comme l'élément en position absolue est retiré du flux, il n'intervient plus dans le calcul de la hauteur/largeur de son conteneur... ce qui peut effectivement le faire "dépasser" en bas et/ou à droite de celui-ci, voir le faire sortir complètement. Il en est de même d'un élément flottant : - il se place le plus à gauche/droite possible dans son conteneur, donc en référence à celui-ci. - mais comme il autorise les éléments qui le suivent à se placer à côté de lui au lieu de les "rejetter à la ligne", il est soustrait du calcul de la hauteur du conteneur, d'où les dépassements que l'on évite avec la propriété clear. En bref : un élément positionné se place toujours en fonction des limites de son conteneur, mais ensuite, il n'intervient pas toujours dans le calcul des dimensions de celui-ci. En clair, comme le dit Eric Meyer, un document (body) qui ne contient que des éléments positionnés en absolu n'a pas de dimension ! Oui. En bref : un conteneur en flux ne tient pas compte de ses enfants positionnés (float, position absolute, fixed et relative) pour établir ses dimensions... (Au passage, le body est obligatoirement en flux en HTML, mais pas en XHTML. Et ca devient beaucoup plus amusant si le conteneur est lui-même positionné, car CSS2 n'est pas assez précise sur le sujet et autorise plusieurs interprétations possibles... Mais bon, on en reparlera une autre fois ) Je suis en-train de faire différents petits tests à ce sujet et je me demande comment interprêter ce comportement : #conteneur {background: yellow;width: 30em;/* pas de hauteur définie pour le conteneur */}#bloc {width: 10em;height: 20em;background: green;float: left;} - Sur IE : le conteneur s'allonge en fonction du bloc flottant contenu - Sur Gecko : le flottant "sort" du conteneur. Si, comme tu le dis, le flottant sort du flux, dans ce cas le comportement Gecko est normal et IE aurait tort. Est-ce juste ? Tout à fait : le flottant sort du calcul de la hauteur. Mais ton test doit prendre garde à différencier les éléments concernés : les boîtes blocs/en ligne/anonymes/remplacées/non remplacées ne se comporteront pas de la même façon du point de vue du calcul des dimensions. Ceci risque de te compliquer l'interprétation de tes résultats. Le mieux et le plus simple pour explorer ces mécanismes est de tester sur des boîtes blocs non anonymes et non remplacées (des paragraphes et des spans). En bref : il est préférable de tester les positionnements et les dimensionnements CSS sur des paragraphes et des span que sans contenu (avec juste des couleurs, des hauteurs et des largeurs) ou juste du contenu anonyme (le texte mis dans une div) : c'est en effet concrètement le mode de rendu le plus courant dans les documents réels, et les autres types de contenu ont des comportements très spécifiques. Modifié 5 Septembre 2004 par LaurentDenis
LaurentDenis Posté 5 Septembre 2004 Posté 5 Septembre 2004 (modifié) Je me permets de répondre à Sibelius ici plutôt qu'en privé, pour éclaircir les choses sur mes articles d'OpenWeb souvent cités ici, et dire clairement qu'en ce qui me concerne, tout ceci ne constitue que des matériaux librement utilisables pour les améliorer. La plupart des problèmes des débutants (et autres) provient de la mauvaise connaissance de ce concept, or je trouve qu'il est vraiment très (trop) résumé sur OpenWeb (et tous les autres sites d'explications CSS d'ailleurs). Ce n'est pas une critique d'OpenWeb mais je pense qu'une explication comme la tienne permettrait à tous de commencer sur d'excellentes bases. C'est une très bonne critique, au contraire. Ma série d'articles sur le positionnement/les dimensions dans OpenWeb a été écrite il y a largement plus d'un an, sur des premiers jets beaucoup plus anciens, et commence à être très datée (par exemple, sur les flottant et clear ou sur le modèle de boîte). Et j'avoue franchement que je ne voyais pas bien, à ce moment là, ce qui posait précisément des problèmes à beaucoup de gens dans le système CSS... parce qu'il y avait encore peu de gens qui s'en servaient Elle aurait besoin d'une refonte complète, en tout cas. Celle-ci est sur mon interminable "todo list" personnelle, mais si quelqu'un veut le faire plus rapidement pour le publier où il veut, ou bien y contribuer pour faire bouger l'auteur, ce serait merveilleux Si tu es d'accord, j'aimerais reprendre ces explications (en les reformulant bien-sûr), sur le tutoriel de positionnement d'Alsa. J'attends ton accord naturellement. La dernière chose sur laquelle je revendiquerai des droits exclusifs, ce sont bien mes maladroites tentatives d'explication ! A chacun d'en faire ce qu'il souhaite, s'il peut en tirer quelque-chose, avec ou sans reformulation. Cela dit, je pense qu'un article intéressant pourrait effectivement sortir de ce sujet, en réorganisant plus rigoureusement ce qui s'y dit, et en l'illustrant. J'ai quelque-chose en train sur le sujet depuis quelques temps, mais comme j'avance à un rythme d'escargot... C'est celui qui veut qui s'y colle ou qui participe Enfin, vu son origine, le meilleur endroit pour publier cet article me semblerait-être... le Hub Modifié 5 Septembre 2004 par LaurentDenis
LaurentDenis Posté 5 Septembre 2004 Posté 5 Septembre 2004 Une dernière petite remarque pour clôre ce dimanche matin stimulant : On aborde le plus souvent les mises en pages CSS d'un point de vue purement "géographique" (ça va se placer où ? ça va mesure combien en hauteur/largeur ?) Mais il est utile, pour bien comprendre ce qu'il se passe normalement, et aussi quand il y a un bug de navigateur, d'y penser chronologiquement : dans le processus de rendu CSS, ça se met d'abord là, puis ça se propulse ici... et ensuite, ça joue ou ça ne joue pas quand c'est le tour de l'élément suivant. Voilà pour mes deux sous de pragmatiste invétéré
Raphael Posté 5 Septembre 2004 Posté 5 Septembre 2004 Merci encore Laurent pour ta motivation à expliquer clairement tous ces schémas de positionnement. Je suis également persuadé que ces explications pourraient faire l'objet d'un article très important... autant sur le Hub que sur d'autres références comme OpenWeb car la connaissance ne doit pas s'auto-limiter et qu'il vaut mieux diversifier les sources d'information. Si cela peut te dépanner, je veux bien reprendre, cette semaine à venir, l'ensemble de ce qui a été écrit ici pour en faire une synthèse. Ce qui me trouble encore : Pour les éléments en position absolue, l'élément tient compte de son conteneur pour se placer : c'est celui-ci qui sert de référence aux valeurs des propriétés top, left, etc. Euh... uniquement si le conteneur est lui-même positionné, non ? Dans le cas contréaire, l'élément en position absolue ne tient pas compte du tout de son "conteneur" et se positionne par rapport au dernier conteneur positionné (au pire : body ou html). C'est la différence par rapport à un flottant qui, lui, se place toujours dans son conteneur même si ledit conteneur n'est pas positionné. De plus, un élément flottant joue sur le placement des autres éléments en flux autour de lui. Donc j'ai du mal à admettre que le float sort du flux :-/ Il faut faire attention au mot position qui induit en erreur si on le prend au sens intuitif (un élément en position:relative n'est pas un élément positionnné) Personnellement, je trouve tout à fait logique d'inclure le relatif dans "les éléments positionnés". Pourquoi ? Parce qu'un élément positionné (absolu, relatif, fixé) se positionne par rapport à son conteneur s'il est lui-aussi positionné (absolu, relatif, fixé). Dans ce cas, je ne vois pas pourquoi exclure la valeur "relative" puisqu'elle joue très bien son rôle de "position". En fait, est-il mauvais d'extrapoler comme suit : - les éléments bloc/en-ligne se positionnent par défaut selon le flux : ils sont dépendant les uns des autres, par contre ils ne dépendent pas des éléments positionnés (absolu, relatif, fixé)... euh sauf relatif - les éléments positionnés se placent selon les autres éléments positionnés (un "flux parallèle" ?) : ils dépendent des autres éléments positionnés et non des autres éléments du flux. On pourrait presque parler de deux "flux" parallèles même si le terme n'est pas le bon.
LaurentDenis Posté 5 Septembre 2004 Posté 5 Septembre 2004 (modifié) Pour les éléments en position absolue, l'élément tient compte de son conteneur pour se placer : c'est celui-ci qui sert de référence aux valeurs des propriétés top, left, etc. Euh... uniquement si le conteneur est lui-même positionné, non ? Dans le cas contréaire, l'élément en position absolue ne tient pas compte du tout de son "conteneur" et se positionne par rapport au dernier conteneur positionné (au pire : body ou html). Oui, je n'avais pas précisé (c'était déjà très long, comme explication) : - dans tous les cas, un élément en position absolue se place en référence à son conteneur, - le conteneur est par défaut le conteneur intial (donc <body> en HTML, <html> en XHTML) - mais si l'élément parent est lui-même en position: relative (avec/sans top, left...), ou en position:absolute, ou en position: fixed... il devient le conteneur. Il y a peut-être une formulation ambigüe là-dessus dans la spec, je n'ai pas le temps de vérifier immédiatement. Personnellement, je trouve tout à fait logique d'inclure le relatif dans "les éléments positionnés". Pourquoi ?Parce qu'un élément positionné (absolu, relatif, fixé) se positionne par rapport à son conteneur s'il est lui-aussi positionné (absolu, relatif, fixé). Dans ce cas, je ne vois pas pourquoi exclure la valeur "relative" puisqu'elle joue très bien son rôle de "position". Heu... Tout élément se positionne par rapport à son conteneur, qu'il soit en flux, doté d'une position:relative, absolute, fixe ou flottant Ce n'est pas un critère déterminant. Ce n'est pas un critère du tout, en fait La différence, c'est qu'un élément relatif, lui, est d'abord placé selon le flux dans son conteneur, puis déplacé indépendamment de celui-ci. Ce n'est pas le placement de l'élément lui-même qui compte, c'est son effet sur le placement des autres éléments. A la différence d'un élément positionné au sens propre du terme, un élément en position relative agit toujours sur les autres éléments selon les règles du flux normal : son décalage relatif n'est pas pris en compte à ce moment Le critère, c'est le degré d'interaction avec les éléments suivants/précédents. Et là, la position relative ne crée par de différence par rapport au flux (voir l'exemple sur la marge latérale dans mon message ci-dessus), à la différence des float (exception à la règle du flux pour les éléments blocs autorisant l'élément suivant à se placer à sa droite) et de la position absolue (aucune interaction). n fait, est-il mauvais d'extrapoler comme suit :- les éléments bloc/en-ligne se positionnent par défaut selon le flux : ils sont dépendant les uns des autres, par contre ils ne dépendent pas des éléments positionnés (absolu, relatif, fixé)... euh sauf relatif Exact, quoique qu'ils dépendent des éléments flottants. - les éléments positionnés se placent selon les autres éléments positionnés (un "flux parallèle" ?) : ils dépendent des autres éléments positionnés et non des autres éléments du flux. Non: - le placement d'un élément en position absolue (/fixed) ne dépend que des coordonnées issues de top, left... dans son conteneur. Il ignore totalement tous les autre éléments. C'est un foutu individualiste Il n'y a aucun "second flux" qui puisse le concerner... Complètement associal, le gars, je te dis ! - un élément flottant... dépend du flux et des autres éléments flottants. Lui, c'est le compliqué qui: - laisse aux autres le droit de le "peloter" abusivement : répandez-vous donc voluptueusement à ma droite, jeune homme... - mais qui pique une crise s'il n'a pas la place de s'étaler à sa convenance : Il m'embête lui... je file à la ligne, moi. Peut-être, pour lui, pourrait-on parler (abusivement) d'un "flux spécifique aux floats successifs"... Mais là, on sort de ce qu'on décrivait ci-dessus pour entrer dans des comportements spécifiques. Modifié 5 Septembre 2004 par LaurentDenis
LaurentDenis Posté 5 Septembre 2004 Posté 5 Septembre 2004 Juste pour dire que je dois interrompre momentanéement cette discussion passionnante... pour cause de week-end quand même un peu consacré à mes gosses, mais qu'on se retrouve la semaine prochaine Nous, cette 'aprem', on va au cirque, na
Raphael Posté 5 Septembre 2004 Posté 5 Septembre 2004 (modifié) Bon, ça se précise, mais il reste des zones d'ombre : Heu... Tout élément se positionne par rapport à son conteneur, qu'il soit en flux, doté d'une position:relative, absolute, fixe ou flottant wink.gif Ce n'est pas un critère déterminant. Ce n'est pas un critère du tout, en fait sad.gif Personnellement, je trouve ce critère prépondérent : - un div (en flux) contient un bloc (positionné en absolu) : dans ce cas, le bloc ne tient pas du tout compte de son conteneur logique pour se placer, mais il cherche le dernier conteneur positionné (même relatif, c'est pour cela que j'aime à garder le relatif dans ma liste des éléments "positionnés). A moins que pour toi le div ne soit PAS le conteneur du bloc... la structure logique (HTML) dit que le div est conteneur du bloc, et le CSS dirait alors que non. Donc à moins d'une mauvaise compréhension (ce ne serait pas la première fois), je trouve le positionnement capital : - si l'élément n'est pas positionné, son contenu (positionné) ne se placera pas par rapport à lui. Beaucoup de gens ne le savent pas. EDIT : arf, posté un poil trop tard. Bon cirque et amusez-vous bien ! Tâchez d'être bien positionnés par rapport au spectacle Modifié 5 Septembre 2004 par Sibelius
LaurentDenis Posté 5 Septembre 2004 Posté 5 Septembre 2004 Bon, ça se précise Ouf Personnellement, je trouve ce critère prépondérent :- un div (en flux) contient un bloc (positionné en absolu) : dans ce cas, le bloc ne tient pas du tout compte de son conteneur logique pour se placer, mais il cherche le dernier conteneur positionné (même relatif, c'est pour cela que j'aime à garder le relatif dans ma liste des éléments "positionnés). A moins que pour toi le div ne soit PAS le conteneur du bloc... la structure logique (HTML) dit que le div est conteneur du bloc, et le CSS dirait alors que non. ça, c'est la différence entre contenu structuré et présentation : - du point de vue de la structure (X)HTML, ton bloc positionné en absolu a pour parent la <div> en flux, effectivement. On peut parler en ce sens de "conteneur logique" si cela se réfère à la structure; - mais du point de vue présentation CSS, ce bloc en position absolue n'en a rien à faire de son élément parent pour se placer : ce qu'il cherche, c'est son conteneur (notion qui n'existe pas du point de vue structurel), c'est à dire au choix son élément parent s'il est lui même positionné, et à défaut un élément ascendant positionné ou le conteneur initial. Alors oui, HTML dit une chose du point de vue stucturel, et CSS screen en dit une autre du point de vue présentation visuelle. CSS aural dira encore autre chose Il faut penser, je crois, en termes de "couches" : - la couche structurelle (HTML) - la couche de présentation globale (CSS media All) - la couche de présentation visuelle (CSS media screen, print, etc.) A chaque couche son appréhension spécifique du document, appuyée sur la couche précédente... Donc à moins d'une mauvaise compréhension (ce ne serait pas la première fois), je trouve le positionnement capital :- si l'élément n'est pas positionné, son contenu (positionné) ne se placera pas par rapport à lui. Beaucoup de gens ne le savent pas. C'est vrai qu'on ne rappelle jamais assez, pour faire bref, qu'un élément en position absolute/fixed est placé en référence au body sauf un de ses éléments ascendant est lui-même positionné. C'est le vieux coup de la règle position:relative sans top ni left, ni etc... à mettre sur le "conteneur" intuitif souhaité. DIT : arf, posté un poil trop tard. Bon cirque et amusez-vous bien ! Tâchez d'être bien positionnés par rapport au spectacle Si on arrive en retard et qu'on loupe la visite de la ménagerie avant le spectacle... C'est toi qui t'expliqueras avec ma fille, Raphaël ! (et elle a beaucoup plus mauvais caractère que moi) Je file pour de bon, ce coup-ci...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant