Table des matièresMise en page CSS

Comment les pages sont-elles mises en page en général ?

Nous disposons de plusieurs solutions stables, presque toutes acceptées par la majorité des navigateurs

  1. A l'aide de blocs flottants "float" ?
  2. A l'aide de blocs mis en tableau css "table-cell" ?
  3. A l'aide de "container" flexible "flex" ?

D'après le site http://caniuse.com, seule l'attribut "flex" pourait encore poser problème pour IE9 et ses précédécessurs utilisés à 0,85%

Mais curieusement, c'est toujours la solution historique en blocs flottants qui restent la plus présentes.

Entrons dans le vif du Sujet

I Premier exemple, l'accueil du figaro

1 - le shell, ou wrapper ou global

Examinons la page du figaro.fr :

On note un conteneur englobant l'ensemble de la page permettant le centrage :

<div id="shell">
</div>

On retrouve la méthode usuelle de centrage : largeur fixe et margin auto.

#shell {
    width: 1000px;
    margin: 0px auto;
    overflow-x: visible;
}

2 - La colonne de gauche

C'est la marge à droite qui permet de maintenir la place nécesssaire à la colonne de droite

<div class="fig-2cols" style="min-height: 13692px;">
</div>
.fig-2cols {
    overflow: hidden;
    zoom: 1;
    width: auto;
    padding-right: 323px;
    clear: both;
}

3 - La colonne de droite

C'est la marge à droite qui permet de maintenir la place nécesssaire à la colonne de droite

<div class="fig-col fig-side-col" style="position: relative; margin-top: 0px; margin-left: 0px; padding-top: 0px;">
</div>

Noter la marge négative égale à la largeur, en effet cette colonne droite est incluse dans la div de la colonne gauche pour apparaître dans sa marge. D'où la translation à l'extérieur permis par la marge négative.

.fig-2cols .fig-side-col {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: right;
    width: 323px;
    margin-right: -323px;
    border-right: 1px solid #ccc;
}

II Exemple d'un 3 colonnes : la société générale particulier

1 - le shell, ou wrapper ou global

Examinons la page de consultation de la société générale: sdfg

On note un conteneur englobant l'ensemble de la page permettant le centrage :

 

<div id="n2g_conteneur">
</div>

On retrouve la méthode usuelle de centrage : largeur fixe et margin auto.

#n2g_conteneur {
    margin: 5px auto 0 auto;
    padding: 5px 0px 0px 0px;
    width: 980px;
    min-height: 788px;
}

2 - La colonne de gauche

Largeur fixe, flottante gauche

<div id="n2g_zone_gauche"> 
</div>
#n2g_zone_gauche {
    width: 174px;
    float: left;
    padding-left: 5px;
    padding-right: 0px;
}

3 - Le centre

C'est la marge à droite qui permet de maintenir la place nécesssaire à la colonne de droite

sdfg

Largeur fixe et flottante gauche

n2g_zone_centre {
    border-top: solid #ccc 1px;
    width: 600px;
    float: left;
    margin-left: 10px;
    padding-right: 10px;
}

4 - Colonne droite

Toujours flottante gauche

sdfg

<div id="n2g_zone_gauche"> 
</div> <div id="n2g_zone_milieu">
</div> <div id="n2g_zone_droite">
</div>
#n2g_zone_droite {
    border-top: solid #ccc 1px;
    width: 174px;
    float: left;
    padding-right: 5px;
    padding-left: 0px;
}

III Template fluide d'adobe

Cette étude provient des templates fournis par l'éditeur Adobe http://www.adobe.com/devnet/archive/dreamweaver/articles/introducing_new_css_layouts.html

Ils datent de 2010, et prévoir encore un usage de IE6. Ce qui serait inutile actuellement, sauf usage très spécifique d'une administration très conservatrice. Le HTML5 n'y est pas encore pleineent mis en oeuvre : on pourra substituer au <div> les balises <header>, <nav>, etc. L'exercice consistera à les simplifier avec les attributs actuels. Leurs commentaires restent très utiles pour comprendre le modèle de boîte, la notion de blocs et de flottants.

Exemple
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Document sans nom</title>
</head>
<body>
<div class="container">
<div class="header"> <a href="#"><img src="" alt="Insérer le logo ici" name="Insert_logo" width="20%" height="90" id="Insert_logo" style="background: #8090AB; display:block;" /> </a>
</div>
<div class="sidebar1">
<ul class="nav">
<li><a href="#">Lien un</a></li>
<li><a href="#">Lien deux</a></li>
<li><a href="#">Lien trois</a></li>
<li><a href="#">Lien quatre</a></li>
</ul>
</div>
<div class="content">
<h1>Instructions</h1>
</div>
<div class="sidebar2">
<h4>Arrière-plans</h4>
</div>
<div class="footer">
<p>Ce .footer contient.</p>
</div>
</div>
</body>
</html>

 

CSS commenté

IV Webographie

http://necolas.github.io/normalize.css/

Tour de chauffe

Exercice 1 : box-sizing

Reprendre le code précédent

  1. En le simplifiant à l'aide de l'attibut box-sizing (maitien des larguers fluides sans reset des marges)
  2. En plaçant les balises <header><main><aside><footer>

Exercice 2 : colonnes factices

Le site alsacréations http://www.alsacreations.com/static/gabarits/liste.html, détaille dans son forum des gabarits.

Reprendre celui des colonnes factices, et détailler le mécanisme avec les attributs CSS qui permettent dans cette configuration de créer des colonnes qui ont visuellement toutes la même hauteur.

Exercice 3 : table-cell

En vous appuyant sur l'article http://colintoh.com/blog/display-table-anti-hero recréer un template 3 colonnes fluides avec un display:table à partir du code obtenu dans l'exercice 1