Études supérieures - Les enseignements - Plateforme Temps Réel - Atelier Hypermédia - HTML / CSS -

web#09 { CSS : mise en page ; }

Les deux bases du design graphique sont la typographie et la mise en page. Nous venons de présenter une introduction rapide à la typographie sous CSS, il est maintenant temps de passer à sa disposition.

Contrairement à une page classique, où les dimensions sont connus d’avance, pour la mise en page web le designer ne peut jamais savoir combien de place il dispose pour ses contenus. Commençons par le problème de savoir à quelle résolution se trouve l’écran de celui qui regardera votre page : 1024 x 768 pixels ? 800 x 600 pixels ? 2048 x 1280 ? 9999 x 9999 ? Ensuite, à l’intérieur de cet écran, combien de place reste-t-il pour afficher la page ? Et encore, à quelle taille s’affichent les polices de l’utilisateur : 12 points ? 24 points ? 48 points ? Puis enfin, quelles sont les dimensions verticales nécessaires pour afficher une page, sachant que les contenus textuels sont de longeurs variables, surtout dans le cas des blogs. C’est pour cette raison que nous préférons parler de volumen pour les sites web, plutôt que de pages, car la page est toujours - pour toutes ces raisons - de taille variable, au moins verticalement.

En conséquence, la mise en page avec CSS doit rester relativement souple, voire tolérant, et s’adapter aux contenus variables en cherchant à faire rentrer ces contenus dans des zones sans chercher à placer tel ou tel mot à tel ou tel endroit. Dans le cas des images, il est plus facile de les placer au pixel près via le CSS, mais même dans ce cas - par exemple pour un blog où il peut y avoir un jour une image puis un autre jour trois - il est souhaitable de chercher à fixer des règles ouverts et arrêter la rétention du stade anal typique d’un graphiste gâté par la mise en page sous Xpress ou InDesign.

La logique des boîtes

Comme nous l’avons déjà expliqué lors de notre introduction au feuilles de style CSS, la structure d’une page web suit la logique des poupées russes avec des élements qui contiennent des élements qui contiennent des élements. Un <body> peut contenir un <p> qui peut contenir quelques <a> ou quelques <em>. Une liste <ul> peut contenir des sous-élements <li>, avec chacun des sous-élements suivant la logique d’alignement de l’élement qui le contient.

On rappelle également que si on veut identifier un ensemble, pour par exemple colorier plusieurs paragraphes en bleu, on doit les entourer avec un <div> et </div> qui existe plus ou moins pour des besoins de présentation graphique. En donnant un identifiant à ce <div id="untel"> on peut controller son apparence via les feuilles de style CSS. Du coup, tous les sous-élements contenus à l’intérieur du <div id="untel"> et </div> réspecteront les règles définis par cet ensemble. Ce dernier principe est très pratique et souvent utilisé pour le sujet de ce cours, à savoir la disposition des élements sur une page web - comme nous verrons plus loin.

Coupures & flux continus

mais pour comprendre mieux l’idée des boites et de leur séparation des unes des autres, regardons en premier le sélecteur display. Il peut peut être affecté à n’importe quel élement sur la page. Il détermine trois types d’affichage pour cet objet :

- une affichage par «  block  », c’est-à-dire dégagé des autres élements
- une affichage intégré dans le flux de l’élement qui le contient, c’est-à-dire tout sur la même ligne («  inline  »)
- aucune affichage (none)

Voici l’exemple de départ qui sera affecté ensuite ces trois modes affichage :

Notez qu’il y a deux titres de type <h1> et <h3>, un paragraphe, suivi d’une liste de trois élements qui d’habitude suivent la logique de block, c’est-à-dire que chaque élement par défaut se trouve sur sa propre ligne.

maintenant en utilisant les trois instructions de display, nous allons commencer par éffacer tout ce qui se trouve entre <h1> et </h1> en indiquant none, c’est-à-dire aucune affichage :

Ensuite nous mettons le paragraphe à l’intérieur du flux du titre <h3> en indiquant que les deux élements sont à l’intérieur de la même ligne : inline.

