On passe maintenant au menu qui s'affiche dans la zone supérieure de la fenêtre.
Vous avez déjà réalisé une bonne partie du travail pour ce menu. Vous vous souvenez certainement du joli dégradé de couleurs enregistré en tant qu'image d'un pixel. C'est précisément celui-ci qui est maintenant utilisé. Toutefois, il est nécessaire de créer la structure HTML appropriée pour la zone du menu. Cela pourrait ressembler à ceci :
<div class="header"> <div class="header-top"> <h1>Votre expert-comptable</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Page d'accueil</a></li> <li><a href="#">À propos de nous</a></li> <li><a href="#">Notre approche</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Mentions légales</a></li> </ul> </div> <div class="header-img"> </div> </div>
La conception de l'arrière-plan implique l'intégration de l'image d'un pixel en la répétant verticalement jusqu'à ce que l'élément entier soit rempli.
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
Ensuite, le menu peut être stylisé. Pour ces menus, il n'y a en principe rien de spécial à prendre en compte. Ce qui compte en réalité dans ces menus ce sont toujours les aspects suivants :
• Masquer les puces de la liste avec list-style-type: none;.
• Assurer que les éléments de la liste soient affichés côte à côte.
Je travaille à cet endroit – vous le savez déjà – avec un dégradé de couleurs réalisé à l'aide d'une image. Entre-temps, il existe bien entendu de nombreuses autres options pour les menus. Pensez par exemple aux frameworks JavaScript comme jQuery. Présenter toutes ces possibilités ici dépasserait bien sûr le cadre. Cependant, il existe de nombreux générateurs en ligne grâce auxquels vous pouvez créer des menus en quelques clics. Vous en trouverez un sans jugement sur s'il est le plus génial de sa catégorie, à l'adresse http://www.cssmenubuilder.com/.
En tout cas, j'ai opté pour la variante suivante :
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 25px;
padding-left: 25px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #fff;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.topmenu ul li a:hover {
background-image: url(../images/menue-hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}
En fait, le seul élément crucial est l'état de survol. Lorsque cet événement se produit, une autre image d'arrière-plan est affichée.
Le menu de droite
Le site web ne possède pas seulement un menu en haut, un autre est affiché dans la zone de la fenêtre à droite.
Ce menu appartient à la zone div avec la classe content-right. Pour la phase de développement du site, j'ai simplement inséré des contenus fictifs à cet endroit.
<div class="content-right"> <h2>Menu principal</h2> <ul> <li><a href="#">Lien 1</a></li> <li><a href="#">Lien 2</a></li> <li><a href="#">Lien 3</a></li> <li><a href="#">Lien 4</a></li> <li><a href="#">Lien 5</a></li> <li><a href="#">Lien 6</a></li> <li><a href="#">Lien 7</a></li> <li><a href="#">Lien 8</a></li> <li><a href="#">Lien 9</a></li> <li><a href="#">Lien 10</a></li> </ul>
Le contenu est d'abord positionné à l'endroit approprié et à la taille désirée.
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}
Passons maintenant à la définition du menu proprement dit. Cette fois, les entrées sont cependant affichées les unes en dessous des autres. Vous devez donc seulement veiller à masquer les puces de la liste. Le reste de la conception du menu vous incombe finalement.
.content-right ul {
list-style-type: none;
}
.content-right ul li {
padding-left: 45px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ccc;
}
.content-right ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
text-align: left;
display: block;
}
.content-right ul li a:hover {
color: #0b90d6;
}Ce devrait être le résultat affiché dans le navigateur maintenant :
Le menu inférieur
Dans le pied de page du site web, il y aura un autre menu. Ici sur PSD-Tutorials.de, un tel menu est également utilisé pour fournir des liens vers des informations générales.
Sur notre site web, il y a aussi une mention du droit d'auteur. Les deux éléments sont en fait assez typiques pour les sites web. Tout d'abord, la structure HTML à nouveau.
<div class="bottom"> <ul> <li><a href="index.html">Accueil</a></li> <li><a href="#">À propos de nous</a></li> <li><a href="#">Nouveautés</a></li> <li><a href="#">Centre de contrôle</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Mentions légales</a></li> <li><a href="#">Plan du site</a></li> </ul> <p>© Droit d'auteur 2014 par PSD-Tutorials.de</p> </div>
Il s'agit d'une simple liste ul. Chaque élément de liste contient une entrée de menu. En dessous de la liste ul, il y a un élément p dans lequel se trouve la mention du droit d'auteur. Ce qui manque maintenant, c'est bien sûr la syntaxe CSS.
.bottom {
image de fond: url(../images/footer.jpg);
répétition de l'image de fond: non;
position de l'image de fond: haut à gauche;
alignement du texte: centre;
largeur: 1000px;
hauteur: 110px;
flottant: gauche;
}
Comment vous concevez le pied de page vous revient finalement. J'utilise à nouveau un dégradé de couleur. Vous pouvez également par exemple utiliser une simple couleur de fond ou directement la syntaxe CSS3. Dans le cas de ma variante graphique, il est cependant important d'empêcher la répétition avec background-repeat: no-repeat;.
Jetez d'abord un coup d'œil au résultat :
Ce qui est remarquable ici, ce sont les traits blancs situés à côté de chaque entrée de menu. Ils sont définis par différentes indications de border-left, ce qui signifie finalement que les indications se rapportent chacune au bord gauche de l'élément.
En total, la syntaxe pour le menu inférieur est alors la suivante :
.bottom ul {
marge supérieure : 30px;
type de liste : none;
}
.bottom ul li {
affichage : en ligne;
largeur de la bordure gauche : 1px;
style de la bordure gauche : solide;
couleur de la bordure gauche : #fff;
}
.bottom ul li a {
taille de la police : 12px;
couleur : #fff;
décoration du texte : aucune;
marge à droite : 15px;
marge à gauche : 15px;
}
.bottom ul li a:hover {
décoration du texte : souligné;
}
.bottom p {
taille de la police : 12px;
couleur : #fff;
marge supérieure : 40px;
}
.bottom a {
taille de la police : 12px;
couleur : #fff;
marge supérieure : 40px;
}
.bottom a:hover {
décoration du texte : aucune;
}
Une particularité par rapport au menu supérieur est présente ici. En fait, aucune autre image n'est chargée en cas de survol. Cependant, pour donner aux visiteurs un indice qu'ils survolent un lien avec le pointeur de la souris, les liens individuels sont soulignés lors de l'événement de survol.
À la fin de ce tutoriel, les étapes fondamentales vers le site web sont terminées. Ce qui manque maintenant, c'est l'embellissement de la page. Plus d'informations à ce sujet dans les prochains tutoriels.
