Les CSS un menu vertical Nous allons créer un dossier menu_vertical. Comprenant les sous dossiers style, images, multi_niveaux, un niveau et _notes

Transcription

1 Les CSS un menu vertical Nous allons créer un dossier menu_vertical Comprenant les sous dossiers style, images, multi_niveaux, un niveau et _notes

2 A l'intérieur du dossier un_niveau Nous créons les fichiers : accueil.php puis page1.php et sommaire.php

3 A l'intérieur du dossier style nous créons les fichiers menu_vertical.css et style_div.css

4 A l'intérieur du dossier images nous plaçons le fichier image background.jpg

5 Ecrire les codes suivants dans le fichier style_div.css Etudier les commentaires en bleus. ( pour cet exemple nous utilisons une largeur de 600px en réalité nous devrions utiliser une page correspondant aux moniteurs actuelles soit 1024px)

6 /* Pas de marge pour la page à construire*/ * { margin:0; padding:0; /* La couleur du fond de la page*/ body { background-image: /* on choisie une image ou une couleur*/ url(../images/background.jpg); /* L'image doit être répéter sur l'axe des X*/ background-repeat: repeat-x; ;

7 /* La bandeau destinée à recevoir le titre ou le logo du site*/ div#bandeau { width:600px; /* Largeur du bandeau*/ line-height: 20px; /* Hauteur de la ligne (donc du bandeau)*/ background-color:#00ccff; /* Couleur de fond du bandeau*/ margin-right: auto; /* Marge de droite du bandeau par à la boite */ margin-left: auto; /* Marge de gauche du bandeau par à la boite */ font-family: Arial, Helvetica, sans-serif; /* Police du texte*/ font-size: 12px; /* Taille du texte*/ font-style: italic; /* Style du texte*/ text-align: center; /* Position du texte*/ ;

8 /* Le contenu destinée à recevoir l'ensemble des informations en dessous du bandeau et sans le pied de page*/ div#contenu { width:600px; /* Largeur du contenu*/ height:400px; /* Hauteur du contenu*/ background-color:#ffcc00; /* Couleur de fond du contenu*/ font-size: 8px; /* Taille du texte*/ font-style: normal; /* Style du texte*/ text-align: left; /* Position du texte*/ margin-right: auto; /* Marge de droite du contenu par rapport à la boite */ margin-left: auto; /* Marge de gauche du contenu par rapport ; à la boite */

9 /* Le menu destinée à recevoir le sommaire */ div#menu { float:left; /* positionné flottant à gauche*/ width:100px; /* Largeur du menu*/ height:400px; /* Hauteur du menu*/ background-color:#ff6699; /* Couleur de fond du menu*/ /* Le bloc pour news */ div#blocnews { float:right; /* positionné flottant à droite*/ width:150px; /* Largeur des news*/ height:150px; /* Hauteur des news*/ background-color:#ff3300; /* Couleur de fond des news*/

10 /* Le pied de page destinée à recevoir l'ensemble des informations en dessous du contenu */ div#pied_page { width:600px; /* Largeur du pied de page*/ line-height: 20px; /* Hauteur de la ligne (donc du pied de page)*/ font-size: 8px; /* Taille du texte*/ font-style: normal; /* Style du texte*/ text-align: center; /* Position du texte*/ background-color:#33ff99; /* Couleur de fond du pied de page*/ margin-right: auto; /* Marge de droite du contenu par rapport à la boite */ margin-left: auto; /* Marge de gauche du contenu par rapport ; à la boite */

11 Ecrire les codes suivants dans le fichier menu_vertical.css /* FEUILLE DE STYLE GENERALE */ /* menu */ /* Disposition et caractéristiques du niveau 1 */ /* Suppression du margin, du padding et des puces du <ul> */ #menu { margin: 0 ; padding: 0 ; list-style-type: none ; ;

12 /* On définit une marge basse de 1px entre chaque boite pour aérer le tout */ #menu li { padding: 0; margin-top: 0; margin-right: 0; margin-bottom: 1px; margin-left: 0; ;

13 /* Définitions des boites de chaque liens à l'accueil de la page */ #menu li a { display: block;/* L'affichage se fera en hauteur */ width: 98px;/* Largeur de la fenêtre*/ line-height: 10px;/* Hauteur de la ligne (donc de la fenêtre)*/ background-color: #FF0000; /* Couleur de fond de la fenêtre*/ color: #FFFFFF; /* Couleur du texte*/ font-size: 10px; /* Taille du texte*/ font-weight: normal; /* Epaisseur du texte*/ text-align: center; /* Alignement du texte*/ text-decoration: none; /* Décoration pour le texte aucune, clignotant, souligné etc)*/ border: 1px solid #000099; /* épaisseur de la bordure et couleur*/

14 /* Défintions des boites de chaque liens au passage de la souris */ #menu li a:hover { color: #FFCC00; /* Couleur du texte*/ background-color: #999999; /* Couleur de fond de la fenetre */ border: 1px solid #FFFF00; /* epaisseur de la bordure et couleur*/ /* Défintions des boites de chaque liens au clic de la souris */ #menu li a:active { color: #000000; /* Couleur du texte*/ background-color: #FFFF00; /* Couleur de fond de la fenetre */ border: 1px solid #FF00FF; /* epaisseur de la bordure et couleur*/

15 Ecrire les codes suivants dans le fichier sommaire.php <ul id="menu"> <li><a href="index.php">accueil</a></li> <li><a href="page1.php">page 1</a></li> <li><a href="#">deuxiéme lien</a></li> <li><a href="#">troisième lien</a></li> <li><a href="#">quatrième lien</a></li> <li><a href="#">cinquième lien</a></li> </ul>

16 Notre sommaire commence par <UL fait appel à la feuille de style menu et ce termine par </UL Les lignes suivantes commencent par <li et ce termine par /li> Sur la première ligne nous appelons après un clic de souris la page index.php et sa désignation affichée sera ACCUEIL Sur la deuxième ligne nous appelons après un clic de souris la page page1.php et sa désignation affichée sera Page 1 Sur les lignes suivante nous appelons après un clic de souris aucune page pour l'instant et les désignations affichées seront deuxième lien, troisième liens etc.

17 Ecrire les codes suivants dans le fichier index.php: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <title>les menus</title> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="designation" content=""> <meta http-equiv="content-language" content="fr"> <link rel="shortcut icon" type="image/x-icon" href="" /> Suite feuille suivante

18 <meta http-equiv="content-type" content="text/html; charset=iso "> <link rel="stylesheet" type="text/css" href="style/style_div.css"> <link rel="stylesheet" type="text/css" href="style/menu_vertical.css"> </head> <body> <div id="bandeau">ceci est le bandeau</div> <div id="contenu"> <div id="menu"><div id="sommaire"><?php include ("sommaire.php"); //Importe les menus?></div></div> <div id="blocnews">bloc News</div> La page d'accueil</div> <div id="pied_page">ceci est le pied de page</div> </body> </html>

19 Nous appelons les différentes balises qui via les feuilles de style mettront en place notre page Sur la ligne menu nous appelons le fichier sommaire.php pour cela nous utilisons entre les balises <? php et?> un language PHP include ("sommaire.php"); et des commentaires.

20 Ecrire les codes suivants dans le fichier page1.php: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <title>la page 1</title> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="designation" content=""> <meta http-equiv="content-language" content="fr"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="shortcut icon" type="image/x-icon" href="" /> <meta http-equiv="content-type" content="text/html; charset=iso "> Suite feuille suivante

21 <link rel="stylesheet" type="text/css" href="style/style_div.css"> <link rel="stylesheet" type="text/css" href="style/menu_vertical.css"> </head> <body> <div id="bandeau">ceci est le bandeau</div> <div id="contenu"> <div id="menu"><div id="sommaire"><?php include ("sommaire.php"); //Importe les menus?></div></div> <div id="blocnews">bloc News</div> La page 1</div> <div id="pied_page">ceci est le pied de page</div> </body> </html> Ce fichier est semblable au fichier index.php à l'exception de du texte La page 1

22 Le résultat :

23 Ajoutons une cascade de niveaux : Pour cela ajoutons les codes suivants dans le fichier menu_vertical.css /*Mise en place des éléments pour deuxième niveau du menu*/ /*On positionne les elements du menu */ #menu ul li { position:relative; list-style: none; /*on enleve les icones de liste */ Suite feuille suivante

24 /* Position de la fenetre du deuxième niveau du menu */ #menu ul ul { position: relative; top: 0; left: 99px; /*99px correspond au décalage a droite, on décale de la taille de la fenetre de base*/ /* On cache tous les sous menu avec la propriété display none */ #menu ul ul { position: absolute; top: 0; left: 99px; display:none /*Lors du survol,avec la souris, les sousmenu apparaissent grâce a display: block */ #menu ul.niveau1 li.sousmenu:hover ul.niveau2, div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 { display:block;

25 Modifions le fichier sommaire.php <div id="menu"> <ul class="niveau1"> <li><a href="index.php">accueil</a></li> <li class="sousmenu"><a>choix</a> <ul class="niveau2"> <li><a href="page1.php">page 1</a></li> <li><a href="#">sous menu 2</a></li> </ul> </li> <li class="sousmenu"><a>menu 3</a> <ul class="niveau2"> <li class="sousmenu"><a href="#">sous menu 2</a> <ul class="niveau3"> <li><a href="#">sous menu 3</a></li> <li><a href="#">3.2</a></li> <li><a href="#">3.3</a></li></ul> </ul> </li> <li><a href="#">troisième lien</a></li> <li><a href="#">quatrième lien</a></li> <li><a href="#">cinquième lien</a></li> </ul> </div>

26 Le résultat :