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,

Présentation au sujet: "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,"— Transcription de la présentation:

1 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, il faut créer le fond. Nous créons un dessin de ce type La partie rouge fait 25 x 25 pixels La partie orange fait 25 x 25 pixels 25 x 10 pixels L'ombre fait 25 x 10 pixels L'ensemble fait 25 x 60

2 Passer au CSS et autres... (3) La barre de menu Il s'agit là du plus difficile, mais du plus intéressant aussi.... 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

3 Passer au CSS et autres... (3) La barre de menu Il s'agit là du plus difficile, mais du plus intéressant aussi.... Aller un peu de code : Dans le style : ul#menu est appelé par la balise <ul dans le code XHTML. 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

4 Passer au CSS et autres... (3) La barre de menu Il s'agit là du plus difficile, mais du plus intéressant aussi.... Aller soyons fous !! Nous allons écrire deux lignes d'un coup. Marge extérieures à 0 et marges intérieurs à 0

5 Passer au CSS et autres... (3) La barre de menu Il s'agit là du plus difficile, mais du plus intéressant aussi.... Et on termine notre écriture de l'identifiant menu : aucune décoration pour la liste Image de fond background : on connais, url(chemin du fichier) on connais, repeat-x : signifie repéter l'image horizontalement. 0 -25px 0 affiche à partir du bord gauche Remonte 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

6 Passer au CSS et autres... (3) La barre de menu Il s'agit là du plus difficile, mais du plus intéressant aussi.... 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

7 Passer au CSS et autres... (3) La barre de menu Il s'agit là du plus difficile, mais du plus intéressant aussi.... 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...

8 Passer au CSS et autres... (3) La barre de menu Il s'agit là du plus difficile, mais du plus intéressant aussi.... On crée maintenant un nouveau style pour redéfinir les liens à l'intérieur de la balise défini elle même par l'identifiant menu. On applique 4 paramètres : Largeur du lien : 130px Hauteur de ligne (du lien) : 25px Pour que celui-ci soit sur la partie orange de du bouton. Taille de police : 1.2em Style : gras

9 Passer au CSS et autres... (3) La barre de menu Il s'agit là du plus difficile, mais du plus intéressant aussi.... 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 ?

10 Passer au CSS et autres... (3) La barre de menu Il s'agit là du plus difficile, mais du plus intéressant aussi.... 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 pixels non transparent couleur (vert très clair dans l'exemple)

11 Passer au CSS et autres... (3) La barre de menu Il s'agit là du plus difficile, mais du plus intéressant aussi.... 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.

12 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