La mise en page avec positionnement CSS

Beaucoup de concepteurs de pages web n'abordent pas ou trop peu le positionnement des éléments constituant leur page web par CSS.

C'est pourtant le moyen le plus simple pour avoir des pages homogènes et dont la présentation est stable sur tous les navigateurs. C'est ce qu'on va s'efforcer de démontrer ici.

La notion de bloc pour le positionnement CSS

En HTML5 - comme en HTML4 d'ailleurs -, il existe deux type d'éléments:

• les éléments qui délimitent les blocs: div, table, h1, etc...
• les éléments qui délimitent des portions de texte et ne sont pas des blocs: span, a, b, etc...

On ne peut positionner avec CSS que des éléments de type blocs. Exemple:

<div style='position: absolute; top: 10px; left: 40px; background-color: yellow;'>
    Ce texte est positionné
</div>

Ici, le contenu de l'élément div sera positionné en haut de page. Par contre:

<span style='position: absolute; top: 10px; left: 40px; background-color: yellow;'>
    Ce texte n'est pas positionné
</span>

Le contenu de l'élément span ne sera pas positionné, car span n'est pas un élément délimitant un bloc.

En HTML5, de nouveaux éléments servent de marqueurs sémantiques destinés à se substituer à l'élément div: article aside section header footer etc....

Voir: Un web plus sémantique avec HTML5

Ces nouveaux éléments ne délimitent pas des blocs. Initialement l'élément div marque un bloc. Pour remplacer ceci:

<div class="header">Mon en tête de page</div>

par ceci:

<header>Mon en tête de page</header>

Il est nécessaire d'indiquer par l'intermédiaire de CSS que cet élément header est un bloc:

<header style='display: block;'>Mon en tête de page</header>

A partir de cet instant, header se comportera comme div et on pourra le positionner en CSS. Pour ne pas oublier d'indiquer les nouveaux éléments HTML5 comme éléments en tant que délimiteurs de blocs, on définira en tête de son CSS ceci:

article, aside, header, footer, nav {
    display: block;
}

Le positionnement par feuille de style

Dans le précédent article on expliquait la mise en page simple. Nous allons repartir de ceci pour aborder le positionnement CSS appliqué aux nouveaux éléments HTML5:

<div id='tetePage'>...texte de l'en-tête...</div>
<div id='contenuPage'>....contenu du corps de page...</div>
<div id='piedPage'>...contenu du pied de page...</div>

et que nous allons préalablement réécrire avec des éléments HTML5. Il est entendu que ces nouveaux éléments sont définis en CSS comme délimitant des blocs:

<header>...texte de l'en-tête...</header>
<article>....contenu du corps de page...</article>
<footer>...contenu du pied de page...</footer>

Voici le code CSS appliqué à l'élément header pour le positionner:

body header {
    position: absolute;
    top: 0px;
    left: 0px;
    width:600px;
    height:50px;
    background-color:hotpink;
    }
 
body article {
    position: absolute;
    top: 50px;
    left: 0px;
    width:600px;
    height:400px;
    background-color:aquamarine;
    }
body footer {
    position: absolute;
    top: 450px;
    left: 0px;
    width:600px;
    height:50px;
    background-color:yellow;
    }

Il est vrai que pour notre exemple, le positionnement css n'est pas nécessaire. Mais si on veut rajouter un bloc latéral aside, ça devient plus compliqué de le réaliser sans positionnement css:

body header {
    position: absolute;
    top: 0px;
    left: 0px;
    width:800px;
    height:50px;
    background-color:hotpink;
}
body aside { 
    position: absolute;
    top: 50px;
    left: 0px;
    width: 200px;
    height: 400px;
    background-color: greenyellow;
}
body article {
    position: absolute;
    top: 50px;
    left: 200px;
    width:600px;
    height:400px;
    background-color:aquamarine;
}
body footer {
    position: absolute;
    top: 450px;
    left: 0px;
    width:800px;
    height:50px;
    background-color:yellow;
}

et le code HTML qui va avec:

<header>...texte de l'en-tête...</header>
<aside>bloc latéral</aside>
<article>....contenu du corps de page...</article>
<footer>...contenu du pied de page...</footer>

et ce que ça donne à l'affichage:

Là où ça devient intéressant, c'est quand on imbrique les éléments. Ainsi, un élément article peut contenir ses propres éléments header ou footer.

Positionnement des éléments imbriqués

A partir du moment où un élément est positionné par feuille de style CSS, il est isolé du contexte général. Pour bien comprendre ce mécanisme, voici comment on peut réaliser une mise en page très simple:

