Nous allons maintenant plonger un peu plus profond dans le monde du CSS avec la boîte flottante. Elle sera utilisé pour la création d’un modèle complet pour une page web. D’ici la fin de cette leçon, vous allez être en mesure de créer une page avec un en-tête, un menu à gauche, du contenu à droite et un pied de page.
Pour arriver à vos fins, vous allez devoir diviser la page en plusieurs blocs comme l’indique l’image suivante :
Le code HTML
Comme vous l’avez appris dans un tutoriel précédent, vous pouvez définir un bloc avec la balise HTML « div ». Alors, commencez avec la structure suivante, et nous allons utiliser les « ID » au lieu des classes, car chaque bloc sera unique dans la page :
<div id="en-tete">
<h1>Mon Titre!</h1>
</div>
<div id="enveloppe">
<div id="menu">
<ul>
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
<div id="contenu">
<h2>Titre de mon article</h2>
<p> Mon blogue!</p>
<p> Bla Bla</p>
</div>
</div>
<div id="pied_de_page">
<p><a href="contact.html">Contactez-moi!</a><p>
</div>Vous avez maintenant un bloc de HTML qui peut être transformé en deux colonnes. Vous avez placé les boîtes « div » du même ordre que l’image ci-dessus. Sans CSS, votre page semble complètement désordonnée. Pour équilibrer le tout, il vous faudra modifier votre fichier CSS que vous avez commencé lors de la leçon précédente.
Un peu de couleurs
L’en-tête par défaut devrait déjà être au bon endroit. Pour vous aider en terme de référence, vous utiliserez les mêmes couleurs de fond que l’image plus haut:
#ent-ete {
background-color :#ffc90e;
}
#enveloppe{
background-color :#b5e61d;
}
#menu {
background-color :#99d9ea;
}
#contenu {
background-color :#c3c3c3;
}
#pied_de_page {
background-color :#7092be;
}On peut maintenant différencier les différents blocs à l’intérieur de votre page.
Le positionnement
La seconde étape sera de séparer les deux colonnes en CSS. Maintenant, on va faire la boîte flottante. Vous pouvez utiliser la propriété « float » pour mentionner au fureteur que cette fenêtre devra flotter d’un côté ou de l’autre de cette fenêtre. Pour que l’affichage paraisse bien à l’écran, il faudra également lui spécifier une largeur. Dans l’exemple suivant, nous allons placer le menu à 20% de l’écran, et le contenu à 80%, comme dans l’exemple ci-dessous:
#menu {
background-color :#99d9ea;
float:left;
width:20%
}
#contenu {
background-color :#c3c3c3;
float:right;
width:80%
}À ce point-ci, votre pied de page s’affichera drôlement; la raison est due au fait que les éléments « float » (le menu et le contenu) ne suivent plus le cours normal d’un document. Il flottera plutôt au-dessus des autres. Pour que votre pied de page s’affiche au bas de la page, vous allez devoir lui indiquer qu’il doit s’afficher au bas des éléments flottants. Pour se faire, on utilisera la propriété CSS « clear ». Voici l’exemple :
#pied_de_page {
background-color :#7092be;
clear:both;
}La mise en page de base avec deux colonnes est une réussite. Dans la prochaine leçon, nous procéderons à l’amélioration de ce modèle en intégrant d’autres propriétés CSS pour que votre page devienne plus fonctionnelle.
Voir la leçon sur You Tube
