Gestion du style des liens - Barre menu du haut

Niveau difficulté - Initié Logo versions payantes Logo Firefox Logo Internet Explorer Logo Googl Chrome Logo Safari Logo Opéra Ajouter cet article à vos favoris

Avoir déjà utilisé les langages HTML et CSS, ou être motivé pour les apprendre, en rejoignant un groupe prêt à partager leurs connaissances.
Pour ceux qui actuellement modifient le design de leur blog,  en s'aidant des discussions sur le forum, des tutos de Nana et dans mes blogs Diztest et BRICABRAC.
L'utilisation des codes que je vous propose, ne devraient pas vous créer de problème, bien au contraire vous simplifieront la vie.

 

 

Objectif :

Gérer le style des liens du menu barre en haut, indépendament les uns des autres, de façon à mettre par exemple une couleur de fond différente ou une image différente à chaque lien.

 

Pour réaliser cette modification, il faut avoir activé le système "myDesign", dans mon exemple j'utilise le Diz Perso comme modèle.

 

Première étape - Modification de la structure HTML

En gestion rendez vous dans "VOTRE BLOG" → Personnaliser le design → Structure

 

Repérez les lignes suivantes ...

 

<div id="barre">
            {menu_haut}
 </div>

 

Vous les remplacez par les lignes ci-dessous...

 

<div id="barre">
    <ul>
        <li><a id="barre_accueil" href="index-xxxxxx.html">Accueil</a></li>
        <li><a id="barre_article" href="article-xxxxxx.html">Articles</a></li>
        <li><a id="barre_photo" href="photo-xxxxxx.html">Photos</a></li>
        <li><a id="barre_forum"  href="forum-xxxxxx.html">Forum</a></li>
    </ul>
</div>

 

Cette action a pour but de ressortir du bloc {menu_haut}, les éléments de liste des liens, pour mettre à chacun un identifiant(en bleu) qui permettra de mettre un style spécifique, à chaque lien, dans le CSS.
Dans le texte en rouge, vous devez remplacer le xxxxxx par le numéro index de votre blog.

 

 

Deuxième étape - Création des règles CSS

En gestion rendez vous dans "VOTRE BLOG" → Personnaliser le design → Style du blog

Cliquez sur le lien "Modification directe du CSS"

 

Recherchez les règles avec le séleteur #barre, après la dernière, en principe #barre a:hover, vous insérez les lignes exemples ci-dessous.

 

#barre_accueil
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792540_201204203258970.png);
}
#barre_article
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792537_201204203220367.png);
}
#barre_photo
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792541_201204203318115.png);
}
#barre_forum
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792544_201204203441768.png);
}

 

 

 

 

Vous changerez les adresses des images après avoir testé le système. Ces images n'apparaîtront peut-être pas. En effet dans les règles plus haut #barre a et #barre a:hover, il y a peut-être les attributs background et background-image, qu'il faut supprimer ou mettre en commentaire(entre /* et */) pour annuler leur action.
Voilà ci-dessous comment votre code CSS doit se présenter.

 

 

#barre
{
width : 100%;
margin: 10px 0 10px 0;
height:30px;
}
#barre ul
{
list-style-type : none;
width: 458px;
margin-left: auto;
margin-right: auto;
}
#barre li
{
float : left;
}
#barre a
{
/* background : #004000; */
color : #000000;                 
text-decoration : none;
width : 100px;
height : 25px;
padding-top : 5px;
margin-left : 10px;
border-width : 1px;
border-style : solid;
border-color : #000000;
text-align : center;
display : block;
}
#barre a:hover
{
/* background : #C5D5A7; */
text-decoration : underline;
border : 1px solid #004000;
}

#barre_accueil
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792558_201204203739120.png);
}
#barre_article
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792537_201204203220367.png);
}
#barre_photo
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792541_201204203318115.png);
}
#barre_forum
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792544_201204203441768.png);
}

 

Ce code permet donc de mettre tous les attributs différents pour chaque lien. Sinon vous utilisez les autres règles qui gérent tous les liens de la même façon.

 

Si vous souhaitez mettre une image différente au survol de la souris, il faut créer les mêmes règles avec :hover

 

Exemple:

#barre_accueil:hover
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792558_201204203739120.png);
}
#barre_article:hover
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792548_201204203524580.png);
}
#barre_photo:hover
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792560_201204203802258.png);
}
#barre_forum:hover
{
background-image : url(https://static.blog4ever.com/2008/05/205392/artfichier_205392_792536_20120420315891.png);
}

 

 


 Par la même occasion vous pouvez changer les noms des modules, modifier leur ordre et même rajouter un lien comme "Contact" :
<li><a id="barre_contact"  href="contact-xxxxxx.html">Contact</a></li>

 

 


Il est possible également de faire la même chose dans certains modèles graphiques, seul l'identifiant de la barre change.

 

...



13/05/2012
0 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 42 autres membres


Rechercher sur Diztest ? :

Recommander ce blog | Contact | Signaler un contenu | RSS | Espace de gestion

retour Accueil Page precedente Bas de page Plein ecran - Retour alt+F4 Haut de page Page suivante Envoyer un mail a PapyClic le webmaster de Test-DizPerso