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.
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 !!! 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>
ATTENTION !!! 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.
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;
}
Je 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.
