Cours HTML

Laurence Jacquenod

Création d'un mini site

Réalisation de la mise en page

Nous allons construire un mini site, pas à pas pour comprendre le principe de fonctionnement de la mise en page avec css sur un exemple réel. Au début du html, on réalisait la mise en page directement dans le HTML, puis la mise en page se réalisait avec des tableaux et tableaux imbriqués. Maintenant, on ne préconise plus ces méthodes.
Le HTML, nous l'avons vu dans les chapitres précédents doit être sérieusement hiérarchisé, avec un titre 1, des titres 2, 3... Mais pour faire un présentation soignée, avec des menus, nous garderons cette mise en forme en l'encadrant de div, pour créer des espacements, des colonnes, des onglets.
Dans l'exemple que nous allons voir, la page qui se répétera dans les différentes rubriques. Pour commencer nous écrivons le xhtml.

haut de page, illustration

menu (déroulant)

contenu

footer

HTML <body>
<div id="conteneur">
<div class="haut"> haut de page </div>
<div class="menu">menu déroulant</div>
<div class="contenu"> contenu</div>
<div class="footer">footer</div>
</div>
</body>

CSS body {background-color:#522501;margin:0;padding:0;}
div.conteneur {width:960px;background-color:#FFF;margin:auto;text-align:center;}
div.haut {background-image:url(images/choc.jpg);background-repeat:no-repeat;height:80px;min-height:80px;}
div.menu {height:22px; width:960px;}
div.contenu {min-height:400px;text-align:left;padding:10px;}
div.footer {color:#white; font-style:italic;}

Création d'un menu déroulant

Le menu que nous allons étudier pas à pas est inspiré d'un tutoriel trouvé sur le site du zéro, voir le lien.
Tout d'abord nous allons mettre en place le xhtml.

Pour créer le menu déroulant, nous allons utiliser des listes à puce. Que nous allons ensuite imbriquer, c'est à dire placer une liste à puce dans une liste à puce pour les sous menus. A chaque ligne, nous attribuons ensuite un hyperlien qui pointera sur chaque rubrique et sous rubrique du site. Dans l'exemple j'écris des dièse pour remplacer les pages qui n'existent pas encore.

HTML <ul id="menu">
<li><a href="#">Les desserts en chocolat</a>
<ul class="menu02">
<li class="menu03"><a href="#">Les gâteaux</a></li>
<li class="menu02"><a href="#">Les entremets</a><a href="#"></a></li>
<li class="menu02"><a href="#">Les glaces</a></li>
</ul></li>
<li><a href="page01.html">Faire des chocolat maison</a>
<ul class="menu02">
<li><a href="#">Matériel</a></li>
<li><a href="#">Fournisseurs</a></li>
<li><a href="#">Les recettes</a></li>
</ul>
</li>
<li><a href="#">Histoire du chocolat</a>
<ul class="menu02">
<li><a href="#">Comment il est né</a><a href="#"></a></li>
<li><a href="#">Musée du chocolat</a></li>
</ul>
</li>
<li><a href="#">Adresses</a>
<ul class="menu02">
<li><a href="#">Liste des super chocolatiers</a></li>
<li><a href="#">Où déguster du chocolat</a></li>
</ul>
</li>
</ul>

Les CSS

CSS #menu, #menu ul Liste
{ padding : 0; pas de marge intérieure
margin : 0; ni extérieure
list-style : none; on supprime le style par défaut de la liste, pas de petits ronds
line-height : 21px; on définit une hauteur pour chaque élément
text-align : center; on centre le texte qui se trouve dans la liste
}
#menu Ensemble du menu
{ font-weight : bold; on met le texte en gras
font-family : Arial;
font-size : 12px;
}
#menu a Contenu des listes
{ display : block; on change le type d'élément, les liens deviennent des balises de type block
padding : 0; ; aucune marge intérieure
color : #000; ; couleur du texte
text-decoration : none; ; on supprime le style par défaut des liens (la plupart du temps = souligné)
width : 238px; ; largeur
}
#menu li Éléments des listes
{ float : left; pour IE qui ne reconnaît pas "transparent"
border-right : 1px solid #fff;} on met une bordure blanche à droite de chaque élément

IE ne reconnaissant pas le sélecteur ">"
html>body #menu li {border-right: 1px solid#964E15 ; bordure-bottom:1px solid#964E15;} on met une bordure
#menu li ul Sous-listes
{ position: absolute; Position absolue
width: 238px; Largeur des sous-listes
left: -999em;} Hop, on envoie loin du champ de vision
#menu li ul li Eléments de sous-listes /* pour ie qui ne reconnaît pas "transparent" (comme précédemment)
{border-top : 1px solid #fff;} on met une bordure blanche en haut de chaque élément d'une sous-liste
IE ne reconnaissant pas le sélecteur ">"
html>body #menu li ul li{border-top : 1px solid transparent;} on met une bordure transparente en haut de chaque élément
#menu li ul ul {margin : -22px 0 0 238px ; On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes
pour IE qui ne reconnaît pas "transparent" (comme précédemment)
border-left : 1px solid #fff ;} Petite bordure à gauche pour ne pas coller ...
IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-)
html>body #menu li ul ul {border-left : 1px solid transparent ;} on met une bordure transparente sur la gauche de chaque élément

#menu a:hover Lorsque la souris passe sur un des liens
{ color: #FFF; background: #964e15; }

#menu li:hover ul ul, #menu li.sfhover ul ul Sous-sous-listes lorsque la souris passe sur un élément de liste
{ left: -999em;} On expédie les sous-sous-listes hors du champ de vision
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste *
{ left: auto; Repositionnement normal
min-height: 0;} Corrige un bug sous IE

div#menu01 {background-image:url(images/deg.jpg); width:960px; height:22px; border-bottom:#964e15 1px solid; border-top:#FFF 1px solid; } ul.menu02 { background-color:#FFF; opacity: 0.9; -moz-opacity:0.9; filter:alpha(opacity=90); }
li.menu03 { border-bottom:#964e15; }

Pui ajouter du javascript, créer un nouveau document avec l'éditeur de text et lui donner l'extension.js

sfHover = function() { var sfEls = document.getElementById("menu").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover);

Placer ce code entre les deux balises head :

<script type="text/javascript" src="menu.js"></script>

site Voici le résultat