PapyClic - Design

PapyClic - Design

Tutoriel - Barre de navigation avec image et texte

dizperso-inities.gif

barreImgGauche.jpg

 

Petites images sur le côté gauche du texte, différentes pour chacun des éléments du menu du haut "Barre de navigation".
Le nombre d'éléments maximum au moment de la rédaction de cet article, est de 5.

 

ATTENTION !!!  le code proposé est pour le RapidDesign, pour le Diz perso 1 il faut remplacer nav par #barre.

Exemple ci-dessous du code commenté, vous pouvez créer votre code en utilisant le générateur, voir plus bas

 

 

/* premier élément du menu */
.diz-barre-navigation li:first-child {
background: #codecouleur; /* code couleur du fond si utile */
background: url(https://static.blog4ever.com/2012/06/704535/arrow_up_16.png); /* URL image */
background-repeat: no-repeat; /* supprime la répétition de l'image */
background-position: left center; /* position de l'image à gauche */
padding-left: 20px; /* à régler selon largeur de l'image */
}
/* deuxième élément du menu */
.diz-barre-navigation li:first-child+li {
background: #codecouleur;
background: url(https://static.blog4ever.com/2012/06/704535/arrow_down_16.png);
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
}

 

 

Choisissez la couleur de fond dans une palette ou vous laissez transparent, la couleur de fond des éléments sera celle de la barre.
Indiquez la largeur des images pour que le texte ne les recouvre pas.

Ce générateur permet même de créer le code de plus de 5 éléments, car il n'a pas de limite. Mais la barre de navigation est limitée à 20 liens.

 

GENERATEUR des règles CSS

 

 

 

  

 

 

Ci-dessous le code CSS

 

Il vous reste à mettre dans ce code, les adresses des images.

 

 

 

Cliquez pour ouvrir une page où vous pourrez tester le code CSS >>> lien
Et même le modifier si vous connaissez le CSS.

 

 

 

 Les codes générés ci-dessus sont à coller dans la zone de personnalisation du CSS de l'assistant du DizPerso.

 

Espace de gestion → VOTRE BLOG → Design du blog → CSS/HTML → CSS personnalisé.

 

Exemple de code collé dans la zone.

 

 

Si votre espace de gestion est ouvert, cliquez sur : lien

 

N'oubliez pas, après visualisation dans l'assistant de cliquer sur "Appliquer" en bas de la colonne.

 

 


Si cet article vous a été utile, un petit J'aime me fera plaisir.

N'hésitez pas un mettre un commentaire, si vous avez apprécié cet article, mais également si vous n'êtes pas pleinement satisfait. 
Pour plus d'explications poster sur le forum

 

 

HautPrécédente

 



12/11/2013
27 Poster un commentaire

A dcouvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 152 autres membres