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 sais très bien que beaucoup de ceux qui lisent ce tuto se demandent à quoi peut bien ressembler ce menu dont je parle depuis l'introduction... Il peut paraître basique, mais c'est le but recherché : un menu pas trop chargé, qui est agréable à l'oeil du visiteur et surtout simple à coder (faut pas oublier qu'on est tous de gros fainéants
).
Visualiser le menu
C'est le site que j'ai fait pour nos PPE en SI en terminale, on ne se moque donc pas du design fait un peu à la va-vite !!! Et si certains étaient intéressés par des informations sur le sujet, ils peuvent m'envoyer un message privé.
Il est un peu plus étudié (mais vraiment un peu) que celui que je vais vous apprendre dans ce tuto, car il contient du PHP pour faciliter la navigation sur mon site, mais il n'en sera pas différent dans la forme.
Il est temps de passer à l'action avec la construction de notre menu.
Pour ça, il faut que vous utilisiez un peu votre souris et votre clavier !!! Bah oui, la page ne va pas défiler toute seule, comme par magie...
La partie théorique
Pour commencer, notre menu ne sera pas bien compliqué !!!
Je vous fais un petit schéma pour que vous compreniez bien :
Quelques explications très brèves
Le cadre noir : c'est ce que nous allons appeler le "bloc menu".
Les cadres rouges : ce sont les "blocs liens" qui sont en fait les liens eux-mêmes.
Rappelez-vous bien de ces deux éléments, ils composeront notre menu dans sa totalité et rien de plus.
La partie théorique s'achève ici, je ne crois pas qu'il y ait plus de choses à dire que ça...
Partie pratique
Commençons par créer un bloc : ce bloc sera unique sur chacune de vos pages et on l'appellera... menu
(je suis sûr que vous l'auriez deviné tout seul).
Pour ça, rien de plus simple, on utilise la balise
<div></div> et si vous avez suivi les cours de M@teo21, ça devrait être facile de le nommer
menu:
Code : HTML
Vous voyez, ce n'était pas si compliqué... Je vous ferai juste remarquer que l'on utilise l'attribut
id afin de nommer notre bloc pour le CSS.
Maintenant, comme indiqué sur le schéma plus haut, ce bloc contiendra d'autres blocs, les "blocs liens" :
Code : HTML1
2
3
4
5
6
7
8
9 | <div id="menu">
<a href="url_de_votre_page">Votre page</a>
<a href="url_de_votre_page2">Votre page2</a>
<a href="url_de_votre_page3">Votre page3</a>
<a href="url_de_votre_page4">Votre page4</a>
<a href="url_de_votre_page5">Votre page5</a>
</div>
|
Mais tu nous as dit qu'on allait créer un bloc, mais là t'as juste mis des liens, c'est pas des blocs ?!!
C'est vrai, mais j'ai jamais dit qu'ils étaient "blocs" à leur naissance, mais ils le deviendront par la suite, dans la partie CSS ; pour l'instant retenez que c'est un lien comme un autre !!!
Et voilà, la partie XHTML est terminée !!! Ce n'était pas bien compliqué, mais la partie la plus difficile reste à venir (enfin, j'ai une vision de la difficulté un peu légère
). Le CSS est un défi dans ce cas-là, car il faut qu'il soit compatible avec tous les navigateurs !!!
Je n'ai pu tester que sous IE5 et Firefox, mais je pense que c'est largement suffisant.
Allez, on attaque le CSS sans plus attendre.
Le CSS du bloc menu
Notre bloc menu se doit d'être extensible et très simple. Nous allons donc nous contenter d'un simple petit dégradé de 30 pixels de hauteur et de 5 pixels de largeur qui se répètera sur l'axe x.
Vous pouvez choisir le fond que vous voulez bien sûr, mais moi j'utilise donc mon image de
5px*30px qui s'appelle
fond_menu.png .
Bon : je vois que vous êtes un peu endormis, donc on va faire quelque chose pour vous réveiller :
INTERRO SURPRISE !!!
Un petit peu de pratique
Votre mission si vous l'acceptez (même si vous ne l'acceptez pas) est d'écrire le code CSS du menu permettant :
- une largeur qui prend toute la place possible ;
- une hauteur fixe de la hauteur de votre image de fond ;
- un fond qui sera votre image se répétant sur toute la largeur, mais pas sur la hauteur.
Je vous souhaite bonne chance, même si ce n'est pas très difficile.
Allez hop, correction !
Bon j'espère que vous avez réussi, ce n'était vraiment pas très dur.
Brève explication avant le code :
--> une largeur maximale : il suffit d'utiliser les pourcentages pour la propriété
width ;
--> une hauteur fixe de la hauteur de notre image, c'est juste un
height de
30px ;
--> un fond qui sera notre image et qui se répète, c'est juste la définition du fond avec
url et
repeat-x.
Code : CSS1
2
3
4
5
6 | #menu
{
width:100%;
height:30px;
background:url('fond_menu.png') repeat-x;
}
|
Ouais, on a le menu, mais c'est moche !!! Pourquoi les liens sont aussi laids et tous rassemblés comme ça ???
Tout simplement parce que nous n'avons fait que le bloc menu, on a pas encore touché aux liens... Mais heureusement, c'est la partie qui suit.
Le CSS des liens
Dans cette ultime partie, nous allons faire le CSS des "blocs" des liens. Souvenez-vous : les carrés rouges sur notre schéma du tout début. Ils contiennent donc les liens qui eux aussi auront besoin d'être un peu modifiés.
Un peu de pratique
Comme dans la partie précédente, je vous fais une liste précise de ce qu'on veut, puis vous essayez de trouver le code vous-mêmes.
Alors pour les blocs liens, on veut :
- qu'ils soient considérés comme des blocs ;
- qu'ils soient tous alignés de gauche à droite ;
- qu'ils aient une largeur fixe mais en fonction du nombre de liens que nous avons (pensez aux pourcentages) ;
- une hauteur fixe de la taille de notre menu ;
- qu'ils n'aient pas de bordures ;
- et que les liens soient bien centrés dans le bloc.
Voilà, à vous de jouer.
L'heure de la correction a sonné
Bon : j'espère encore une fois que vous avez réussi, et si ce n'est pas le cas, ce n'est pas grave, au fond vous êtes là pour apprendre.
Je pose le code avec les annotations dedans, donc pas besoin d'expliquer plus que ça
.
Code : CSS1
2
3
4
5
6
7
8
9 | #menu a
{
display:block; /*Pour que le "bloc" soit un vrai bloc*/
float:left; /*Pour que les blocs soient alignés horizontalement (essayez de l'enlever pour voir)*/
width:19%; /*J'explique en détail après*/
height:30px; /*La même hauteur que notre menu*/
border:none; /*On enlève les bordures (enfin, on ne les met pas, même s'il n'y en avait pas)*/
text-align:center; /*Pour que les liens soient centrés par rapport à l'horizontale*/
}
|
Heu... pourquoi tu as mis une valeur de 19% à la propriété width ??? Je n'y comprends plus rien...
Petite explication : en fait, on veut que notre menu soit compatible pour un design fixe comme extensible, donc si on avait mis une valeur en pixels, le design extensible aurait fonctionné mais les liens n'auraient pas pris 100 % de la place disponible.
Ensuite, on a donc 5 liens dans notre menu, donc on pose nos 100 % que l'on divise par le nombre de lien que l'on a, soit ici 100 / 5 = 20, donc 20 % par lien.
Citation : Exemple :Un menu avec 4 liens => 100 / 4= 25 %.
Un menu avec 5 liens => 100 / 5 = 20 % ==>notre menu.
Un menu avec 6 liens => 100 / 6 = 16,7 %.
Ce sont des mathématiques toutes simples (oui, c'est rare que ce soit simple mais là, quand même...).
Bah tu dis 20 % pour nous, mais dans le CSS tu mets 19%, pourquoi ?
Là, c'est pour notre copain Internet Explorer
. En fait, si on lui fait occuper 100 % (la somme de toute la place occupée par lien) de la taille disponible, il nous fait un saut à la ligne, donc j'enlève 1 %, mais en enlevant 0,5 % ou moins, ça fonctionnerait.
Nous en avons fini avec le bloc lien, enfin pas tout à fait... Il faut encore formater les liens, ce qui pour n'importe qui sera vraiment très simple.
Le CSS des liens
Alors ici, je prends mes goûts pour les couleurs,
donc vous prenez les mêmes que moi sans discuter mais vous êtes libres de choisir celles qui vous plaisent.
C'est très simple :
- une couleur qui soit la même, que le lien ait été visité ou non ;
- que le lien change de couleur au survol ;
- que le lien soit centré verticalement.
Je n'approfondis pas plus et je vous donne directement le code. J'explique dans le code, mais il n'y a pas grand-chose à en dire.
Code : CSS 1
2
3
4
5
6
7
8
9
10
11
12 | #menu a, #menu a:visited /*on utilisera les propriétés qui suivront sur les liens dans menu, et les liens visités dans menu*/
{
color:#DFAC1E; /*la couleur*/
text-align:center; /*on le centre horizontalement*/
padding-top:3px; /*on le centre verticalement*/
}
#menu a:hover, #menu a:visited:hover /*on utilisera les propriétés qui suivront sur les liens survolés dans menu, et les liens survolés et visités dans menu*/
{
color:blue; /*la couleur*/
text-decoration:none; /*on enlève le soulignement du lien*/
}
|
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
435 Zéros connectés |
8 requêtes |
0.1148s (0.101s)
