INFOS-AREA
  Guide de survie du positionnement CSS
 
Cet article s'adresse à ceux qui ont déjà quelques notions de positionnement CSS, mais qui se demandent s'ils l'utilisent correctement, ou qui galèrent pour mettre en pratique leurs connaissances encore trop bancales.


Comment s'y retrouver dans le machin tentaculaire qu'est le positionnement CSS? C'est un sujet à la fois complet (tant mieux) et complexe (ouille). Pour bien l'appréhender, il faut prendre en compte:

  • les possibilités de CSS 2.1 pour l'affichage et le positionnement des éléments (et à l'avenir de CSS 3);
  • celles qui sont implémentées dans les navigateurs (et donc pas les autres, sauf pour préparer l'avenir);
  • les contraintes de mise en page et d'adaptation aux contenus (le contenu, ça va ça vient… et ça vous surprend toujours d'une manière ou d'une autre);
  • les contraintes du média screen (on ne fait pas tout et n'importe quoi avec les hauteurs et largeurs, le centrage, etc.);
  • les bugs éventuels des navigateurs (ou de certains navigateurs).

Comment s'y retrouver? Déjà, en ayant une bonne connaissance des principaux types de positionnement en CSS. Ensuite, avec quelques conseils dispensés ici à titre indicatif, et je l'espère sans prétention.

Ressources en français sur le positionnement CSS

Voici votre to-read list. On se retrouve demain, le temps que vous lisiez ces très bons articles. Allez, disons au moins les deux premiers, sinon vous n'allez rien comprendre à la suite de l'article.

  •  
*  Alsacréations:  Initiation au positionnement CSS (partie 1).
    * Alsacréations: Initiation au positionnement CSS (partie 2).
    * Openweb: 1. flux et position relative.
    * Openweb: 2. position float.
    * Openweb: 3. position absolue et fixe.

Pour aller plus loin, vous pourrez aussi lire:

    * Alsacréations: Un design fluide avec trois «colonnes», grâce au positionnement flottant.
  •  

C'est bon, on y est? Alors on enchaine sur la galerie des horreurs.

Erreurs de débutant à ne pas commettre

Penser qu'il faut utiliser la propriété position à tort et à travers

C'est un réflexe logique (quoi de mieux pour positionner un élément que la propriété «position»?), mais source d'erreur. En effet, et même si ça peut surprendre, la quasi-totalité du positionnement CSS se fait sans même qu'on ait besoin d'utiliser la propriété position.

Tout positionner en absolu (pas bien)

Le positionnement absolu est à la fois très puissant et très limité. On ne l'utilisera que ponctuellement, et en sachant précisément ce que l'on fait (voir les détails plus bas).

Tout positionner en relatif (pas bien non plus)

Le positionnement relatif est très utile mais ne s'utilise que ponctuellement, pour décaler légèrement un élément par rapport à sa position normale. On ne l'utilise pas, par exemple, pour placer deux blocs côte-à-côte. Si vous vous retrouvez à écrire des positionrelativetop: -291px;, vous utilisez probablement le positionnement relatif à mauvais escient.

Voilà pour les choses à ne pas faire. Maintenant, quels sont les bons réflexes à avoir?

Quel type de positionnement utiliser en priorité?

Voici, classés par ordre croissant, les types de positionnement que vous serez le plus amené à utiliser (sauf erreur ou mauvaise analyse de ma part):

  1. Garder les éléments dans le flux, et jouer sur les marges, padding, etc.

    Ça peut paraitre une évidence, mais mieux vaut le rappeler: pour la plupart des éléments d'une page, on utilisera le positionnement en flux de l'élément.

    On exploitera simplement le fait que les éléments de type bloc (div, paragraphes, titres, etc.) se placent naturellement les uns sous les autres, et prennent automatiquement toute la largeur disponible. Pour écarter les éléments entre eux ou au contraire les rapprocher, on utilisera les marges (margin) et le padding.

  2. Modifier le mode de rendu avec la propriété display

    Une des techniques les plus efficaces en positionnement CSS consiste non pas à positionner l'élément, mais à lui donner un mode de rendu différent de celui par défaut. Typiquement, il s'agit de passer un élément de type en-ligne en rendu de type bloc, ou à l'inverse des éléments de type bloc en rendu de type en-ligne. Cela permet par exemple de faire un menu horizontal à partir du code HTML d'une liste à puces.

    À l'avenir, on pourra utiliser display avec des valeurs intéressantes comme inline-block (déjà supporté par la majorité des navigateurs), table et table-cell, etc.

    Mais attention: chaque mode de rendu a ses spécificités, ses avantages et ses limites! Il faudra donc bien les connaitre pour choisir en connaissance de cause.

  3. Pour placer des blocs côte-à-côte: propriété float

    La plupart du temps, pour créer des «colonnes» ou simplement placer deux blocs côte-à-côte, on utilisera le positionnement flottant. Attention, le positionnement flottant a quelques caractéristiques pas toujours simples à comprendre, comme par exemple le dépassement des flottants.

  4. Centrage des éléments

    Vient toujours le moment où l'on veut centrer des contenus ou tout un site. Pour centrer horizontalement un texte, on utilisera text-align. Pour centrer horizontalement un bloc, on utilisera la technique des marges automatiques. Enfin, le centrage vertical est le point compliqué. À l'heure actuelle, la solution la plus compatible pour centrer verticalement un bloc est d'utiliser un tableau de mise en page. À l'avenir, on pourra utiliser displaytable-cell sur un bloc conteneur pour centrer son contenu avec vertical-alignmiddle.

     

  5. Positionnement absolu

    Pour commencer, on n'utilisera le positionnement absolu que dans les conditions suivantes: 1) si on sait comment faire pour positionner un élément en absolu par rapport à son parent ou ancêtre positionné (si cela ne vous dit rien, relire les articles indiqué en ressources!); 2) si on a une idée précise des conséquences du positionnement absolu (risque de chevauchement des contenus); 3) si on sait à l'avance quels sont les contenus qui seront ainsi positionnés, et si ces contenus ne risquent pas de prendre de l'ampleur et ainsi de déborder de l'espace défini.

    Une fois ces précautions bien intégrées, on pourra utiliser le positionnement absolu de manière efficace pour quelques éléments de nos pages web.

  6. Positionnement relatif

    Pour l'essentiel, le positionnement relatif a deux usages concrets: 1) créer un nouveau référent pour les éléments enfants et descendants positionnés en absolu et 2) décaler légèrement (de quelques pixels, pas plus) un élément par rapport à sa position normale, pour réaliser un effet visuel. Toute autre utilisation, sans être impossible ou forcément incorrecte, est risquée.

  7. Positionnement fixe

    À n'utiliser qu'en connaissance de cause, avec beaucoup de précautions et en testant sur différentes configurations (et surtout différentes résolutions d'écran). On n'utilise que très rarement le positionnement fixe.

Nous y sommes. Avec un peu de chance, vous y voyez maintenant plus clair. Si ce n'est malheureusement pas le cas, je vous invite à lire ou relire les articles indiqués comme ressources, et à mener vos propres essais pour vous familiariser avec le comportement des différentes propriétés. Courage!


Initiation au positionnement en CSS

Pour éviter l'usage inconsidéré des tableaux de mise en page, l'utilisation correcte de chaque élément (balises div, p, h1, ul, li, etc.) ainsi que leur positionnement en CSS est dorénavant indispensable.

Les éditeurs HTML visuels n'utilisent qu'une infime partie des possibilités des balises (faussement nommées "calques" en général), ce qui les rend souvent peu compatibles et peu pratiques.

Cet article en deux parties explique comment positionner les éléments en CSS de façon optimale.

Résumé et pense-bête. Voici les principaux points à retenir de cet article :

  • Tous les éléments (balises) HTML peuvent être positionnés, décorés, dimensionnés, ... grâce aux styles CSS. Cela signifie que les CSS ne s'appliquent pas qu'aux éléments <div> contrairement à certaines idées reçues : une image (<img>), une liste (<ul>), un paragraphe (<p>), etc. peuvent être stylés en CSS sans avoir besoin d'être contenus dans un élément <div>. Évitez d'ailleurs de surcharger vos documents d'éléments <div> inutiles.

  • Employez toujours les éléments selon leur fonction et non selon leur aspect (puisque cet aspect pourra facilement être modifié via CSS) : un paragraphe sera défini par la balise <p>, un titre par la balise <h1>, <h2>..., etc. Notez que l'élément <div> est neutre est sert de "bouche-trou" pour englober d'autres éléments ou servir lorsqu'aucun autre élément n'est approprié. N'utilisez pas <div> pour englober des éléments seuls !

  • Il existe deux types généraux d'éléments HTML : les balises de type "en-ligne" et les balises de type "bloc". Cette différence est fondamentale et a de nombreuses implications sur les styles qui peuvent être appliqués.

  • L'imbrication des éléments les uns dans les autres, et les notions de parenté (parent, ancêtre, frère, ...) permettent de styler facilement les éléments en utilisant cette hiérarchie dans les sélecteurs CSS. Cela évite d'employer des noms de classes ou d'id multiples et inutiles, qui complexifient la lecture et la compréhension des styles.

  • Il existe plusieurs schémas de positionnement en CSS : un schéma de positionnement dans le Flux (positionnement par défaut), et trois schémas de positionnement qui sortent l'élément du Flux (positionnement absolu, positionnement fixé et positionnement flottant). Un dernier "positionnement" (relatif) est en fait une variante du positionnement courant qui provoque un décalage. La notion de Flux est fondamentale.

  • Chaque schéma de positionnement a ses règles et spécificités. Mieux vaut bien comprendre ces règles pour éviter des interactions ou des comportements non sollicités... et déclarer que les CSS ne fonctionnent pas !

Les balises de bloc et les balises en-ligne

Ce chapitre sur la structure des balises est primordial,

Voici un résumé pour les lecteurs pressés 

  • les éléments de rendu "bloc" se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot). Par exemple: une suite de paragraphes (balise <p>) ou les éléments d'une liste (balise <li>). Par ailleurs, un élément "bloc" occupe automatiquement, par défaut, toute la largeur disponible dans son conteneur.
  • les éléments de rendu "en-ligne" se placent toujours l'un à côté de l'autre afin de rester dans le texte. Par exemple : le renforcement d'une partie de texte à l'aide de la balise .
  • les autres éléments de type en-ligne ("non-remplacés") n'ont pas de dimension à proprement parler par défaut (il n'occupent que la place minimum nécessaire à leur contenu). C'est le cas des éléments <strong>, <em>, <span>, etc.

Ancêtre, Parents, Enfants, Frères

Comprendre l'imbrication des éléments (boites) les uns dans les autres est essentiel.

Chaque document HTML est toujours composé de conteneurs. Ceux-ci peuvent être ancêtres, parents, enfants ou frères. Ces différents éléments composent une hiérarchie d'imbrications.

  • Un élément Ancêtre est un élément qui contient un élément ou une hiérarchie d'éléments
  • Un bloc Parent est un élément contenant directement un autre bloc. Par exemple, un DIV contenant un paragraphe P. Attention : si ce paragraphe contient lui-même des éléments (ex: strong), DIV ne sera pas Parent de l'élément strong mais uniquement son Ancêtre. Le Parent est donc l'Ancêtre immédiat.
  • Un bloc contenu directement dans un autre bloc est dit Enfant de cet élément. Par exemple, ici les éléments LI sont enfants de leur conteneur UL.
  • Les éléments ayant le même élément Parent sont appelés Frères.

Le Flux

La mise en place des différents éléments de la page se fait par défaut selon le Flux courant.

Les éléments (balises) sont placés les uns après les autres dans le code HTML de la page.

L'ordre dans lequel apparaissent les balises dans le code HTML sera l'ordre dans lequel ils seront affichés et apparaitront dans le document, c'est le Flux. Cela signifie que, par défaut, chaque élément est dépendant des éléments frères qui l'entourent.

Par défaut, les balises Bloc et les balises En-ligne ont un comportement différent dans le flux normal

NOTE : les blocs positionnés en "absolu" ou "fixé" sortent du flux naturel et échappent quelque peu à cette règle.
Ils ne sont alors plus dépendant des éléments frères.
Pour se placer, un tel bloc se réfère non pas à son Parent direct, mais au premier Ancêtre positionné qu'il rencontre.

Sachez utiliser chaque balise à bon escient !

  • Il est souvent inutile de faire des imbrications multiples de <div>, ceux-ci ne servant qu'à délimiter des zones de page
  • Evitez d'utiliser les balises <table> pour la mise en page de votre site : ils ne sont pas fait pour ça mais pour des données tabulaires et statistiques
  • Utilisez les balises <h1>...<h6> pour vos titres et non des balises <p> améliorées
  • Utilisez les listes <ul> <li> pour vos menus, car leur utilisation est tout à fait appropriée pour ça (voir les articles de la catégorie "menus en CSS")

Initiation au positionnement CSS (partie 2)

Partie 2

Le positionnement des éléments en CSS est sans aucun doute l'un des aspects les plus intéressants de cette technologie, mais également l'un des plus ardus. Positions, flux et autres flottants sont pourtant des notions essentielles à une bonne maîtrise de la mise en page. Si de plus en plus d'intégrateurs semblent aujourd'hui acquérir les bases du comportement de ces propriétés, les choix des techniques demeurent couramment discutables, tout au plus hasardeux. Voyons ces méthodes de positionnement en détails afin de ne plus se laisser aller à des choix arbitraires incohérents.


Notion de flux

Le flux d'un document pourrait se définir comme étant le comportement naturel d'affichage des éléments d'une page web. Autrement dit, les éléments se succèdent dans l'ordre où ils sont déclarés dans le code HTML. Grossièrement, les éléments de séquençage, tels que h1, p ou ul, s'affichent logiquement par défaut les uns en-dessous des autres tandis que les éléments délimitant pour la plupart des portions de textes dans un but de gain sémantique s'affichent côte à côte. Nos deux groupes d'éléments peuvent être classés en deux familles:

  • Les balises de type block (h1, p, ul, ol, dl, table, blockquote, etc.)
  • Les balises de type inline (a, img, strong, abbr, etc.)

Une balise de type block peut s'identifier à une brique, à un gros "bloc" d'informations qu'on va pouvoir manipuler aisément. Il se différencie des éléments de type en ligne sur différents points, dont ceux-ci:

  • Il occupe l'entierté de la largeur de son conteneur
  • Il permet l'attribution de marges verticales
  • Il permet la modification de sa hauteur et largeur

Le premier point est primordial, nous utiliserons abondamment ce comportement par défaut bien pratique dans la création de nos mises en page. Notons également que tout élément peut être "reclassé" dans la famille opposée grâce à la propriété display.

Il faut garder à l'esprit qu'un élément dans le flux sera toujours plus simple à manipuler et plus flexible dans sa relation aux autres éléments. Gardez en tête que laisser à un élément son comportement naturel est toujours à privilégier. Autrement dit, on ne sortira un élément du flux que lorsqu'on ne pourra pas faire autrement. Bien entendu, le flux montre rapidement ses limites lorsqu'on envisage une mise en page un peu sophistiquée…

La propriété position

La propriété position porte merveilleusement bien son nom puisqu'elle va nous permettre de gérer les… positions. C'est la propriété vers laquelle l'on se doit de se tourner en premier lieu dès que l'on considère une mise en page pour laquelle les possibilités du flux ne suffisent plus, et c'est là toute la raison d'être de cette puissante propriété.

La position relative

La position relative (position:relative) extrait partiellement un élément du flux et permet de le décaler hors du flux par rapport à une position de référence: celle qu'il avait dans le flux. Les éléments qui le suivent et le précèdent ne sont pas influencés par ce décalage puisqu'ils considèrent que l'élément est toujours dans le flux à sa position initiale. En pratique, ce comportement est rarement recherché bien qu'il puisse s'avérer utile dans certains cas.

Attribuer à un élément une position relative peut par contre être pratique, voire indispensable, dans d'autres situations dont les plus courantes sont sans nul doute les suivantes:

  • Servir de référent à un élément enfant positionné en absolu (rappelons qu'un élément positionné absolument grâce aux propriétés top, left, … le fera par rapport à la fenêtre du navigateur à défaut d'avoir un parent lui-même positionné)
  • Bénéficier de la possibilité d'utiliser la propriété z-index pour gérer des superpositions d'éléments (propriété inopérante pour des éléments du flux)
La position absolue

La position absolue (position:absolute) s'impose comme étant la méthode de placement des éléments par excellence. Elle permet la création robuste de grilles de mise en page et de positionnements en tout genre et jouit du confort de ne pas dépendre de l'ordre dans lequel les éléments HTML sont déclarés dans le code, contrairement aux flottants que nous verrons plus tard.

La position absolue s'affranchit définitivement du cordon liant jusqu'alors intimement contenu et présentation. L'élément étant totalement extrait du flux, il ne dépend plus du tout des éléments qui le côtoient. Il faut voir le positionnement absolu comme étant une méthode radicale (mais puissante) qui retire tout à fait un élément du flux: il n'existe pour ainsi dire plus aux yeux des éléments qui, eux, restent dans le flux.

Rappelons un point important concernant ce mode de positionnement : un élément positionné en absolu se réfère non pas à son parent direct, mais au premier ancêtre positionné qu'il rencontre.

Un des comportements d'un élément positionné absolument qui peut sembler confus est la perte de ce caractère propre aux éléments de type block du flux qui affecte à l'élément le recouvrement de toute la largeur de son parent, réaction par ailleurs tout à fait concevable et logique dès lors que l'on garde en mémoire que l'élément positionné n'est plus dans le flux.

Il est capital de noter qu'un élément bénéficiant d'une position absolue ne bougera pas de sa position initiale tant que l'une des propriétés top, bottom, left ou right n'a pas été précisée; il s'agit d'ailleurs là d'un comportement appliquable à toutes les positions.

La position fixe

Le positionnement fixe (position:fixed) s'apparente au positionnement absolu, à l'exception des points suivants:

  • Lorsque le positionnement est précisé (top, right, …), l'élément est toujours positionné par rapport à la fenêtre du navigateur
  • L'élément est fixé à un endroit et ne pourra se mouvoir, même lors de la présence d'une barre de défilement. En d'autres termes, la position intiale est fixée au chargement de la page, le fait qu'une éventuelle scrollbar puisse être utilisée n'a aucune influence sur le positionnement de l'élément: il ne bouge plus de la position initialement définie.
La position statique

La position statique (position:static) correspond simplement à la valeur par défaut d'un élément du flux. Il n'y a que peu d'intérêt à la préciser, si ce n'est dans le but de rétablir dans le flux un élément en particulier parmi une série qui serait positionnée hors du flux.


La propriété float

La propriété float demeure sans doute, malgré des qualités intrinsèques évidentes, la propriété la plus mal comprise mais surtout, la plus mal employée des CSS. Sa simplicité d'utilisation apparente recèle pourtant certaines subtilités fondamentales et lui confère malheureusement un choix inconsciemment systématique pour toute disposition d'éléments en plusieurs colonnes.

Rôle & détournement des flottants

La propriété float existe avant tout pour répondre à un besoin typographique précis: la création d'habillages. Un habillage est une pratique courante dans le média print consistant à "enrouler" un texte autour d'un élément (graphique ou texte); il était normal de retrouver cette ouverture de mise en page dans notre média favori.

À l'instar du positionnement absolu, un élément flottant adopte par défaut la largeur qu'occupe son contenu. Le principe de base est simple: un élément flottant est ôté partiellement du flux et placé à l'extrême gauche (float:left) ou droite (float:right) de son conteneur, forçant par la même occasion tout contenu du flux qui suit à l'envelopper. Deux objets flottants dans la même direction se rangeront côte à côte, seul un contenu demeuré dans le flux qui les succède immédiatement initiera l'habillage. C'est justement ce caractère hâtif de disposition adjacente de blocs qui est la cause d'une mauvaise et sur-utilisation de cette propriété trop souvent écartée de son application originale.

Nettoyer les flottants

La propriété clear s'utilise conjoitement aux float et permet à un élément (qui peut être d'ailleurs lui-même flottant) de ne plus subir le comportement d'habillage dicté par un objet flottant qui le précède directement et, par conséquent, de se caler en-dessous de ce dernier. Le clear autorise un nettoyage des flottants exclusivement à gauche (clear:left), à droite (clear:right) ou les deux simultanément (clear:both).



