Les CSS et un menu vertical


1. Ouvrir l'éditeur de texte.
Si vous utilisez Notepad++, pensez à aller dans le menu "Langage / CSS" pour activer la coloration du CSS. Vous penserez à enregistrer votre fichier en .css au lieu de .html.

2. Ecrire les codes suivants dans le fichier style_div.css étudier 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)

/* Pas de marge pour la page à construire*/
*
{
margin:0;
padding:0;
}

/* La couleur du fond de la page*/
body
{background-image: url(../images/background.jpg);
/* on choisie une image ou une couleur*/
background-repeat: repeat;
/* L'image doit etre répéter sur l'axe des X et Y */
}

/* 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*/
}

/* 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 */
}

/* 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*/
}

/* 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 */
}

3. Ecrire les codes suivants dans le fichier menu_vertical2.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 ;
}

/* 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;
}

/* Défintions 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 fenetre*/
line-height: 10px;
/* Hauteur de la ligne (donc de la fenetre)*/
background-color: #FF0000;
/* Couleur de fond de la fenetre*/
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;
/* epaisseur de la bordure et couleur*/
}

/* 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*/
}

4. Ecrire les codes suivants dans le fichier sommaire_depart.php:
<ul id="menu">
<li><a href="accueil.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>

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.

5. Ecrire les codes suivants dans le fichier accueil.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Les menus</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-8859-15">
<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_depart.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>

Nous appelons les différentes balises qui via les feuilles de style vont mettrent 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.

6. Ecrire les codes suivants dans le fichier page1.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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-8859-15">
<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_depart.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 accueil.php à l'exception de La page 1

7. Le résultat :

8. Ajoutons une cascade de niveaux :

Pour cela ajoutons les codes suivants dans le fichier menu_vertical.css et renommons le menu_vertical2.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 */
}

/* 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 grace a display: block */
#menu ul.niveau1 li.sousmenu:hover ul.niveau2, div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {
display:block;

}

Modifions le fichier sommaire_depart.php qui devient sommaire.php

<div id="menu">
<ul class="niveau1">

<li><a href="accueil.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>

Modifions la ligne sur les fichiers accueil.php et page1.php sommaire_depart.php devient sommair.php

<div id="menu"><div id="sommaire"><?php include ("sommaire.php"); //Importe les menus?></div></div>

accueil.php et page1.php qui deviennent accueil_complet.php et page1_complet.php

9. Le résultat :