Bienvenue à la huitième leçon, où il sera question de créer un modèle css plus convivial que nous allons utiliser à travers les leçons futures. Commençons par créer l’infrastructure HTML suivante à l’aide des boîtes « DIV ».
Le code HTML
Voici à quoi devrait ressembler le code HTML pour votre page web :
<div class="wrap">
<div id="topper">
<img src="sourire.png" height=30 >
<h1>Mon Titre!</h1>
</div>
<div id="topmenu">
<ul>
<li>Page #1</li>
<li>Page #2</li>
<li>Page #3</li>
<li>Page #4</li>
<li>Page #5</li>
<li>Page #6</li>
</ul>
</div>
<div id="content">
<h2>De Finibus Bonorum et Malorum</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas </p>
<h2>De Finibus Bonorum et Malorum</h2>
<p>Sed ut perspiciatis unde omnis iste natus error p>
<h2>Lorem Ipsum </h2>
<p>Lorem ipsum dolor sit amet, consectetur p>
</div>
<div id="sidemenu">
<ul>
<li>Option #1</li>
<li>Option #2</li>
<li>Option #3</li>
</ul>
</div>
<div id="footer">
<p>Les bases du HTML par Astral Internet</p>
</div>
</div>Concentrons-nous sur le CSS de la page. Cette fois, nous pousserons plus loin la mise en page. Pour le choix des couleurs, c’est libre à vous! Dans cet exemple, nous avons utilisé une palette au hasard tirée du site : colorschemedesigner.com.
Le CSS de base
Pour débuter, il faudra s’assurer que tous les fureteurs utiliseront les mêmes marges et espaces entre chaque élément. Par défaut, les fureteurs n’affichent pas toutes les pages de la même façon. Pour ce faire, nous allons utiliser le sélecteur spécial « * » qui signifie tous les éléments.
* {
padding:0px;
margin:0px;
}Ensuite, définissons la couleur de fond principal pour le corps du document :
body {
background-color:#e0e0e0;
}Si nous voulons que le document soit toujours centré dans l’écran, nous devons ajouter une ligne au document HTML et ajouter le code pour l’ID « wrap » qui va envelopper le code.
Le « wrapper »
Dans l’en-tête du document HTML, nous devons spécifier quelle version de HTML que le fureteur doit s’attendre à voir (HTML 4, XML, HTML 5 …) Pour l’exemple, nous utiliserons le HTML 5, alors en rajoutant cette ligne <!DOCTYPE html> avant la balise « HTML » du document. Tous les fureteurs du monde vont interpréter cette page comme étant du HTML5.
Ensuite, pour que le contenu de la page soit centré, il faut définir l’enveloppe. C’est pour cette raison que tout le code est à l’intérieur de la balise « div » avec la class « wrap ». Pour centrer, la page va afficher une largeur fixe à la boîte (dans ce cas, 900px) et placer les marges à 0 pixel avec l’alignement automatique. En résumé, la boîte aura 900px de large, et l’espace vide se placera à gauche et à droite de cette boîte de façon automatique. Voici à quoi ressemblera cette commande en CSS :
.wrap {
width:900px;
margin: 0 auto;
background-color:#ffffff;
}Comme vous pouvez le constater, nous avons placé le fond de notre boîte en blanc.
L’en-tête
La prochaine étape sera de placer l’en-tête. Pour celle-ci, nous allons fixer la hauteur à 43pixel et aligner le texte à droite. Nous allons également placer une image dans l’en-tête à gauche. Étant donné que le texte est aligné à droite, nous devons utiliser la propriété « float » pour indiquer à l’image qu’elle doit rester à gauche comme suit :
#topper {
background-color:#FFA040;
color:#774b1e;
text-align:right;
height:43px;
}
#topper img {
float:left;
padding:5px;
}
#topper h1 {
margin:0 30px 0 0;
}Dans l’exemple plus haut, vous pouvez constater comment nous utilisons des sélecteurs imbriqués pour donner un style à un endroit précis à l’intérieur de la page. Nous avons également utilisé les propriétés « padding » et « margin », dont nous allons vous expliquer en détail dans le prochain blogue.
Les menus
Pour le premier menu, il s’agira tout simplement d’une barre en haut de page de 20 pixels de haut. Pour que cette barre s’affiche de façon verticale, qu’elle prenne toute la longueur de la page et qu’elle n’est pas le « disc » habituel des listes, nous devons ajouter encore plus de style! Voici le CSS pour la barre de menu :
#topmenu {
color:#FFe573;
height:20px;
}
#topmenu ul {
margin:none;
}
#topmenu ul li{
list-style-type:none;
float:left;
display:block;
width:150px;
background-color:#a65400;
color:#ff8100;
}Ci-dessus, nous allons changer la propriété « list-style-type » pour « none » (sur le site de W3C https://www.w3schools.com/cssref/playit.asp?filename=playcss_ul_list-style-type&preval=disc, il vous sera possible de voir les types de liste différents). Ensuite, nous voulons que la liste s’affiche sous forme de bloc. De cette façon, nous allons pouvoir lui donner une largeur fixe (dans mon cas, 150pixel, car j’ai six items dans ma liste pour un total de 900 pixels, soit la largeur de mon enveloppe « wrap »). Finalement, pour qu’elles s’affichent les unes à côté des autres, nous utiliserons de nouveau la propriété « float ».
Le survol de la souris (hover)
Ajoutons un peu de piquant à notre liste avec l’ajout du CSS suivant :
#topmenu ul li:hover{
background-color:#ff8100;
color:#774b1e;
}Dans ce code CSS, nous avons ajouté au sélecteur le texte suivant : « :hover ». L’ajout du sélecteur d’action « hover » fait que ce style sera appliqué seulement si la souris passe au-dessus de l’item.
Ensuite, pour notre liste à gauche, fixons la largeur à 100pixel de large avec la propriété float comme suit :
#sidemenu {
float:left;
width:100px;
}Et pour le contenu à droite, nous faisons la même chose, mais on « float » à droite au lieu d’à gauche.
#content {
float:right;
width:780px;
}Nous terminons le document HTML avec un pied de page traditionnel. Il nous faudra nous souvenir d’utiliser l’attribut « clear » pour nous assurer que le pied de page s’affiche bien au bas de la page.
Si vous avez utilisé les mêmes couleurs, à ce point vous devriez avoir une page similaire à celle-ci :
Lors de la prochaine leçon, nous allons approcher en détail d’autres attributs CSS dont les « margin » et « padding ».
Voir la leçon sur You Tube