Que choisir dans mon cas?

C'est en effet une question récurrente parfaitement légitime tant CSS nous permet d'aborder un même problème sous de nombreux angles. Essayons d'aborder différents cas-types et les solutions qui s'y prêtent le mieux.

Mise en page centrée en 2 colonnes, header et pied de page

Voici le style de résultat recherché:

Schéma: structure en 2 colonnes avec en-tête et pied de page

Voici notre structure HTML:

<div id="conteneur"> 
    <div id="header"> 
        <!-- Ceci est mon haut de page --> 
    </div> 
    <div id="sidebar"> 
        <!-- Ceci est ma colonne latérale --> 
    </div> 
    <div id="contenu"> 
        <!-- Ceci est mon contenu principal --> 
    </div> 
    <div id="footer"> 
        <!-- Ceci est mon pied de page --> 
    </div> 
</div>

Deux cas de figures se présentent:

  1. Je suis certain que ma colonne de gauche sera toujours plus courte que mon contenu principal
  2. J'ignore quelle sera la colonne la plus haute

Lorsqu'on se trouve dans la première situation (que je crois plus fréquente), c'est naturellement vers la propriété qui est censée gérer tout positionnement que l'on va se tourner. En gardant bien en tête les notions de flux, il nous sera très facile de réaliser cette mise en page rapidement:

