CSS - Menu du haut

 Blog4ever - CSS Modèle 5 
 Blog4ever - CSS Modèle 5 

Suite des articles sur les modifications de la feuille de style.

CSS - Menu du haut





Les règles suivantes gérent la présentation du menu horizontal situé en dessous du titre du Blog/Site.
Son  nom  menu_haut précédé d'un diese  #  indique qu'il sera unique dans toute la page, c'est son  ID  (identifiant).
La troisième régle est une class (le point détermine celà) et son nom doit d'être différent de ID #menu_haut qui doit-être unique, c'est pour cette raison que le trait de soulignement a disparu, la class .menuhaut pourra être utilisée  plusieurs fois.
Voire le code HTML, mis en exemple dans le cadre ci-dessous, l'utilisation de l'ID et la class.


                                  /* ligne supérieure entre head et le menu  */
#menu_haut {   
border-top: 1px solid #6DC183;   /* épaisseur type couleur  */
width: 768px;         /*  largeur  */
padding: 0 0 0 0;     /*  marge intérieure nulle */
margin: -30px 0 0 0;  /* marge extérieure(-30 ajuste la marge haute) */
float: left;          /* menu liste horizontale flotte à gauche */
}
ul {
list-style-type: none;
width: 100%;          /* précision pour Opera */
}
.menuhaut li {
float: left;          /* les éléments flottent à gauche */
}



Dans le code HTML  ce menu est sous forme de liste dont les éléments, "block" , s'aligneront en ligne  en flottant sur le côté gauche, tant qu'il y aura de la place sur la ligne.

Attention !!! dangerATTENTION !!!  vous n'avez pas accès à ce code dans Blog4ever, je le montre comme exemple et pour mieux comprendre le système. C'est également de cette manière qu'il est possible de faire un diaporama de photos.

<div id="menu_haut">
  <ul class="menuhaut">
    <li><a href="index-490.html">Accueil</a></li>
    <li><a href="article-490.html">Articles</a></li>
    <li><a href="photo-490.html">Photos</a></li>
    <li><a href="forum-490.html">Forum</a></li>       
  </ul>
</div>


Régles spécifiques aux liens contituant le menuhaut, leur présentation totalement différente des autres liens  de la page.
Cette possibilité  de modification peut s'utiliser dans d'autres divisions de la page et ainsi passer outre les problèmes de visualistion des liens en fonction des couleurs ou images de fond.
                                /* lien non  actif  */
.menuhaut a {
margin: 0 2px;
width: 100px;
height: 23px;
display: block;
text-align: center;
border: 1px solid #6DC183;
text-decoration: none;
color: #fff;
background: #000;
font: bold 11pt Trebuchet MS;
}
                 /* lien survolé par la souris  */
.menuhaut a:hover {
background: #01280B;
border: 1px solid #6DC183;
}
                /* lien actif  */
.menuhaut a:active {
background: #000;
border: 1px solid #6DC183;
color: #000;
}


InformationJe ne reviens pas sur le détail des régles ci-dessus , qui gérent l'apparence des liens selon leur statut, décoration du texte, couleur fond et texte, taille des blocks, les bordurres et police des caractères....


Mes modifications personnelles sont insignifantes, j'ai mis border-top de #menuhaut à 0 et changer la couleur du texte.









07/12/2007
7 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 135 autres membres