[CSS] Barre de navigation

Rappel du premier message :



Bonjour, Bonsoir, Salut, Yo, enfin voila x).

Après mainte recherche je vois qu'aucun tuto n'a été poster sur la barre de navigation fait uniquement pas CSS, alors je me lance pour vous l'expliquez.

Niveau: Facile Aperçu: Ici Tuto by Sui'

Alors nous allons commencer par le commencement logique :p.

Allez dans votre Panneau d'Administration -> Affichage -> En-tête et Navigation :

- Afficher seulement des images dans la barre des liens : Cocher Non
- Position du menu: Centrer
- Forcer la barre de navigation à rester sur une ligne : Cocher Oui

Enregistrez

Ensuite allez dans Affichage -> Couleur -> Feuille de Style

Mettez ce code à l'intérieur:

Code:

a.mainmenu img {
display:none;
}

a.mainmenu{
    text-decoration:none;
        padding: 1px 1px;
        margin: 0px;
        background: #Couleur;
        color: #000;
        border: 1px solid #Couleur;
}

Padding est la marge entre le texte et le cadre, le premier chiffre donnera l'espace entre le haut et le bas , alors que le second donnera l'espace à gauche et à droite.

Margin est l'espace entre tous les cadres, à vous de mettre la taille souhaiter.

Background est la couleur de fond de la cellule, à vous de mettre le code couleur voulu.

Color signifie la couleur du texte.

Border signifie la bordure sur le coup j'ai directement mis l'épaisseur de la bordure le style et la couleur, à vous de l'adaptez par la suite.


Maintenant nous allons rajouter un code qui changera l'aspect de la cellule au passage de la souris (Non obligatoire)

Code:

a:hover.mainmenu{
    text-decoration:none;
        padding: 1px 1px;
        margin: 0px;
        background: #000;
        color: #FFF;
        border: 1px solid #FFF;
}

Je n'est seulement changer que les couleurs, une nouvelle fois à vous de l'adaptez .

Maintenant comme je me doute vous avez tous cette barre de navigation coller à la publicité pour l'espacer il vous suffit juste de mettre ce code :

Code:

#page-body {
margin-top:15px;
}

A vous de modifier le nombre selon l'espace que vous voulez.

N'oubliez pas de Valider

Pour avoir des codes couleurs rendez vous sur le tuto de Mao : [url=/forumactif-f51/pour-mettre-un-peu-de-couleur-aux-forumsd-t11664.htm]Ici[/url]

Et oui c'est déjà fini x), j'espère que se tutoriel vous aura aider.

Si vous voyez des fautes ( doit y en avoir :o) et si vous avez des questions n'hésiter pas :).

merci

tres beau

C'est super, simple et sans toucher aux templates. Merci, c'est super bien expliqué en plus ! =D

Merci, bien expliqué pour un résultat très satisfaisant !

C'est sublime merci