#conteneur {width:760pxmargin:0 auto;} 
#sidebar {position:absolutewidth:170px;} 
#contenu {margin-left:170px;}

Que se passe-t-il exactement? Le fait d'attribuer une position absolue à notre colonne latérale la retire totalement du flux, l'élément "n'existe" plus aux yeux des autres éléments du flux. L'élément étant déjà à la bonne place, je n'ai pas à lui attribuer de coordonnées. Puisque cet élément est comme absent de la page du point de vue du div#contenu, celui-ci remonte jusqu'au premier contenu dans le flux qu'il rencontre, à savoir notre haut de page. Mon contenu étant un élément de type block, il recouvre par définition toute la largeur de #conteneur. Il ne reste plus alors qu'à lui attribuer une marge à gauche correspondant à la taille de ma colonne latérale.

Malheureusement, si nous nous trouvons dans le second cas évoqué (hauteurs imprévisibles), la propriété position ne pourra plus être employée sous peine de voir notre pied de page se placer juste en-dessous du header. En effet, nous n'avons sorti du flux dans l'exemple précédent que la colonne la moins haute, ce qui a pour effet de laisser le pied de page se placer naturellement sous le dernier contenu du flux rencontré: notre contenu principal. Si l'on ne peut prédire quelle sera la colonne la plus haute, il nous est forcémment impossible de garder avec certitude la bonne colonne dans le flux. Dans ce cas, et uniquement dans ce cas, nous allons recourir aux flottants avec parcimonie et être contraints de rajouter une division dans notre code HTML afin d'englober l'enfant flottant. Le code HTML se présente dès lors comme ceci:

