Les CSS et un menu horizontal


Commencons par le contenu du fichier un_niveau

1. Reprenons l'exemple de mise en page

2. Définissons tout d'abord les propriétés de base de nos blocs. Dans le fichier CSS style_div.css


Nous allons centrer nos composants pour cela nous allons ajouter :

margin-right: auto;
margin-left: auto;


Ce qui va se transcrire dans notre fichier css par :
div#bandeau {
width:600px;
height:50px;
margin-right: auto; /* Marge de droite du bandeau auto égale milieu de page */
margin-left: auto; /* Marge de gauche du bandeau auto égale milieu de page */
background-color:#00CCFF;
}
div#contenu {
width:600px;
height:400px;
margin-right: auto;/* Marge de droite du bandeau auto égale milieu de page */
margin-left: auto;/* Marge de droite du bandeau auto égale milieu de page */
background-color:#FFCC00;
}
div#pied_page {
clear:both;
width:600px;
height:50px;
margin-right: auto; /* Marge de droite du bandeau auto égale milieu de page */
margin-left: auto; /* Marge de droite du bandeau auto égale milieu de page */
background-color:#33FF99;
}
3. Nous allons ajouter un bandeau menu
div#menu {
width:600px;
height:22px;
margin-right: auto;/* Marge de gauche du bandeau auto égale milieu de page */
margin-left: auto;/* Marge de gauche du bandeau auto égale milieu de page */
margin-top: -15px;/* On définit une marge en haut pour recouvrir le bandeau*/
background-color:#000000;
font-family: Arial, Helvetica, sans-serif;/* On définit une police */
font-size:12px;/* On définit une taille de police */
color: #FFFFFF;/* On définit une couleur de police */
font-weight: bold;/* On définit une epaisseur de police */
text-align:center;/* On définit l'alignement du texte */
z-index: 11;/* On s'assure que le menu sera au-dessus des autres composants de la page */
}
4. Nous allons définir une couleur de fond et la taille des cases du niveau 1
#menu li {
position: relative;
float: left;/* positionné flottant à gauche*/
width: 85px;/* On définit une largeur pour chaque case de lien*/
height: 20px;/* On définit une hauteur pour chaque case de lien*/
background-color: #000000;/* On définit une couleur de fond pour chaque case de lien*/
list-style-type: none ;/* Suppression des puces */
}
5. Nous allons définir couleur du texte au passage de la souris
#menu a:hover {
color: #FFFF00;/* Couleur du texte*/
background-color: #3C3C3C;/* Couleur de fond de la fenetre */
border-bottom: none;/* epaisseur de la bordure et couleur*/
}
6. Nous allons définir les 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*/
}
7. Nous allons définir le texte et les caractéristiques des liens visités
#menu a:hover {
color: #FFFF00;/* Couleur du texte*/
background-color: #3C3C3C;/* Couleur de fond de la fenetre */
border-bottom: none;/* epaisseur de la bordure et couleur*/
}
8. Nous allons définir le texte et les caractéristiques des liens actifs
#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*/
}

 

9 Définissons le fichier positionnement.php

Ce fichier n'a pas une extension en HTML mais en PHP car nous allons faire appel à une fonction PHP pour appeler le fichier commun menu_horizontal.html

L'appel d'un language en PHP commence par <?php

Et ce termine par ?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style_div.css">
<title>Positionnement CSS</title>
</head>
<body>
<div id="bandeau">Ceci est le bandeau</div>

<?php
include ("menu_horizontal.html"); //Importe les menus
?>

<div id="contenu">
Ceci est le contenu de la page d'accueil
</div>
<div id="pied_page">Ceci est le pied de page</div>
</body>
</html>

 

10 Définissons les fichier page1.php, page2.php etc.

Ces fichiers seront identique à positionnement.php sauf le titre et le contenu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style_div.css">
<title>Page 1 CSS</title>
</head>
<body>
<div id="bandeau">Ceci est le bandeau</div>

<?php
include ("menu_horizontal.html"); //Importe les menus
?>

<div id="contenu">
Ceci est le contenu de la page 1
</div>
<div id="pied_page">Ceci est le pied de page</div>
</body>
</html>

11 Définissons le fichier menu_horizontal.html

L'idée ici va donc être de créer un fichier commun à toutes les page de notre site :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<div id="menu">
<ul class="niveau1">
<li><a href="positionnement.php">ACCUEIL</a></li>
<li><a href="page1.php">un</a></li>
<li><a href="page2.php">deux</a></li>
<li><a href="page3.php">trois</a></li>
<li><a href="page4.php">quatre</a></li>
<li><a href="page5.php">cinq</a></li>
</ul>
</div>
</html>
Ce fichier comprend tous les liens pour naviguer sur notre site

Voici le résultat :

Continuons par le contenu du fichier multi_niveau

12. Nous allons ajouter dans le fichier CSS style_div.css
On positionne les éléments du menu et on cache tous les sous menu avec la propriété display none

#menu ul ul {
position: absolute;
top: 0;
width: 85px;/* On définit une largeur pour chaque case de lien*/
left: 99px;
display:none
}

13. Position du niveau 2 par rapport au niveau 1

#menu ul.niveau2 {
top: 21px;/* On définit un décalage pour l'affichage */
left: 0px;
}

14. Définition de la bordure du niveau 2

#menu ul ul {
position: absolute;
top: 0;
width: 85px;/* On définit une largeur pour chaque case de lien*/
left: 99px;
display:none
}

15. Définition de la position du niveau 3 par rapport au niveau 2

#menu ul.niveau3 {
top: -1px;/* On définit un décalage pour l'affichage */
left:85px;
}

16. Définition du survol ,avec la souris, les sousmenu apparaissent grace a display: block

#menu ul.niveau1 li.sousmenu:hover ul.niveau2, #menu ul.niveau2 li.sousmenu:hover ul.niveau3 {
display:block;
}

 

Continuons par le contenu du fichier menu_horizontal.html

17. Nous utilisons la position menu3 pour illustrer l'utilisation de trois niveaux et la position menu 2 pour illustrer l'utilisation de deux niveaux

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<div id="menu">
<ul class="niveau1">
<li><a href="positionnement.php">ACCUEIL</a></li>

<li class="sousmenu"><a>menu 3</a>
<ul class="niveau2">
<li class="sousmenu"><a href="page1.php">Page 1</a>
<ul class="niveau3">
<li><a href="page2.php">Page 2</a></li>
<li><a href="#">3.2</a></li>
<li><a href="#">3.3</a></li></ul>
</ul> </li>


<li><a href="page2.php">deux</a></li>

<li class="sousmenu"><a>menu 2</a>
<ul class="niveau2">
<li><a href="page3.php">Page 3</a></li>
<li><a href="#">2.2</a></li>
</ul>
</li>

<li><a href="page4.php">quatre</a></li>
<li><a href="page5.php">cinq</a></li>
</ul>
</div>
</html>

Voici le résultat :