<aside>bloc latéral</aside>
<article>....contenu du corps de page...</article>

et qui aura rigoureusement le même effet si on écrit ceci:

<article>....contenu du corps de page...</article>
<aside>bloc latéral</aside>

L'inversion de l'écriture des éléments positionnés par feuille de style n'a aucune incidence sur leur positionnement par feuille de style. Voici un exemple très simple de code HTML avec un contexte général et un bloc latéral marqué par aside:

<body>
Ceci est le début du texte dans le contexte général.
<aside>bloc latéral</aside>
Ceci est la suite du texte dans le contexte général.
</body>

et ce qu'on retrouve à l'affichage:

Dans un élément positionné par feuille de style css, donc indépendant du contexte général, on peut positionner des sous-éléments. Ces sous-éléments seront positionnés par rapport à l'élément qui l'englobe. Exemple:

body aside { 
    position: absolute;
    top: 50px;
    left: 0px;
    width: 200px;
    height: 400px;
    background-color: greenyellow;
}
body aside header {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 188px;
    heigh: 24px;
    background-color: white;
}

et le code HTML associé:

<body>
Ceci est le début du texte dans le contexte général.
<aside>
    <header>tête bloc latéral</header>
bloc latéral
</aside>
Ceci est la suite du texte dans le contexte général.
</body>

et ce que ça donne à l'affichage:

Nous allons maintenant déplacer le bloc latéral en le positionnant du coté droit:

/* début css inchangé */
body aside { 
    position: absolute;
    top: 50px;
    left: 600px;
    width: 200px;
    height: 400px;
    background-color: greenyellow;
}
body aside header {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 188px;
    heigh: 24px;
    background-color: white;
}
body article {
    position: absolute;
    top: 50px;
    left: 0px;
    width:600px;
    height:400px;
    background-color:aquamarine;
}
/* fin css inchangé */

et le code HTML complet pour cet exemple:

<header>...tête de page...</header>
<aside>
    <header>tête bloc latéral</header>
bloc latéral
</aside>
<article>...corps de page...</article>
<footer>...pied de page...</footer>

et ce que ça donne à l'affichage:

On constate que l'en-tête de notre bloc latéral marqué par header reste toujours positionné par rapport à l'élément contenant aside.

Souplesse et homogénéïté

Le positionnement des éléments par feuille de style css offre des avantages incontestables:

• la présentation générale d'une page web exploitant le positionnement par feuille de style fonctionne sur tous les navigateurs;
• la retouche du code css est nécessaire et suffisante pour modifier radicalement la présentation des différents éléments sans nécessiter la refonte du code HTML;
• on allège considérablement le code HTML en éliminant autant que possible les attributs id et class qui polluent le code HTML;
• on n'aura plus recours à l'attribut float pour des positionnements hasardeux;
• on bannit définitivement l'élément table pour tout ce qui est mise en page en dehors de l'affichage de données tabulaires.

Voici un exemple d'en-tête de page qui exploite le positionnement par feuille de style css:

et le code HTML qui permet d'afficher cet en-tête de site web:

<header>
    <img src="images/peintures_de_marc.gif" alt="bannière accueil"
              style="position: absolute; left: 90px;"/>
    <nav>
        <a href="index.php?page=accueilGalerie">galerie</a>
        <a href="index.php?page=autresSites">autres sites</a>
        <a href="index.php?page=ecrireMessage">contact</a>
    </nav>
    <span class="selectionLangue">
        sélection langue: 
        <a href="selectLangue.php?lang=fr"><img src='images/flag_fr.gif' alt='fr'/></a>
        <a href="selectLangue.php?lang=en"><img src='images/flag_en.gif' alt='en'/></a>
        <a href="selectLangue.php?lang=de"><img src='images/flag_de.gif' alt='de'/></a>
        <a href="selectLangue.php?lang=es"><img src='images/flag_es.gif' alt='es'/></a>
        <a href="selectLangue.php?lang=it"><img src='images/flag_it.gif' alt='it'/></a>
        <a href="selectLangue.php?lang=ru"><img src='images/flag_ru.gif' alt='ru'/></a>
        <a href="selectLangue.php?lang=jp"><img src='images/flag_jp.gif' alt='jp'/></a>
    </span>
</header>

Ici on utilise de manière exceptionnelle l'attribut class pour l'élément span. Pour le reste de la page, l'imbrication des éléments et l'affectation des styles respecte une hiérarchie simple. La refonte de l'aspect général d'un tel site sera très facile.