Application pratique
La distinction claire entre le fond du code HTML et la forme de mise en page CSS rend possible un bouleversement complet de l'agencement du menu sans intervenir sur sa structure ou son contenu.
Exercice n°8 :
Créer un menu horizontal
Pour produire un menu horizontal tenant sur une seule ligne, on pourra donc conserver le code HTML initial :
<ul id="menu">
<li><a href="#">Retour à l'accueil</a></li>
<li><a href="#">Présentation de la région</a></li>
<li><a href="#">Historique Comtois</a></li>
<li><a href="#">Gastronomie locale</a></li>
<li><a href="#">Hôtels et gîtes</a></li>
<li><a href="#">Photographies</a></li>
</ul>
Voici les règles CSS pour améliorer l'aspect du menu de notre projet de site web :
ul {
margin:0;
padding:0;
font: bold 0.8em Georgia, "Times New Roman", Times, serif;
list-style-type: none;
}
li {
float:left;
}
li a {
display:block;
width: 110px;
height: 30px;
border: 1px solid black;
color: green;
background:#cdc586;
margin:0 3px;
text-decoration:none;
text-align:center;
}
li a:hover {
color: orange;
background: #005FA9;
}
Un truc pour bien comprendre, c'est par exemple :
- d'enregistrer ce code CSS de mise en forme des éléments <ul> et <li>
- le lier à la page contenant le code HTML des éléments ordonnées <ul>
- visualiser le résultat dans votre navigateur
Vous pourrez ainsi observer par vous même, la mise en forme spécifique de chaque ligne du code CSS, au fur et à mesure de la construction de ce menu horizontal.
Ouvrages de références
- « More on CSS » par Eric Meyer
(© CampusPress), 2005.
- « CSS 2 Pratique du design web » par Raphaël Goetter
(© Eyrolles), 2009.
Haut de page
Access®, Excel®, Powerpoint®, Word® & Windows®
sont des produits et marques déposés
propriété de
Microsoft, Inc.
Photoshop® &
Dreamweaver
® sont des produits et marques déposés propriété de
Adobe System. |
