PapyClic - Design

PapyClic - Design

Barre de navigation

dizperso-apprendre.gif

 

Représentation graphique de la barre de navigation et de tous les blocs qu'elle contient avec leur sélecteur CSS.
 

http://static.blog4ever.com/2012/06/704535/selecteursBarre.jpg

 

Quelques propositions de code CSS, à copier et à coller, pour toutes les versions sous le modèle RapidDesign (ancien Diz perso 2).

 

Changer les couleurs des liens.

 

Barre navigation 

 

Fond couleur et couleur des textes pour les liens, avec une petite marge intérieure sur les côtés pour que le texte ne colle pas aux bords. 

Les couleurs sont inversées au survol des liens, la deuxième règle.

 

.diz-barre-navigation a {
  background-color: #B1C4E4;
  color: #034984;
  padding: 0 3px;
}
.diz-barre-navigation a:hover {
  background-color: #034984;
  color: #B1C4E4;
}

 

Propriétés que vous pouvez utiliser dans la même règle :  .diz-barre-navigation 
ou .diz-barre-navigation a:hover

 

Taille des caractères : font-size: 12px;
Italique : font-style: italic;
Gras : font-weight: bold;
Petites capitales : font-variant: small-caps;
Minuscules : text-transform: lowercase;
Majuscules : text-transform: uppercase;
Première lettre de chaque mot en majuscule : text-transform: capitalize;
Pour que le texte  reste comme il est saisi : text-transform: none;

 

Exemple de code pour centrer le texte du lien, comme ci-dessous.

 

.diz-barre-navigation a {
  text-align : center;
}
.diz-barre-navigation a:hover {
  text-align : center;
}

Code pour les 3 alignements :

Alignement  centré : text-align: center;
Alignement à droite : text-align: right;
Alignement à gauche : text-align: left;

 

 

Une image à gauche des liens.

 

Barre navigation 

 

Remplacer l'adresse de l'image et modifier si nécessaire la valeur de l'attribut "padding-left"

 

.diz-barre-navigation li{
  background-image: url(' adresse de votre image ');
  background-repeat: no-repeat;
  padding-left: 40px;
  background-position: left center;
}

 

Mais il y a mieux, mettre des images différentes à chaque lien. Voir le tutoriel avec générateur qui vous simplifiera la mis en place des images >>>lien.

 

 

Aligner les liens à droite et le formulaire "Recherche" à gauche.

 Barre navigation 

 

.diz-barre-navigation ul {
  margin: 0 20px 0 0;
  float: right;
}

 .diz-barre-navigation .recherche_nav {
  float: left;
}


Il faut adapter les règles en exemples dans cet article :

  1. .diz-barre-navigation a
  2. .diz-barre-navigation a:hover
  3. .diz-barre-navigation ul
  4. .diz-barre-navigation li
  5. .diz-barre-navigation .recherche_nav

 

 

Pour vous aider à créer les règles, cliquez sur le bouton ci-dessous.

 

Générateur des règles

 

 

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

 

Quelques exemples dont vous pouvez copier le code, le coller dans la page test CSS ci-dessus et l'adapter en le modifiant :

 

http://static.blog4ever.com/2012/06/704535/Exemple--1-MenuHaut.jpg http://static.blog4ever.com/2012/06/704535/Exemple--2-MenuHaut.jpg http://static.blog4ever.com/2012/06/704535/Exemple--3-MenuHaut.jpg
http://static.blog4ever.com/2012/06/704535/Exemple--4-MenuHaut.jpg http://static.blog4ever.com/2012/06/704535/Exemple--5-MenuHaut.jpg http://static.blog4ever.com/2012/06/704535/Exemple--6-MenuHaut.jpg

 

 


 Tous les codes indiqués ci-dessus ou que vous aurez modifiés sont à coller dans la zone de personnalisation du CSS de l'assistant du DizPerso.

 

 

Dans l'espace de gestion → VOTRE BLOG → Design du blog →  CSS/HTML → CSS personalisé

 

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

 

Haut Précédente

 



03/05/2013
32 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 149 autres membres