Passer au CSS et autres... (3) La barre de menu Il s'agit là du plus difficile, mais du plus intéressant aussi.... Avant de concevoir la barre de menu,

Passer au CSS et autres... (3)La barre de menuIl s'agit là du plus difficile, mais du plus intéressant aussi....

Avant de concevoir la barre de menu,il faut créer le fond.Nous créons un dessin de ce typeLa partie rouge fait 25 x 25 pixels

La partie orange fait 25 x 25 pixels

L'ombre fait 25 x 10 pixels25 x 10 pixels

L'ensemble fait 25 x 60


Au chargement de la page le petit dessin va être chargé en mémoire.

Nous allons demander dans notre code à ce qu'il soit reproduit autant de fois que nécessairre pour remplir horizontalement chaque bouton et la barre de menu.

Au passage de la souris la partie rouge recouvrira l'orange sans masquer l'ombrage. Tout ça avec une seul et même dessin. Impressionant !!!

Zone visible du menu


Aller un peu de code :

Dans le style : ul#menu

est appelé par la balise <ul dans le code XHTML.<ul id= »menu »> va donc appliquer les paramètres que nous allons taper :

En premier : height: 35px ;fixe la hauteur du menu (25px pour la partie orange et 10px pour l'ombre


Aller soyons fous !!Nous allons écrire deux lignes d'un coup.Marge extérieures à 0et marges intérieurs à 0


Et on termine notre écriture de l'identifiant menu :

aucune décoration pour la liste

Image de fondbackground : on connais,url(chemin du fichier) on connais,

repeat-x : signifie repéter l'image horizontalement.

0 -25px0 affiche à partir du bord gaucheRemonte le dessin de 25 pixels pour masquer la partie rouge.

l'affichage n'est pas bon dans l'éditeur, mais la vérification dans le navigateur donne un aperçu réèl


On crée un nouveau style

ul#menu li

le programme va en déduire que nous voulons appliquer à chaque élément de la liste (li) les paramètre qui vont suivre

Aligner sur chaque ligne le texte au centre


Et maintenant un tour de magie !

C'est là que l'on se rend compte de la grande force des CSS pour la mise en page.

Notre liste de lien est écrite sur 4 lignes différentes les unes sous les autres.

La commande « float » va les rendre flottant dans le menu. Nous pouvons ainsi les organiser comme nous voulons.

En indiquant « left » (gauche), les menus vont être placés sur la même ligne en partant du coté gauche.La première ligne en 1, la deuxième ligne en 2 etc...


On crée maintenant un nouveau style pour redéfinir les liens <a> à l'intérieur de la balise <li> défini elle même par l'identifiant menu.

On applique 4 paramètres :Largeur du lien : 130pxHauteur de ligne (du lien) : 25pxPour que celui-ci soit sur la partie orange de du bouton.Taille de police : 1.2emStyle : gras


On règle l'espacement des lettres à 2px

Couleur du texte : blanc

De nouveau un commande très pratique qui transforme notre lien en bloc.

Les liens sont figés et colés les uns aux autres. La largeur et la hauteur ne s'appliqueront pas tant que nous n'aurons pas écrit la commande :display: block

Visualisation dans le navigateur : c'est plus présentable, non ?


On ajoute pour terminer la présentation des liens :

text decoration : none ;Aucune décoration sur le lien (supprime le soulignement du lien)

Border-right: 2px solid #dea ;

Bord droit du lien transformé en bloc :épaisseur 2 pixelsnon transparentcouleur (vert très clair dans l'exemple)


Nous avons fini ?Non !

Pour le moment quand on survole les liens avec la souris ils ne ne changent pas de couleur.

Encore un petit style en cascade ?Hé, oui !

a:hover signifie quand la souris survole.Donc même écriture que pour afficher l'image dans les menus, sauf que là on décale de 25px vers le bas puisque le dernier paramètre est à 0. La couleur rouge viens se superposer à l'orange mais seulement dans le lien survolé par la souris.

Passer au CSS et autres... (3)La barre est terminée

Bien sûr rien n'empèche à partir de ce que l'on à entrevu de faire toutes les adaptation possibles et imaginables

Documents

Passer au CSS et autres... (3) La barre de menu Il s'agit là du plus difficile, mais du plus intéressant aussi.... Avant de concevoir la barre de menu,