Et finalement, nous demandons à tous les élements de la liste de se mettre sur la même ligne, comme le flux d’un paragraphe normale, mais que le troisième reprenne sa nature de block, c’est-à-dire séparé des autres. Remarquez la couleur jaune qui aide à comprendre ces logiques.

Résumé. Le sélecteur CSS display est parfois essentiel pour controller l’emplacement des objets sur la page. Il nous rapelle églament la logique des block, important pour la suite. mais après tout, ce sélecteur ne fait pas grand chose d’autre : il met des élements sur une ligne, tout seul, ou les fait disparaître, mais ne nous permet pas de positionner les élements avec plus de souplesse.

Relative ou Absolute

Pour un plus grand contrôle des objets de notre site, il y a deux sélecteurs beaucoup plus importants pour le positionnement CSS : relative et absolute. Il existe en réalité d’autres termes (cf. fixed), mais ces sélecteurs ne sont pas tous compatibles avec tous les navigateurs, et pour démarrer la mise-en-page sous CSS vous n’avez besoin de tout façon que de ces deux termes clés.

Dans la logique CSS il y a des éléments «  relative  », c’est-à-dire des élements de la page qui s’affichent en continu à l’intérieur d’un flux (par exemple du texte), puis il y a des élements «  absolute  », c’est-à-dire des élements qui flottent au dessus du flux et sont positionnés où on veut, par exemple par-dessus les autres élements de la page. Autrement dit, un élement «  absolute  » ne fait plus partie de l’ensemble qui le contient, par exemple un élement dans une liste rendu «  absolute  » ne fait plus partie de la liste.

Pour démontrer ces deux concepts, commençons avec une page relativement simple : six élements dans une liste, avec chacun son propre identifiant et sa propre couleur défini via la feuille CSS.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTmL 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>positionnement</title>
 <style type="text/css">
       @import url(css/style.css);
 </style>
</head>

<body>

 <ul>
       <li id="un">un</li>
       <li id="deux">deux</li>
       <li id="trois">trois</li>
       <li id="quatre">quatre</li>
       <li id="cinq">cinq</li>
       <li id="six">six</li>
 <ul>

</body>

</html>

body {
        background-color: grey;
}

#un {
        color: red;
}

#deux {
        color: green;
}

#trois {
        color: blue;
}

#quatre {
        color: yellow;
}

#cinq {
        color: white;
}

#six {
        color: rgb(100%,0%,100%);
}

maintenant, à partir de ce modèle de base, identifions des élements qui serons intégrés dans le flux de la liste, puis ceux qui seront détachés de ce flux pour être positionnés autremment :

Comme vous pouvez voir dans cet exemple, les élements #un, #cinq, et #six ont été identifés comme des élements relative, c’est-à-dire des éléments obéissants à l’alignement et au flux de la liste qui les contient. Et bien que ces deux derniers ne sont pas identifiés comme des relative, la valeur par défaut d’un élement est d’être relative.

Par contre, les élements #deux, #trois et #quatre sont tous identifiés comme des élements absolute, c’est-à-dire détachés du flux de la liste pour être positionnés autremment. Par exemple, l’élement #deux est détaché de la liste, puis repositionné à 0 pixels du bord gauche et verticalement au milieu du navigateur (top: 50%;). L’élement #quatre, par contre, est positionné à un quart de la taille de la fenêtre en partant de la gauche (left: 25%;), et tout en bas de la page (bottom: 0px;

Notez comment l’élement #trois a resté au même endroit, mais a été mélangé par l’élement #cinq qui a remonté dans la liste comme si le #trois n’était pas là. Car, en réalité, le #trois ne fait plus partie de la liste, il est devenu un élement indépendant et qui peut être placé maintenant n’importe où sur la page, y compris par dessus les élements relatifs.

Deux colonnes

Souvent, on utilise ces logiques d’emplacement pour créer ce qu’on appelle des colonnes, en suivant la logique d’un journal papier avec plusieurs colonnes sur la page. Le plus répandu est la distribution à deux colonnes, avec un menu à droite ou à gauche d’un bloc de texte central.

