Mise en page largeur fluide

Caractéristiques:  menu vertical à flottant gauche dans la marge du contenu

Adaptation du gabarit 04 d'Eleform & Alsacreations

De fort beaux nouveaux gabarits

Code HTML et CSS

Ce gabarit est structuré de la manière suivante: 

<div id="global">
        <div id="entete">...</div>
        <div id="navigation">...</div>
        <div id="contenu">...</div>
</div>

Il est mis en forme par deux feuilles de styles externes :

  1. base.css (mise en forme minimale du texte, commune à tous les gabarits)
  2. modele04.css, qui contient tous les styles propres à ce gabarit.

Pour les éditer, dans Kompozer passer par Cascades ou dans Firefox / menu CSS de la WebDev / Editer les CSS

Pour voir le détail du code HTML de la page, dans Kompozer passer par l'Editeur ou bien  utiliser la fonction d'affichage de la source de notre navigateur web (ex: «Affichage > Code source de la page»), ou encore dans Firefox menu Divers / Editer le html.

À noter

  1. Dans ce gabarit, nous utilisons la propriété CSS float pour placer deux blocs à la même hauteur plutôt que l'un en dessous de l'autre. Voir les notes de la feuille de style du gabarit pour en savoir plus.

  2. Le bloc de droite n'utilise pas la propriété float, mais une simple marge à gauche (margin-left).

    Pour mieux comprendre le fonctionnement du positionnement flottant, vous pouvez, avec un outil tel que Firebug, désactiver la marge de gauche de div#contenu.