[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 :).

J'ai fouiller les template mais aucun n'a la classe "mainmenu", et aucun template correspond au profil apparemment donc non pas de nouvelle désoler ^^.

Merci Sui' mais après avoir écrit toutes à la main sa ne marche pas,regarde mon CSS:

Spoiler:

Ta encore les images ?

Quels images ?

Bon j'ai test ton css il marche très bien sa doit venir d'un code dedans ou bien tu as oublier de faire une étape dans le tuto, réessaye le si sa marche pas c'est que sa vient de ton css mais je vois pas ou.

Par contre c'est fou comment ton forum est bourré de code XD

Merci pour ce code, et ce guidage total qui permet de ne vraiment pas se planter :p. En effet, la facilité était au rendez-vous .

http://d3.e-loader.net/StcNtnt5qo.png

Merci du tuto
J'aimerais savoir comment je fait pour qu'ils soit centrer ?
Certains titres comme Accueil touche le bord ^^

Merci pour l'astuce et de la partager :)

merci pour tout les astuces

Merci !

Effet bien sympathique ! Merci =)

Merci pour cette belle barre de navigation ♥

Merci !

Bonjour dans le cas du thème que vous avez créé "Paradoxe" existe t il un code pour agrandir un peu la taille de la barre de navigation,ça peut paraître idiot mais je suis archi nulle en codage
Merci d'avance!

dolce vero a écrit:Bonjour dans le cas du thème que vous avez créé "Paradoxe" existe t il un code pour agrandir un peu la taille de la barre de navigation,ça peut paraître idiot mais je suis archi nulle en codage
Merci d'avance!

Salut,

Pour les questions, c'est par ici : https://www.never-utopia.com/f52-avec-un-tutoriel
Il faut créer un sujet. Ca sera plus facile à suivre et plus adapté :)
Pense à nous donner le lien du thème, celui de ton forum etc.

Merci Neva j'ai fait ça  

Merci ^^

Merciii :3

merci

Merci ヽ(*・ω・)ﾉ

Merci !

Merci du tuto, c'est cool !

Merci

Merci pour ces codes <3