<div id="conteneur"> 
    <div id="header"> 
        <!-- Ceci est mon haut de page --> 
    </div> 
    <div id="wrap"> 
 
        <div id="sidebar"> 
            <!-- Ceci est ma colonne latérale --> 
        </div> 
        <div id="contenu"> 
            <!-- Ceci est mon contenu principal --> 
        </div> 
    </div> 
    <div id="footer"> 
        <!-- Ceci est mon pied de page --> 
    </div> 
</div>

La mise en forme CSS ne se contentera de sortir du flux que l'élément qui le demande obligatoirement:

#conteneur {width:760pxmargin:0 auto;} 
#wrap {overflow:hidden;} 
#sidebar {float:leftwidth:170px;} 
#contenu {margin-left:170px;}

Nous pouvons maintenant être assurés que notre pied de page se trouvera toujours après les deux colonnes, quelles que soient leurs hauteurs. Cependant, cette solution ne devrait être envisagée que dans ce cas précis d'inconnue totale de quantité de contenu, puisque:

  • Nous détournons une propriété de son rôle initial
  • Nous alourdissons notre code HTML uniquement à des fins de mise en forme
  • Nous rajoutons une ligne supplémentaire dans notre feuille de style pour créer le contexte de formatage


Quatre colonnes fluides de même hauteur centrées horizontalement

Nous allons réaliser une page listant les offres commerciales proposées par une société pour aboutir au résultat suivant:

Capture d'écran: structure à quatre colonnes de même hauteur

Nous sommes assurés que la dernière colonne sera toujours la plus haute: il est logique que le service le plus complet dispose de plus de fonctionnalités. Il faut que l'ensemble couvre toujours 80% de la largeur de la page et que toutes les colonnes fassent la même hauteur (celle de la dernière en l'occurence) pour éviter un effet d'escalier disgracieux. On pourrait penser à l'utilisation de la méthode dite des colennes factices, mais elle se heurte à deux inconvénients, dont un majeur:

  • Les 4 colonnes étant fluides, il sera donc impossible de se servir d'une image pour simuler le colonnage extensible
  • Elle force l'auteur à recréer une image pour chaque changement de couleur voulu

Heureusement, la souplesse des positions nous permet de réaliser notre maquette aisément. Voyons d'abord notre structure HTML:

<h1>Des solutions adaptées à vos besoins</h1> 
<ol> 
    <li id="decouverte"> 
        <h2>Offre "Découverte"</h2> 
        <p> 
            Cette offre de bienvenue vous donne accès 
            aux principales fonctionnalités du système: 
        </p> 
        <ul> 
            <li>Tout le catalogue disponible</li> 
            <li>Service accessible 24h/21</li> 
        </ul> 
    </li> 
    <li id="start"> 
        <h2>Offre "Start"</h2> 
        <p> 
            Cette offre d'entrée de gamme vous donne accès 
            aux principales fonctionnalités du système ainsi 
            que quelques bonus: 
        </p> 
        <ul> 
            <li>Tout le catalogue disponible</li> 
            <li>Service accessible 24h/21</li> 
            <li>Pas de frais d'activation</li> 
            <li>Interface entièrement personnalisable</li> 
        </ul> 
    </li> 
    <li id="services"> 
        <h2>Offre "Services+"</h2> 
        <p> 
            Cette offre très prisée vous donne accès 
            aux principales fonctionnalités du système 
            et aux nombreuses possibilités de partage: 
        </p> 
        <ul> 
            <li>Tout le catalogue disponible</li> 
            <li>Service accessible 24h/21</li> 
            <li>Pas de frais d'activation</li> 
            <li>Interface entièrement personnalisable</li> 
            <li>Possibilité de téléversement</li> 
            <li>Diffusion et stockage</li> 
        </ul> 
    </li> 
    <li id="power"> 
        <h2>Offre "PowerUser"</h2> 
        <p> 
            Cette offre vous donne accès à l'ensemble 
            des fonctionnalités du système pour une expérience 
            utilisateur supérieure, avec entre autres: 
        </p> 
        <ul> 
            <li>Tout le catalogue disponible</li> 
            <li>Service accessible 24h/21</li> 
            <li>Pas de frais d'activation</li> 
            <li>Interface entièrement personnalisable</li> 
            <li>Possibilité de téléversement</li> 
            <li>Diffusion et stockage</li> 
            <li>Création personnalisée de bibliothèques</li> 
            <li>Espace alloué illimité</li> 
            <li>Nombre d'alias illimté</li> 
            <li>… et bien plus encore!</li> 
        </ul> 
    </li> 
</ol>

