CSS : on reprend tout à zéro ! (épisode 9)

Par Joe Gillespie

Cet article est le neuvième d'une série qui en compte 15. Chaque épisode sera publié bimensuellement dans nos pages.

Neuvième étape : on met tout ensemble

Dès qu'on aborde des pages Web un peu élaborées, on utilise un mélange d'id et de class, voire de positionnement absolu et relatif. Retournons à notre page toute simple de la huitième étape, celle en cinq parties : peut-être pourrait-on avoir plusieurs colonnes dans la partie du milieu. Cela revient à utiliser la propriété de flottement (float), et je vais choisir float:left pour m'en tenir au plus simple.

En général, sur beaucoup de pages Web, la colonne de gauche contient les menus, ce qui veut dire qu'elle peut être assez étroite.

.col-gauche {}

La colonne du mileu contiendra le texte principal.

.col-milieu {}

Et tout à droite, nous allons placer une autre colonne étroite, pour des liens de référence ou de la publicité.

.col-droite {}

La taille de chaque colonne est indiquée en pourcentage, pour qu'elle soit fluide et s'adapte à la largeur de la page.

Vous noterez que j'utilise des classes (class) pour ces colonnes, parce que je pourrais souhaiter les réutiliser plus bas sur ma page.

Dans cet exemple, on remplace la simple partie .milieu par trois colonnes flottant à gauche.

<div class="col-gauche">...</div>
<div class="col-milieu">...</div>
<div class="col-droite">...</div>
Présentation avec trois colonnes

Voilà qui ouvre des perspectives de mise en page beaucoup plus intéressantes.

Ne laissez pas de div complètement vides, même si elles ne doivent contenir que du « blanc ». Placez-y un espace insécable &nbsp;.

 

Episode 10 »

Fiche technique

À propos de l'auteur

Joe Gillespie est un web designer qui partage ses passions pour le design, les CSS et la typographie depuis 8 ans sur son site Web Page Design for Designers. Il a pris sa retraite du Web cette année, au terme de 80 publications mensuelles. Dommage pour nous !

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Débutant

CSS

© 2001-2014 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site