Flaz's Hotline

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Page Web Multicolonnes ======

Soit le schéma classique d'une page :


<code>                  entête

    navigation     contenu     autres

                 pied de page
</code>

Il soulève plusieurs questions :
  * largeurs fixes ou proportionnelles globales ou par colonnes,
  * si non totalement fixe, ajustement vertical du pied de page,
  * ordre apparent différent de l'ordre du flux xhtml,
  * filage des colonnes pour les aligner sur la plus longue.

===== Placement =====

Le [[http://blog.html.it/layoutgala/index.html|Gala layout]] répond au trois premières questions et apporte une variété de solutions mixtes ou homogènes à la question de la proportionnalité. Il utilise les //floats// et les [[http://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/|marges négatives]]. Le flux xhtml se présente ainsi : entête, contenu, navigation, autres, pied de page. On peut permuter n'importe lequel des éléments du milieu.

L'entête est placée dans un élément //normal//, le contenu, la navigation et autres sont placés dans des //float//, le pied de page est placé dans élément //normal// doté de la propriété //clear//.

L'entête s'appuie sur les bords haut et gauche du cadre principal.

Les floats s'appuient (à gauche) les uns sur les autres, dans l'ordre d'arrivée du flux xhtml, mais sont déplacés en faisant appel au marges négatives, et s'insèrent dans les marges des blocs antérieurs, ménagées à cet effet. La gestion particulière des marges des //floats// permet que les contenus **non recouvrants** des ces blocs viennent s'appuyer verticalement sur l'entête.

Le pied de page s'appuie sur le bord gauche du cadre et, verticalement, sur le plus long des floats centraux (rôle de la propriété //clear//). Ce faisant, il réinscrit dans l'espace occupé par les floats dans le flux d'affichage ; faute de quoi, le contenus de la suite s'afficherait bien en dessous (adaptation aux floats) mais le premier bloc normal de suite s'appuieraient verticalement sur l'entête (dernier non-float) et s'étendrait sous les floats.

Le modèle est robuste et résiste aux caprices de tous les navigateurs. Il est applicable à deux colonnes et extensible à plus de trois colonnes. Par ailleurs, chaque colonne peut être découpée en sous-blocs, chacune fixant ses propres règles de placement interne. Un article en présente [[http://www.positioniseverything.net/articles/onetruelayout/anyorder|les principes]] et fournit la règle de calcul des marges négatives.

===== Filage des colonnes =====

Cette technique de placement ne règle pas le problème du filage des colonnes. En CSS2, il est normal que le bloc s'adapte à la taille de son contenu. Si l'on exclue la "solution" consistant à figer la longueur (il n'y a plus filage, à proprement parler), on ne peut que jouer sur des astuces.

==== Faux columns ====

L'astuce traditionnelle (dite des "[[http://www.alistapart.com/articles/fauxcolumns/|fausses colonnes]]") consiste à faire filer, visuellement, un motif s'étendant sur les trois colonnes et se répétant en fond d'un élément créé exprès pour englober les éléments centraux. S'appuyant sur un motif fixe, elle ne fonctionne que dans un schéma où les colonnes sont elles-mêmes de largeur fixe.

==== Overflow and hide ====

Une [[http://www.positioniseverything.net/articles/onetruelayout/equalheight|meilleure solution]], permet de traiter les colonnes de largeur dynamique. Elle s'applique directement aux blocs visés et permet un traitement sélectif sans avoir recours à des artifices externes tels que des //images// (de fond). Elle consiste insérer les colonnes dans un wrapper //bloquant les dépassements// et à prolonger (padding et margin) les colonnes au-delà de toute limite visible. Les colonnes traitées ont alors une longueur énorme mais elles sont tronquées par le wrapper qui, par ailleurs, s'ajuste au **contenu** le plus long. La longeur visible des colonnes ainsi traitées est alors exactement égale à la longueur de la colonne ayant le plus long contenu. Cette dernière n'a pas besoin d'être "filée" pour que l'astuce fonctionne.

=== Un exemple classique ===

Dans une présentation en 3 colonnes (navigation, contenu, extras), on veut que la navigation file aussi loin que l'exige contenu, extras ou elle-même. Le contenu n'est pas filé. Les extras peuvent l'être ou ne pas l'être.