Pour construire cette page assez classique, nous allons créer d’abord notre page HTmL avec deux sections : un menu à base de liens, puis un bloc (<div>) contenant un titre (<h1>) et plusieurs paragraphes (<p>).


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTmL 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>deux colonnes</title>
 <style type="text/css">
       @import url(css/style.css);
 </style>
</head>

<body>

  <div id="contenu">

        <h1>Le titre de l'article</h1>

        <p>Le contenu de l'article sera écrit ici. Le contenu de l'article sera écrit ici. Le contenu de l'article sera écrit ici. Le contenu de l'article sera écrit ici. Le contenu de l'article sera écrit ici. Le contenu de l'article sera écrit ici. Le contenu de l'article sera écrit ici.</p>

        <p>Le contenu de l'article sera écrit ici. Le contenu de l'article sera écrit ici. Le contenu de l'article sera écrit ici. Le contenu de l'article sera écrit ici. Le contenu de l'article sera écrit ici. Le contenu de l'article sera écrit ici. </p>

  </div>

  <ul id="menu">
        <li><a href="#">acceuil</a></li>
        <li><a href="#">infos</a></li>
        <li><a href="#">liens</a></li>
  </ul>

</body>

</html>

Ensuite nous allons donner à cette page une feuille de style avec deux emplacements absolute, pour permettre de positionner ces blocs de texte où nous voulons.


#menu {
        position: absolute;
        left: 10px;
        width: 50px;
       
        /* enlever l'espacement de la liste */
        padding-left: 0px;
}

#contenu {
        position: absolute;
        left: 100px;
}

L’astuce consiste à intégrer des élements à l’intérieur d’un bloc (ici le <div id="contenu">) qui sera ensuite placé en tant qu’élement absolute où nous voulons sur la page. Les élements à l’intérieur du <div> réspecteront leur logiques internes de block ou de inline, selon la nature du contenu. mais l’ensemble peut maintenant être déplacé où nous voulons sur la page. Pareil avec le menu qui n’a même pas besoin de bloc <div>, puisque la balise <ul> joue déjà ce rôle d’englobant.

Centrer le bloc

Voici un dernier astuce pour centrer un bloc de texte à l’intérieur d’une fenêtre de largeur variable. Il utilise les logiques que nous venons d’explorer, en rajoutant une astuce qui peut sembler un peu étrange. Il s’agit de l’utilisation plutôt créative d’un sélecteur CSS appelé margin et qui peut prendre des valeurs ... négatives.

Reprenons le bloc de toute à l’heure avec le <div id="contenu">, donnons-lui un largeur quelconque et plaçons-le au centre du navigateur, quelque soit la largeur de celui-ci.

malheureusement, il n’existe pas de sélecteur pour centrer un élement d’office sur notre page. Comme on peut voir dans l’exemple, la feuille CSS indique que le bord gauche du bloc de texte doit se trouver au centre de la fenêtre du navigateur (left: 50%).

mais si nous conaissons le largeur de notre bloc de texte, nous pouvons au fait le centrer par rapport à son bord gauche, puis enlever la moitié de ce largeur en utilisant une fonction un peu étrange : les marges négatives.

Dans le CSS, les marges servent à repousser les élements des autres, à créer des écarts entre un élement et son voisin, sinon entre un élement et son cadre. Par contre, si nous donons une valeur négative pour cet écart, l’élement finit par se rapprocher de l’autre objet. Ce n’est pas une erreur du CSS, même si la logique est un peu particulier. L’idée c’est donc mettre notre <div id="contenu"> au milieu de l’écran en plaçant son bord gauche à 50%, puis en reculant sur la gauche la moitié de son largeur en le rapprochant avec le bord gauche de l’écran.

Si tout cela vous ressemble à du chinois, comprenez au moins cette idée : mettez le bord gauche de l’objet au milieu de l’écran, puis enlever la moitié de sa largeur avec une valeur négative pour sa marge gauche.

Du coup, avec un peu d’effort et en cumulant les effets des précédents cours, vous pouvez même faire revenir le menu avec un peu de style :


ESAAix - École supérieure d’art d’Aix-en-Provence - http://www.ecole-art-aix.fr