Qu'avons-nous à faire maintenant? Nous savons qu'il ne faudra positionner absolument que les 3 premières colonnes, la dernière étant la plus fournie en contenu, sa place réside dans le flux. Nous savons également que la totalité des 4 colonnes doit recouvrir 80% de la page. Ce dernier point pourra être rapidement réalisé en appliquant simplement au conteneur de ces colonnes (l'élément ol) des marges latérales de 10%. Voici la structure principale, le reste ne relève que du cosmétique:

* {padding:0margin:0;} 
ol {position:relativemargin:0 10%list-style:none;} 
ul {list-style:inside;} 
h1 {text-align:center;} 
#decouverte,#start,#services {position:absolutewidth:25%height:100%;} 
#start {right:50%;} 
#services {left:50%;} 
#power {margin-left:75%;}


Image & texte côte à côte

Je souhaite disposer sur un espace de 300px de large un bout de texte et une image côte à côte sur base du marquage HTML suivant:

<p> 
    <img alt="" src="kiwiz.png" width="100" height="130" /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco 
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
    irure dolor in reprehenderit in voluptate velit esse cillum 
    dolore eu fugiat nulla pariatur. 
</p>

Le résultat auquel j'aimerais arriver sans avoir à modifier mon code HTML est le suivant:

Capture d'écran: colonne de texte aligné à droite avec une illustration sur la droite

À nouveau, grâce aux positions et aux propriétés du flux, je vais rapidement arriver au résultat escompté: il me suffira simplement d'utiliser ma boîte p comme référent pour positionner mon image en ayant préalablement réduit la zone où mon texte pourra s'étendre:

p {position:relativewidth:180pxpadding-right:120pxtext-align:right;} 
p img {position:absoluteright:0;}



En guise de conclusion

La disposition des éléments en CSS est définitivement l'un des aspects de ce langage les plus subtils et mal compris. En attendant une implémentation raisonnable des différentes possibilités du display, ce sont essentiellement les propriétés position et float qui feront office de ténors en la matière.

Il n'est pas toujours aisé dans un apprentissage comme celui du positionnement CSS de savoir pour quels choix opter et dans quels cas. Aussi, une marche à suivre simple pourrait être appliquée dans le choix d'une méthode à privilégier:

  1. Je laisse tant que faire se peut les éléments dans le flux et tire parti de ses bénéfices (décalages grâce aux marges, recouvrement par un bloc de toute la largeur d'un parent, etc.)
  2. J'ai besoin de sortir un élément du flux:
    1. Si j'ai le contrôle du contenu de ma page ou que je suis assuré que mon élément hors flux sera systématiquement moins long que ce qui demeure dans le flux, je privilégie la propriété adéquate: position
    2. Si je n'ai aucun contrôle fiable sur des longueurs de contenu totalement inconnues et variables, j'opte pour des placements à base de flottants exclusivement sur les éléments qui l'imposent

Nous voyons donc que le seul cas où l'utilisation de flottants pour créer du multi-colonnage est plus adaptée est lorsque nous ne pouvons prédire quelle sera la plus haute des colonnes et qu'à celles-ci succèdent d'autres contenus.

Utilisez à bon escient les outils dont vous disposez et n'optez jamais pour une solution sans en évaluer les avantages et inconvénients; la réflexion de structuration de l'information va au-delà d'un balisage sémantique…

Initiation au positionnement CSS : 1.flux et position relative

 

En bref

Par défaut, les navigateurs affichent les boîtes issues du document html dans l’ordre du flux normal. En position relative, un élément peut être décalé verticalement et/ou horizontalement.


Pour représenter le positionnement en flux normal, on peut imaginer le navigateur parcourant (logiquement) la page de code HTML du début à la fin et retranscrivant son contenu au fur et à mesure des balises rencontrées. Comme dans la lecture d'un texte, il procède verticalement, commençant en « haut » de l'écran pour aller jusqu'en « bas », et horizontalement de gauche à droite, sur la totalité de l'espace disponible et nécessaire en largeur comme en hauteur.

Boîte de type bloc en flux normal

Par défaut, les boîtes de type bloc seront affichées dans une succession verticale. Prenons par exemple deux blocs différenciés par leur couleur :

En HTML :

<p class="jaune">Une boîte jaune</p>
<p class="verte">Une boîte verte</p>

En CSS :

.jaune {
  background-color: #ffff00;
}
.verte {
  background-color: #00ff00;
}

Le résultat, illustré par la figure ci-dessous, peut être observé également dans exemple 1 :

Boîtes de type bloc en flux normal

Code HTML :

<p class="rouge">Une boîte rouge</p>
<p class="vert">Une boîte verte</p>

Code CSS :

.rouge {background-color: #ff9999;}
.vert {background-color: #99cc99;}

Résultat :

Une boîte jaune

Une boîte verte

Boîtes de type en-ligne en flux normal

Code HTML :

<p>
<span class="rouge">Une boîte rouge</span>
<span class="vert">Une boîte verte</span>
</p>

code CSS :

p {border: 1px dotted #000000;}
.rouge {background-color: #ff9999;}
.vert {background-color: #99cc99;}

Résultat :

Une boîte jaune Une boîte verte

Boîte en position relative

Code HTML:

<p>Lorem
<span class="jaune">boîte en position relative</span>
 ipsum dolor.</p>

Code CSS:

.jaune {
position: relative;
bottom: 5px;
background-color: #ffff00;
}

Résultat :

Loremboîte en position relative ipsum dolor.

Boîte en position relative avec chevauchement

Code HTML:

<p>Lorem
<span class="jaune">boîte en position relative</span>
 ipsum dolor.</p>

Code CSS:

.jaune {
position: relative;
bottom: 5px;
left: 3em;
background-color: #ffff00;
}

Résultat :

Loremboîte en position relative ipsum dolor.

L'un au dessus de l'autre, la boîte bloc rectangulaire jaune et la boîte rectangulaire verte

Le navigateur traite successivement les deux éléments rencontrés. Comme il s'agit d'éléments de type bloc, il aligne la marge gauche de chaque élément sur la marge gauche de l'élément conteneur, c'est à dire ici le bloc conteneur initial.

Les principaux éléments créant des boîtes bloc sont :

  • l'élément div ;
  • les titres h1, h2, h3, h4, h5, h6 ;
  • le paragraphe p ;
  • Les listes et éléments de liste ul, ol, li, dl, dd ;
  • Le bloc de citation blockquote ;
  • Le texte pré-formaté pre ;
  • L'adresse address.

Boîte de type en-ligne

Par défaut, les boîtes de type en-ligne sont affichées dans une succession horizontale. Prenons par exemple deux portions de texte différenciées par leur couleur :

En HTML :

<p>
  <span class="jaune">Une boîte jaune</span>
  <span class="verte">Une boîte verte</span>
</p>

En CSS :

.jaune {
  background-color: #ffff00;
}
.verte {
  background-color: #00ff00;
}

Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 2 :

Boîtes de type bloc en flux normal

Code HTML :

<p class="rouge">Une boîte rouge</p>
<p class="vert">Une boîte verte</p>

Code CSS :

.rouge {background-color: #ff9999;}
.vert {background-color: #99cc99;}

Résultat :

Une boîte jaune

Une boîte verte

Boîtes de type en-ligne en flux normal

Code HTML :

<p>
<span class="rouge">Une boîte rouge</span>
<span class="vert">Une boîte verte</span>
</p>

code CSS :

p {border: 1px dotted #000000;}
.rouge {background-color: #ff9999;}
.vert {background-color: #99cc99;}

Résultat :

Une boîte jaune Une boîte verte

Boîte en position relative

Code HTML:

<p>Lorem
<span class="jaune">boîte en position relative</span>
 ipsum dolor.</p>

Code CSS:

.jaune {
position: relative;
bottom: 5px;
background-color: #ffff00;
}

Résultat :

Loremboîte en position relative ipsum dolor.

Boîte en position relative avec chevauchement

Code HTML:

<p>Lorem
<span class="jaune">boîte en position relative</span>
 ipsum dolor.</p>

Code CSS:

.jaune {
position: relative;
bottom: 5px;
left: 3em;
background-color: #ffff00;
}

Résultat :

Loremboîte en position relative ipsum dolor.

De gauche à droite, la boîte rectangulaire jaune et la boîte rectangulaire verte

Les principaux éléments créant des boîtes en ligne sont :

  • l'élément span ;
  • le lien a ;
  • L'image img ;
  • Les emphases em et strong ;
  • La citation q ;
  • La citation cite ;
  • L'élément code ;
  • Le texte entré par l'utilisateur kbd ;
  • L'exemple samp ;
  • La variable var ;
  • Les abréviations et acronymes abbr, acronym ;
  • Le texte inséré ins ;
  • Le texte supprimé del.

Pour résumer le flux normal : c'est un traitement linéaire du contenu de la page. L'alignement des boîtes bloc est vertical ; l'alignement des éléments en-ligne dans les boîtes bloc est horizontal.

La position relative

Le positionnement relatif permet d'inscrire un contenu en flux normal, puis de le décaler horizontalement et/ou verticalement. Le contenu suivant n'est pas affecté par ce déplacement, qui peut donc entraîner des chevauchements.

Soit par exemple un positionnement relatif indice qui stipule un décalage vers le haut de 5 pixels et un arrière-plan jaune :

En HTML :

<p>
  Lorem
  <span class="jaune">
    boîte en position relative
  </span>
  ipsum dolor.
</p>

En CSS :

.jaune {
  position: relative;
  bottom: 5px;
  background-color: #ffff00;
}

Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 3 :

Boîtes de type bloc en flux normal

Code HTML :

<p class="rouge">Une boîte rouge</p>
<p class="vert">Une boîte verte</p>

Code CSS :

.rouge {background-color: #ff9999;}
.vert {background-color: #99cc99;}

Résultat :

Une boîte jaune

Une boîte verte

Boîtes de type en-ligne en flux normal

Code HTML :

<p>
<span class="rouge">Une boîte rouge</span>
<span class="vert">Une boîte verte</span>
</p>

code CSS :

p {border: 1px dotted #000000;}
.rouge {background-color: #ff9999;}
.vert {background-color: #99cc99;}

Résultat :

Une boîte jaune Une boîte verte

Boîte en position relative

Code HTML:

<p>Lorem
<span class="jaune">boîte en position relative</span>
 ipsum dolor.</p>

Code CSS:

.jaune {
position: relative;
bottom: 5px;
background-color: #ffff00;
}

Résultat :

Loremboîte en position relative ipsum dolor.

Boîte en position relative avec chevauchement

Code HTML:

<p>Lorem
<span class="jaune">boîte en position relative</span>
 ipsum dolor.</p>

Code CSS:

.jaune {
position: relative;
bottom: 5px;
left: 3em;
background-color: #ffff00;
}

Résultat :

Loremboîte en position relative ipsum dolor.

Le texte de la boîte jaune se décale de 5 pixels vers le haut par rapport au reste du paragraphe

Pour illustrer le risque de chevauchement, ajoutons un décalage vers la droite :

En CSS :

.jaune {
  position: relative;
  bottom: 5px;
  left: 3em;
  background-color: #ffff00;
}

Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 4 :

Boîtes de type bloc en flux normal

Code HTML :

<p class="rouge">Une boîte rouge</p>
<p class="vert">Une boîte verte</p>

Code CSS :

.rouge {background-color: #ff9999;}
.vert {background-color: #99cc99;}

Résultat :

Une boîte jaune

Une boîte verte

Boîtes de type en-ligne en flux normal

Code HTML :

<p>
<span class="rouge">Une boîte rouge</span>
<span class="vert">Une boîte verte</span>
</p>

code CSS :

p {border: 1px dotted #000000;}
.rouge {background-color: #ff9999;}
.vert {background-color: #99cc99;}

Résultat :

Une boîte jaune Une boîte verte

Boîte en position relative

Code HTML:

<p>Lorem
<span class="jaune">boîte en position relative</span>
 ipsum dolor.</p>

Code CSS:

.jaune {
position: relative;
bottom: 5px;
background-color: #ffff00;
}

Résultat :

Loremboîte en position relative ipsum dolor.

Boîte en position relative avec chevauchement

Code HTML:

<p>Lorem
<span class="jaune">boîte en position relative</span>
 ipsum dolor.</p>

Code CSS:

.jaune {
position: relative;
bottom: 5px;
left: 3em;
background-color: #ffff00;
}

Résultat :

Loremboîte en position relative ipsum dolor.

Le texte de la boîte jaune se décale de 5 pixels en haut et de 3em à droite : il déborde sur le texte qui suit

Initiation au positionnement CSS : 2.position float

  • Profil : Expert
  • Technologie : CSS
  • Thème : Mise en page
  • Auteur : Laurent Denis
  • Mise à jour : 30/06/2008

En bref

La position float retire une boîte du flux normal pour la placer le plus à droite ou le plus gauche possible dans son conteneur. Comment l’utiliser dans une mise en page CSS ?


Cet article fait suite à l'initiation au positionnement CSS : 1.Flux et position relative.

Une boîte flottante est retirée du flux normal, et placée le plus à droite (float: right) ou le plus à gauche (float: left) possible dans son conteneur. Le contenu suivant cette boîte flottante s'écoule le long de celle-ci, dans l'espace laissé libre.

Le fonctionnement des flottants

Ajoutons aux styles précédents une règle de positionnement flottant à droite et une mesure de largeur (facultative, mais utile pour certains navigateurs) :

En HTML:

<p class="jaune">Une boîte jaune flottant</p>
<p class="verte">Une boîte verte doté d'un contenu plus long…</p>

En CSS:

.jaune {
  background-color: #ffff00;
  float: right;
  width: 100px;
  margin: 0;
}
.verte {
  background-color: #00ff00;
}
    

Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 1

Le texte de la boîte verte passe à la ligne à hauteur de la boîte jaune

Le navigateur place tout d'abord la boîte jaune, alignée sur le bord droit de cette partie de notre page, puis reprend le cours normal du flux dans l'espace laissé libre à sa gauche pour afficher la boîte verte. Le flux occupe tout l'espace disponible: la boîte verte reprend donc toute la largeur de la page sitôt passée la limite inférieure de la boîte flottante jaune.

Dans les navigateurs n'appliquant pas la feuille de style (navigateurs texte ou non conformes aux standards…), la boîte flottante sera simplement inscrite en flux normal avant la boîte qui la suit.

Première utilisation : une mise en page à deux colonnes

La combinaison de la position flottante et du flux permet de réaliser aisément une mise en page à deux colonnes (un contenu et un menu) :

En CSS :

.content {
  float: left;
  width: 70%;
}
.menu {
  margin-left: 80%;
  border: 1px solid #000000;
  padding: 1em;
}
    

Et en HTML :

…
<body>
  <div class="content">
    …
  </div>

  <div class="menu">
    <ul>
      <li>lien_1</li>
      <li>lien_2</li>
      <li>lien_3</li>

    </ul>
  </div>
</body>
    

Le résultat, illustré par la figure ci-dessous, peut être observé également dans la page-exemple 1

Un menu dans la colonne droite flanquant le contenu de la page

Seconde utilisation : une mise en page à trois colonnes et plus

Mais on peut tout aussi bien multiplier les flottants pour créer autant de colonnes que voulu :

En CSS :

body {
  margin: 0;
  padding: 0;
}
.float {
  float: left;
  width: 25%;
  margin: 1em 0;
}
p,h1,h2 {
  margin: 1em;
}
    

Et en HTML :

…
<body>
  …
  <div class="float">
    …
  </div>

  <div class="float">
    …
  </div>
  <div class="float">
    …
  </div>
  <div class="float">

    …
  </div>
</body>
    

Le résultat, illustré par la figure ci-dessous, peut être observé également dans la page-exemple 2 :

Sous le titre, 4 colonnes d'égale largeur.

Débordement et spacer

Le problème du débordement

Reprenons notre exemple, mais inversons les contenus: celui de la boîte flottante jaune est à présent plus long que celui de la boîte verte :

En HTML :

<p class="jaune">
  Une boîte jaune flottant doté d'un contenu plus long…
</p>
<p class="verte">
  Une boîte verte
</p>
      

Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 2 :

La boîte jaune déborde vers le bas au-delà de la boîte verte

La boîte flottante, plus longue que la boîte verte, déborde verticalement plus bas que celle-ci.

La solution : le spacer

Pour éviter cet effet parfois disgracieux, la solution la plus répandue est le spacer de Mark Newhouse : elle consiste à inclure dans la boîte verte un élément bloc au contenu fictif (l'espace insécable  ), doté de la propriété clear qui lui interdit d'être adjacent à une boîte flottante.

En HTML :

<div class="verte5">
  <p class="jaune5">
    Une boîte jaune flottant doté d'un contenu plus long…
  </p>
  <p>
    Une boîte verte
  </p>

  <div class="spacer"> </div>
</div>
      

En CSS :

.jaune {
  background-color: #ffff00;
  float: right;
  width: 100px;
  text-align: center;
  margin: 0;
}
.verte {
  width: 100%;
  background-color: #00ff00;
}
.spacer {
  clear: both;
}
      

Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 3

La boîte jaune ne déborde plus vers le bas au-delà de la boîte verte

Le bloc spacer, ne pouvant se placer à côté du bloc flottant, se trouve décalé plus bas que celui-ci.

Note : —

IE a parfois quelques difficultés à représenter correctement les arrières-plans et les bordures dans les combinaisons intégrant des boîtes flottantes à droite et des séparateurs dotés de la propriété clear: both.

Les vignettes : une utilisation du spacer et des flottantes

Mark Newhouse appliquait en particulier cette solution à une série de boîtes flottantes placées dans une boîte conteneur dont le contenu propre se réduit au spacer : elle ne sert qu'à créer une boîte délimitant l'espace visuel où s'affichent les boîtes flottantes.

En CSS :

.flottante {
  background-color: #00ff00;
  border: 2px dotted #ffff00;
  margin: 2px;
  float: left;
  width: 100px;
  text-align: center;
}
.conteneur {
  width: 100%;
}
.spacer {
  clear: both;
}
      

En HTML :

<div>
  <p class="flottante">boîte verte 1</p>
  <p class="flottante">boîte verte 2</p>
  <p class="flottante">boîte verte 3</p>

  …etc…
  <div class="spacer"> </div>
</div>
      

On obtient une série de vignettes pouvant accueillir par exemple des images, les liens d'un menu de navigation, etc. ou encore permettant de réaliser une mise en page en colonnes… Elle s'adapte automatiquement à la largeur d'affichage disponible : faute de place à droite, une boîte flottante sera replacée à la ligne.

Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 4

6 vignettes alignées de gauche à droite sur deux lignes

Une variante du spacer : <hr />

Le défaut du spacer est d'introduire dans le code HTML un contenu fictif à des fins de présentation…

Lorsque la boîte adjacente à la boîte flottante est suivie d'une coupure logique dans votre page (nouvelle section de texte…), il est préférable d'associer la propriété clear à un contenu réel. La ligne horizontale créée par la balise <hr /> peut jouer avantageusement ce rôle :

En HTML :

<p class="jaune">
  Une boîte jaune flottant doté d'un contenu plus long…
</p>
<p class="verte">
  Une boîte verte

</p>
<hr />
      

En CSS :

.jaune {
  background-color: #ffff00;
  float: right;
  width: 100px;
  margin: 0;
}
.verte {
  background-color: #00ff00;
}
hr {
  clear: both;
}
      

Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 5

La ligne horizontale en bas de la boîte verte empêche le débordement de la boîte jaune

La ligne de séparation s'avère très utile pour les utilisateurs de navigateurs qui ne tiendront pas compte de la feuille de style (navigateurs textes, navigateurs périmés…) Il est possible de leur en réserver l'affichage, en le supprimant dans les navigateurs qui appliqueront la feuille de style, à l'aide de la propriété visibility: hidden;: celle-ci rend un élément invisible, tout en le laissant agir sur le flux.

hr {
  clear: both;
  visibility: hidden;
}
      

Le résultat (figure ci-dessous et exemple 6) est visuellement identique au spacer précédent.

La boîte jaune ne déborde plus vers le bas au-delà de la boîte verte

Et appliqué à la série de vignettes flottantes, le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 7 :

6 vignettes alignées de gauche à droite sur deux lignes

Initiation au positionnement CSS : 3. position absolue et fixe

  • Profil : Expert
  • Technologie : CSS
  • Thème : Mise en page
  • Auteur : Laurent Denis
  • Mise à jour : 01/09/2008

En bref

La position absolue et la position fixe permettent de placer une boîte par rapport aux limites de la zone d’affichage ou du conteneur. Comment les utiliser dans une mise en page CSS ?


Cet article fait suite à l'initiation au positionnement CSS: 2.position float.

Une boîte en positionnement absolu peut être placée n'importe-où dans le code HTML et s'afficher à l'endroit de votre choix. Ceci s'avère très utile en particulier pour :

  • placer les menus de navigation en fin de page, pour améliorer l'accessibilité de votre site en donnant un accès immédiat à son contenu dans les navigateurs textes, tout en les faisant apparaître en haut de page ou encore dans une colonne pour les navigateurs graphiques ;
  • créer plusieurs colonnes au positionnement indépendant de l'ordre dans lequel elles se trouvent en HTML.

Le fonctionnement de la position absolue

Le positionnement absolu « retire » totalement du flux le contenu concerné : sa position est déterminée par référence aux limites du conteneur. Celui-ci peut-être :

  • une boîte elle-même positionnée (position relative ou absolue) ;
  • le bloc conteneur initial, à défaut de boîte positionnée, c'est à dire en pratique le plus souvent la fenêtre du navigateur.

Définissons un conteneur verte en position relative :

.verte {
  position: relative;
  background-color: #00ff00;
  width: 15em;
}
    

Et un positionnement absolu jaune :

.jaune {
  position: absolute;
  top: 1em;
  right: 1em;
  background-color: #ffff00;
}
    

Et appliquons ces styles :

<div class="verte">
  <p>
    …
  </p>
  <p class="jaune">
    Boîte jaune en position absolue
  </p>

</div>
    

Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 1

La boîte jaune recouvre une partie du contenu de la boîte verte

Ménager un espace pour la boîte en position absolue

Inévitablement, la boîte en position absolue recouvre le contenu de notre paragraphe. Pour l'éviter, dotons la boîte conteneur verte d'un remplissage supérieur suffisant :

.verte {
  padding-top: 5em;
}
    

Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 2

La boîte jaune occupe l'espace libre en haut de la boîte verte

Nous pourrions aussi bien fixer la largeur de la boîte jaune et doter le texte de la boîte verte d'un remplissage à droite :

.verte {
  padding-right: 7em;
}
.jaune {
  width: 4em;
}
    

Le résultat, illustré par la figure ci-dessous, peut être observé également dans l'exemple 3

La boîte jaune occupe l'espace libre à droite de la boîte verte

Utilisation : une mise en page à trois colonnes

La position absolue offre donc une alternative aux flottants pour réaliser des mises en pages à plusieurs colonnes. Le cas typique est celui des trois colonnes dont voici le code :

En CSS :

centre {
  margin: 1em 25%;
}
.gauche {
  position: absolute;
  top: 1em;
  left: 1%;
  width: 18%;
}
.droite {
  position: absolute;
  top: 1em;
  right: 1%;
  width: 18%;
}
    

En HTML :

<body>
  <div class="centre">
    …
  </div>

  <div class="gauche">
    …
  </div>
  <div class="droite">
    …
  </div>
</body>
    

Le résultat, illustré par la figure ci-dessous, peut être observé également dans la page-exemple 1 :

Trois colonnes dans la largeur de la page

La position fixe

Comme dans un positionnement absolu, le contenu concerné est retiré totalement du flux. Mais il est cette fois positionné uniquement par rapport aux limites de la zone de visualisation, autrement dit la fenêtre du navigateur. Le défilement de la page n'a aucun effet sur un contenu en position fixe.

Le positionnement fixe n'étant pas reconnu par Internet Explorer 5 et 6 Windows, un positionnement absolu doit s'y substituer dans ce navigateur. Ce résultat peut être atteint grâce à diverses formulations des styles jouant sur des syntaxes CSS2 ignorées par MSIE. Par exemple :

.fixe {
  position: absolute;
  top: 10px;
  left: 10px;
}
html>body .fixe {
  position: fixed;
}
    

MSIE Windows ne lira que la première définition de .fixe et ignorera la seconde car il ne comprend pas la syntaxe html>body. Les navigateurs supportant la position fixe liront les deux positionnements, mais le second se substituera au premier car il est placé après celui-ci dans la feuille de style.

Tout comme le positionnement absolu, le positionnement fixe est susceptible de provoquer des chevauchements. On employera donc des méthodes similaires pour l'exploiter.

Pour fixer un menu de navigation dans une colonne vide à gauche du contenu, on définira les largeurs du contenu et du menu :

En CSS :

.content {
  width: 65%;
  border: 1px solid #000000;
  padding: 1em 1%;
}
.menu {
  position: absolute;
  top: 1em;
  right: 1%;
  border: 1px solid #000000;
  padding: 1em;
  width: 20%;
}
html>body .menu {
  position: fixed;
}
    

En HTML :

<body>
  <div class="content">
  …
  </div>
  <div class="menu">
  …
  </div>

</body>
    

Le résultat, illustré par la figure ci-dessous, peut être observé également dans la page-exemple 2

Un menu fixe dans la colonne droite flanquant le contenu de la page

Utilisation : une barre de menu fixe

Lorsqu'il s'agit de créer une mise en page avec contenu et menus, la position fixe a l'inconvénient apparent de sacrifier une partie de la largeur d'affichage disponible, pour éviter les chevauchements.

En fait, cet inconvénient disparaît sitôt qu'on tire profit du chevauchement au lieu de chercher à l'éviter, à la manière d'Emmanuel Clément (notre designer d'OpenWeb). Imaginons une barre de menu horizontale, fixée en permanence en haut de la fenêtre d'affichage :

En CSS :

.menufixe {
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid #000000;
  position: absolute;
  z-index: 2;
  text-align: center;
  background-color: #ffffff;
  line-height: 2em;
}

html>body .menufixe {
  position: fixed
}
.content {
  z-index: 1;
  padding-top: 3em;
}
    

En HTML :

<body>
  <div class="content">
    …
  </div>
  <p class="menufixe">

    …
  </p>
</body>
    

Le résultat, illustré par la figure ci-dessous, peut être observé également dans la page-exemple 3 :

Une barre de menu fixe en permanence en haut de la fenêtre du navigateur

Combinaisons des positions fixe et absolue

Imaginons à présent deux menus différents, tous deux placés dans la même colonne :

  • le premier sera fixe en haut de la colonne ;
  • le second sera en position absolue plus bas dans la même colonne.

La propriété CSS z-index permet de spécifier le niveau d'empilement de chaque menu : avec un z-index supérieur à celui du menu fixe et un arrière-plan opaque, le menu en position absolue masquera temporairement celui-ci lors du défilement de la page. Le code nécessaire est :

En CSS :

.content {
  width: 65%;
  border: 1px solid #000000;
  padding: 1em 1%;
}
.menufixe {
  position: absolute;
  top: 1em;
  right: 2%;
  border: 1px solid #000000;
  padding: 1em;
  width: 18%;
  z-index: 2;
}
html>body .menufixe {
  position: fixed;
}
.menuabsolu {
  position: absolute;
  top: 15em;
  right: 1%;
  border: 1px solid #000000;
  padding: 1em;
  width: 20%;
  background-color: #ffffff;
  z-index: 3;
}
    

En HTML :

<body>
  <div class="content">

    …
  </div>
  <div class="menu">
    …
  </div>
</body>
    

Le point délicat est, bien-sûr, le choix de la valeur donnée à la propriété top du menu en position absolu, afin d'être sûr qu'il n'empiète pas sur l'espace du menu en position fixe.

Le résultat, illustré par la figure ci-dessous, peut être observé également dans la page-exemple 4 :

Un menu fixe et un menu absolu dans la colonne droite flanquant le contenu de la page

Conclusion

Le positionnement CSS donne donc toute liberté dans la mise en page. Comparée à l'utilisation des tableaux, cette technique offre des avantages essentiels :

  • gestion de la présentation à partir d'un document unique pour un nombre quelconque de pages ;
  • stricte séparation du contenu et de la présentation, d'où un contenu mieux structuré, dénué de balisage superflu ;
  • meilleure accessibilité, le contenu pouvant être organisé correctement dans les navigateurs non graphiques, tout en étant librement disposé dans les navigateurs graphiques ;
  • elasticité des mises en page obtenues, qui s'adaptent plus facilement aux différentes configurations des utilisateurs (taille de la zone d'affichage, règlages de tailles de caractères…) ;
  • effets graphiques nouveaux, tels le recouvrement en position fixe/absolue.


 
  Aujourd'hui sont déjà 2 visiteurs (9 hits) Ici! ;  
 
Ce site web a été créé gratuitement avec Ma-page.fr. Tu veux aussi ton propre site web ?
S'inscrire gratuitement