CityDesk et Standards du Web - le wiki

flux

OwenBriggs présente le concept du flux[1] pour introduire les boîtes : Les choses démarrent dans le coin en haut et à gauche de l'écran et au fur et à mesure que des items s'ajoutent, ils se placent vers la droite et puis en dessous tant qu'il y a de la place disponible. Exactement comme l'ajustement des mots d'un texte. Cela parce que le texte utilise aussi le flux. Le flux est universel ; si n'importe quel élément a des caractéristiques spéciales qui l'amène à se comporter "hors flux", les spécifications mentionneront explicitement l'exception. Tout ce qui n'est pas défini hors du flux est dans le flux. Ce concept s'applique tant au texte qu'à la création de boîtes. Les boîtes sont placées dans un flux et non pas collées sur une grille.

L'ordre du flux est défini par l'ArbreDuDocument, que nous créons en écrivant la structure de la page HTML ou XHTML.

C'est un concept clé quand vous créez des boîtes. (cf ModèleDeBoîtes) : Elles se placent dans un flux et ne sont pas collées sur une grille. Souvenons nous que le Web n'est pas l'imprimerie. Croyez-le : nous créons un médium liquide.


DossierGlossaire

Exemple

Maintenant, prenons cet exemple très simple de XHTML et CSS :

<body>
<div class="wee">1</div>
<div class="wee">2</div>
<div class="wee">3</div>
<div class="wee">4</div>
</body>

body {
  margin: 0px;
  padding: 0px;
  color: #000;
  background-color: #ccc;
  }
.wee {
  padding: 10px;
  margin: 5px;
  background-color: #fff;
  border: 1px solid #000;
  }

Cette règle ne produit pas l'alignement horizontal des 4 boîtes sur une même ligne... mais bien cela : comme ceci (cliquez sur ce lien)

Ceci s'explique parce qu'une <div> est un élément de bloc ([2]), aussi chacun de ces éléments obtient sa propre ligne. L'écoulement est ici et fonctionne parfaitement. Ces simples <div>s s'épanchent dans le navigateur sur toute la largeur car rien ne les arrête. La largeur (width) n'a pas été déclarée et la marge est simplement de 5px, aussi le côté droit s'épanche jusqu'à ce qu'il rencontre quelque chose ; dans ce cas, il n'y a rien à part le bord de la fenêtre.

Si quelque chose est placé entre les divs comme :

<body>
<div class="wee">1</div>
Le renard roux a sauté au-dessus du chien paresseux.
<div class="wee">2</div>
<div class="wee">3</div>
<div class="wee">4</div>
</body>

Le résultat donne... (cliquez sur ce lien)

Si nous raccourcissons les divs, disons en déclarant 20% :

body {
  margin: 0px;
  padding: 0px;
  color: #000;
  background-color: #ccc;
  }
.wee {
  padding: 10px;
  margin: 5px;
  background-color: #fff;
  border: 1px solid #000;
  width: 20%;
  }

Le résutlat est encore...(cliquez sur ce lien)

... Vous le constatez, les <div>s comme celles-ci courent en bas de la page sans rien à côté d'elles, parce que sont des éléments de niveau bloc. Les boîtes qui vont suivre ce comportement d'écoulement normal sont dites positionnés de manière statique. Inutile d'inclure cette déclaration dans votre règle de <div> parce qu'elle est prise par défaut. Cependant, si elle était incluse elle ressemblerait à :

.wee {
  position: static;
  padding: 10px;
  margin: 5px;
  background-color: #fff;
  border: 1px solid #000;
  width: 20%;
  }

Il existe d'autres types de positionnements pour un élément :

  • le positionnement relatif - relative
  • le positionnement fixe - fixed
  • le positionnement absolu - absolute
Nous étudierons ces 3 autres types de positionnement avec le même code XHTML exception faite d'une petite différence : la première <div> se verra attribuer une nouvelle classe pour faire fonctionner la nouvelle information de positionnement. Le reste des autres <div>s restera statique dans le flux normal.

<body>
<div class="different">1</div>
<div class="wee">2</div>
<div class="wee">3</div>
<div class="wee">4</div>
</body>

Discussion

Laurent, j'ai tiré cet amorçage de définition du livre d'OwenBriggs ( ISBN 1-904151-04-3) et trouverais pertinent de le compléter par quelques fondamentaux sur des exemples très simples type BoîtesBoîtesBoîtes qui pourraient m'aider à mieux comprendre et pratiquer l'exercice déposé sur BasesDesCss/Positionnement ? Qu'en penses-tu ? -- ChristopheDucamp

Bonne idée, je suis effectivement encore trop compliqué dans les explications, je vais detailler et simplifier le positionnement --LaurentLunati

Laurent, il va être temps de te mettre à la SignatureAutomatique chronodatée même si elle tue l'InstantWiki ! -- ChristopheDucamp 18 Octobre, 2004 11:25 CET


DossierGlossaire



[1] Consultez aussi l'excellent article d'OpenWeb qui aborde aussi ce concept du flux et la position relative sur la mise en page

[2] voir FractalCityWiki:FondamentauxCSS

 
© GPL 27 Mars, 2005