La feuille de style
Maintenant que nous avons notre code HTML, intéressons nous à la feuille de style CSS "onglets.css".
Nous allons procéder par étape. Pour commencer nous allons fixer la taille de nos calques "onglets" et "texte" et leur assigner des couleurs de fond différentes pour bien les distinguer.
Etape 1:
1 #conteneur {
2 width: 70%;
3 }
4
5 #conteneur div {
6 float: left;
7 }
8
9 #onglets {
10 clear: left;
11 width : 100%;
12 background: #FFFFFF;
13 }
14
15 #texte {
16 clear: left;
17 width: 100%;
18 background: #AAAAAA;
19 }
onglets.css (partie 1)
Commentaires sur le code:
- ligne 2, 11, 17: les largeurs des calques sont définis en pourcentage, ceci permet d'avoir des pages Web "élastiques".
Le calque "conteneur" occupe 70% de la largeur de la fenêtre.
Les calques "onglets" et "texte" occupent 100% de la largeur du calque "conteneur". - ligne 5 à 7: ces lignes positionnent toutes les div fils du calque "conteneur" en flottant à gauche.
- ligne 10 et 16: la propriété "clear" à pour valeur "left", ceci à pour effet d'aligner les deux calques à gauche.
Cliquez ici pour voir notre page avec application des styles de la ligne 1 à 19.
Etape 2:
20 #onglets ul {
21 list-style-image: none;
22 list-style-position: outside;
23 list-style-type: none;
24 margin: 0;
25 padding: 0px 0px 0px;
26 }
27
28 #onglets li {
29 background: #777777 scroll left top;
30 border-top: 1px black solid;
31 border-left: 1px black solid;
32 margin:0;
33 padding:0 0 0 9px;
34 float: left;
35 border-bottom: 1px solid black;
36 }
37 #onglets a {
38 background: #777777 scroll right top;
39 border-right: 1px black solid;
40 margin:0;
41 padding:5px 15px 4px 6px;
42 display: block;
43 text-decoration: none;
44 }
onglets.css (partie 2)
Commentaires sur le code:
- ligne 20: "#onglets ul" nous permet d'atteindre toutes les listes de type "ul" à l'intérieur du calque dont l'identifiant est "onglets"
- ligne 25: la propriété "padding" positionne, dans ce contexte ,les liste de type "ul" par rapport au coins supérieur gauche du calque "onglets".
- ligne 28: "#onglets li" nous permet d'atteindre toutes les item "li" à l'intérieur du calque dont l'identifiant est "onglets"
- ligne 37: "#onglets a" nous permet d'atteindre toutes les liens à l'intérieur du calque dont l'identifiant est "onglets"
Cliquez ici pour voir notre page avec application des styles de la ligne 1 à 44.
Pour l'instant nous avons nos onglets, mais nous ne différencions pas l'onglet courant des autres onglets. Ceci est la prochaine étape.
Etape 3:
45 #onglets #courant {
46 background: #AAAAAA no-repeat scroll left top;
47 border-bottom: 1px #AAAAAA solid;
48 }
49
50 #onglets #courant a {
51 background: #AAAAAA no-repeat scroll right top;
52 text-decoration: none;
53 }
onglets.css (partie 3)
Commentaires sur le code:
- ligne 45: "#onglets #courant" nous permet d'atteindre la balise "li" identifiée par l'id "courant", en se plaçant dans le contexte du calque "onglets".
Ceci permet de garder, par héritage, tous les styles définis précédemment, et de ne modifier que ceux spécifiés dans les lignes 46 et 47.
Autrement dit, la balise "li" dont l'id est "courant" possède les mêmes propriétés que les autres onglets SAUF la couleur de fond (background) et la couleur de la bordure du bas, qui prennent la même couleur que le fond du calque "texte". - ligne 50: de la même manière qu'à la ligne 50, on modifie le style des liens dans la balise "li" dont l'id est "courant". La seule modification est sur la couleur de fond.
Cliquez ici pour voir notre page avec application des styles de la ligne 1 à 52 (les onglets ne fonctionnent pas car les liens ne sont pas actifs pour le moment).
Personnalisation:
Les onglets sont maintenant terminés. Vous pouvez personnaliser les couleurs ou même les polices d'écriture.
Modifications possibles :
- Couleur des onglets: Modifier les couleurs lignes 29 et 38.
- Couleur de l'onglet en cours: Modifier les couleurs lignes 46 et 51.
- Couleur de fond du texte de la page: Si vous changez la couleur de l'onglet en cours il est plus esthétique de changer la couleur de fond du texte concerné par l'onglet.
Pour cela changer les couleurs des lignes 18 et 47. - Couleur et police du texte des onglets:
Vous pouvez modifier la couleur et la police du texte contenu dans les onglets en rajoutant, après la ligne 37, les lignes:
color: white; /* Couleur du texte blanc (white = #FFFFFF) */
font-family: "Courier New", Courier, monospace; /* Ici la font choisie est "Courrier New" */ - Couleur et police du texte de l'onglet en cours:
Vous pouvez modifier la couleur et la police du texte contenu dans l'onglet en cours, en rajoutant, après la ligne 50, les lignes:
color: black; /* Couleur du texte noir (black = #000000) */
Cliquez ici pour télécharger la feuille de style de l'exemple complet.