Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Je me permets de donner le code XHTML d'un coup car il est simple. En fait c'est une page XHTML avec la balise style dans l'entête et une liste
ul dans le corps. Pas franchement compliqué...
Au préalable, puisque rien ne vaut un aperçu, voilà une image de ce que nous allons apprendre à faire :
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>petit menu sympa</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* Ici on mettra le code CSS, mais vous faites comme vous voulez */
</style>
</head>
<body>
<ul id="sous_menu">
<li>
<a href="#">C / C++</a>
</li>
<li>
<a href="#">Site web</a>
</li>
<li>
<a href="#">PHP</a>
</li>
<li>
<a href="#">Mapping</a>
</li>
<li>
<a href="#">Vos tutos</a>
</li>
</ul>
</body></html>
|
Testez... Oui, c'est juste une liste sans style.
Maintenant que nous avons le code XHTML, il faut transformer cette liste de façon à recréer l'image du dessus.
C'est notre mission et nous l'acceptons (enfin...
moi oui !).
Comment faire ? Ce n'est pas magique, c'est Cascading Style Sheet !
On commence d'abord par se poser une question simple : Quelles sont les difficultés du CSS ?
- Les bordures. Comment les afficher correctement ?
- Comment créer un fond pour les liens qui prenne tout l'espace disponible dans la balise <li> ?
Je me dois d'insister sur un point : avez-vous bien compris le principe d'élément bloc (
block) et d'élément en ligne (
inline) ?
Si vous ne savez pas de quoi je parle :
rendez-vous ici ou encore
là (pour de plus amples renseignements).
Vous ne voyez pas comment résoudre ces deux difficultés ? Ce tutoriel est vraiment pour vous !
Allons-y ! On va s'intéresser au code CSS.
Vous avez de la chance : il est court, et plutôt simple
:
Le style de la liste
Code : CSS1
2
3
4
5
6
7
8 | #sous_menu{
list-style-type:none; /* on enlève la puce */
margin: 0; /* on retire les marges intérieures et extérieures */
padding:0;
width: 20%; /* J'ai mis une largeur pour ne pas prendre toute la largeur de l'écran */
border : solid 1px #a3c0d5; /* on applique des bordures à la balise ul */
border-bottom: none; /* et on retire celle du bas */
}
|
Testez au fur et à mesure, c'est important ! Ainsi, vous pouvez voir l'évolution !
Ce qu'il faut retenir : Je mets en place les bordures pour
ul. Et je retire la bordure du bas.
Pourquoi ? Vous allez comprendre avec la suite du code...
Code : CSS1
2
3
4
5 | #sous_menu li{
margin: 0; /* on retire les marges intérieures et extérieures */
padding: 0;
border-bottom: 1px solid #a3c0d5; /* ici on affiche une bordure uniquement en bas */
}
|
Cela commence à prendre forme,
non ?
Vous remarquerez que j'ai retiré les marges par défaut de
ul et
li, pour deux raisons :
- les différentes interprétations selon les navigateurs
. Initialisez les marges des listes (Firefox utilise un padding : 2.5em sur ul pour créer le retrait à gauche des listes, et IE, un margin : 2.5em) ;
- pour les besoins de mon menu.
Maintenant, nous nous sommes attaqués à la balise
<li>... Et nous avons créé une bordure uniquement en bas.
L'astuce est là : si j'avais conservé la bordure du bas de
ul, j'aurais eu deux bordures de
1px en bas, et donc une bordure de
2px... Et c'est très moche.
J'espère que vous comprenez bien le principe (je fais comme si vous veniez de débuter le CSS).
Pour les débutants, testez un peu ce que je viens de dire... C'est important de bien comprendre ce que l'on fait !
Aller, une petite image d'explication car ce n'est pas super clair (bonus) :
Si vous affichez maintenant... c'est parfait !
Euh...
Oui, je ne parle que des bordures. Car pour les liens, ce n'est pas terrible.
Nous allons remédier à cela.
Code CSS pour les liens
Code : CSS1
2
3
4
5
6 | #sous_menu a{
text-decoration:none; /* on enlève le soulignement */
color:#5d90b5;
display:block; /* C'est ici qu'il faut bien comprendre (j'explique plus bas) */
padding-left:1.5em; /* une marge intérieure gauche juste pour l'esthétique */
}
|
Et hop, on teste... si, si !
Maintenant, le survol, tout bête :
Code : CSS1
2
3
4 | #sous_menu a:hover{
background-color:#e9eefb;
color:#294f79;
}
|
Pour les couleurs, c'est vous qui voyez, moi, je ne me suis pas foulé... Si vous n'avez pas remarqué : ce sont des couleurs du SdZ...
J'harmonise mon tuto avec le site... Si ce n'est pas magnifique !
Bon, et le code alors !
Explication : display:block
J'en reviens à la seconde difficulté : élément bloc, élément en ligne : le souci ici est que
a est un élément en ligne, donc si je lui applique un fond qui s'affiche au survol, ce fond n'encadrera que l'espace nécessaire au texte du lien. Les éléments en ligne n'ont pas de dimensions propres (sauf les éléments dits "remplacés",
ici encore ). Testez si vous voulez, cela donne cela sans le
display:block :
Moche, non ? La solution pour qu'au survol du lien le fond de celui-ci prenne toute la largeur de la balise
li, c'est alors d'utiliser la formidable propriété
display (afficher en anglais) et de lui mettre comme valeur
block.
Ainsi, a va se comporter comme un élément bloc.
C'est-à-dire ?
Il va prendre tout l'espace disponible :
100 % de son conteneur, donc ! Et voilà, passez votre souris sur le lien...
tout le cadre est colorisé !
Trois petites choses à ajouter
Primo
Vous remarquerez que sur IE, il faut être sur le texte du lien pour que le
hover fonctionne (enfin, chez moi, c'est comme cela).
Secundo
Attention, si vous vous voulez inverser l'affichage des bordures. Je m'explique.
Il revient au même d'afficher toutes les bordures
ul sauf celle du haut et d'afficher uniquement la bordure du haut pour
li (l'inverse du code que j'ai donné). Si vous avez des difficultés à visualiser ce que je viens de dire, regardez l'image que j'ai donnée pour expliquer le principe des bordures.
Si c'est pareil, pourquoi il nous parle de cela ?
Pour vous expliquer ceci : c'est l'inverse, oui... mais cela ne marche pas avec Explorer ! Testez si vous voulez...
Pourquoi cela ne marche pas ?
En fait... c'est un bug : je ne vais pas trop m'attarder sur ce sujet car je n'ai pas trouvé la raison exacte... c'est un bug d'IE sur la balise
<a>, et apparemment ce bug existe aussi sur
ul... Il peut également y avoir une histoire de fusion de marges... Enfin, toujours est-il qu'il y a un bug ! Cependant, si vous désirez utiliser ce code, vous pouvez tricher avec
line-height, ou appliquer une hauteur de 100 % à la balise
a.
Tertio
Si vous trouvez que les marges intérieures sont trop petites dans la balise
a... ajoutez simplement un
padding : 2px, mais sur IE cela ne marchera pas bien, regardez vous-mêmes...
Une des solutions est d'ajouter
height : 100% à la balise
a et cela fonctionne !
On finit avec un petit jeu
Comme je suis tordu, j'avais prévu un jeu
: « Cherchez l'erreur » !
Dans l'image (ci-dessous), il y a quelque chose d'impossible avec le code que j'ai donné :
Je vous laisse deviner... c'est tout bête (si vous aviez remarqué avant : bien joué !).
Voilà, c'est fini... J'espère que j'ai été assez clair.
La sous-partie 4 aurait dû être appelée : Petit complément pour... IE
.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
!
911 Zéros connectés |
8 requêtes |
0.0554s (0.0425s)
