[CSS] Barre de navigation

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

Ah parfait, j'allais le faire justement, depuis le temps que j'en avais parlé... mais du coup c'est bon Par contre je réfléchissais à la section la plus appropriée entre ici et les codes à personnaliser... T'en penses quoi ?

Sa te fais un petit boulot en moins :p.

Ouais c'est vrai que je n'avais pas trop fais attention à section code à personnaliser à mon goût sa peut être soit dans celui-ci ou soit dans l'autre (la je t'aide pas hein xD).

C'toi le chef moi sa m'est égal ^^.

Merci à toi mais j'ai un petit problème qui est survenu, donc j'ai bien tout suivit en rajoutant les informations souhaitée et voilà le résultat:

Il s'agît de la taille réelle
La couleur violette au fond il s'agît de la couleur de mon forum

O_o trop bizard xD.

Peux tu me passer le lien vers ton forum d'essai ou tu as essayer le tuto s'il te plait?

Enfaite c'est pas sur un forum de test que je l'ai fait...
De toute façon je peut revenir en arrière mais j'aimerais tout de même avoir un aperçu .
Je te file le lien:
http://cloister-black.forum-actif.net/index.htm

Ok donc fait moi voir ton CSS s'il te plait ( j'aurais du te le demander avant désoler xD )

Et as tu bien vérifier le décochage de la case pour afficher les images?

Salut, super astuce, ça rend vraiment bien. Sinon pour le problème de Edwin, je crois savoir de quoi il s'agit. Essaies d'aller dans P.A. > affichage > entête et navigation, et là dans la rubrique "afficher seulement des images" tu met non. Ça devrait aller mieux.


P.S.: Moi je me posais une autre question, ton astuce change la barre de navigation principale(celle o il y a rechercher, accueil, etc...) ainsi que celle du profil(feuille de personnage, avatar, signature, etc...). Je me demandais s'il était possible de faire en sorte que seule la deuxième soit affectée par l'astuce?

Problème résolu ^^

Par contre, si tu sait comment faire, comment on fait pour que au passage de la souris il y ait une image?

Question : Comment obtiens t-on les forme tel que ceux de l'aperçu que tu as donné ? ^^'

Salut à vous et désoler du retard mais ces les vacances xD.

Mitsuomi Takayanagi: Alors tu viens de me faire remarquer que se code toucher aussi au profil merci xD. Par contre je pense que c'est possible oui mais comment je ne sais pas trop, peut-être faudrait-il trouver la class dans le template qui correspond au profil et modifier la class.

Je te dis sa car ces la seule chose que je vois au vue de mes connaissance donc j'ai que cet piste, si je ou tu trouve faisons partager :p.

Edwin: Pour remplacer en image la par contre sa semble moins faisable mais encore une fois j'ai ni tester ni rechercher, donc je préfère pas te dire oui et non puisque je sais pas.

TheLoneSpirit: Il te suffit de mettre sa:

Code:

        -moz-border-radius: 15px 0 15px 0;
        -webkit-border-radius: 15px 0 15px 0;
        border-radius: 15px 0 15px 0;   

Je t'explique j'ai mis 4 fois la valeur pour les arrondis la première correspond à l'arrondi en haut à gauche, ensuite la seconde en haut à droite et ainsi de suite.

moz permet au personne naviguant avec mozilla de voir les arrondis.
Webkit concerne ceux utilisant (si mes souvenir sont bon) Safari et Chrome.
Tu peux aussi mettre khtml-border-radius qui concerne un autre navigateur dont j'ai zappé le nom.

Voila désoler de mes réponse flou mais tout comme vous j'ai débuter il y à peu x).

Sui' a écrit:Mitsuomi Takayanagi: Alors tu viens de me faire remarquer que se code toucher aussi au profil merci xD. Par contre je pense que c'est possible oui mais comment je ne sais pas trop, peut-être faudrait-il trouver la class dans le template qui correspond au profil et modifier la class.

Je te dis sa car ces la seule chose que je vois au vue de mes connaissance donc j'ai que cet piste, si je ou tu trouve faisons partager :p.

De rien, et merci MDR. Je vais de ce pas tenter de trouver une solution, je te tiendrai au courant si j'en trouve. Have Fun!

Merci c'est super

Pour la question du Mitsuomi je pense qu'il faut plutôt attribuer une "class" différente à l'un ou l'autre (plutôt dans le profil du coup) afin de distinguer les deux et d'appliquer deux effets différents. Ca ne peut se faire que dans les templates, effectivement^^

Franchement sui' tu assure c'est bien éxpliquer et j'arrive à un bon résultat donc la preuve xD après pour mettre arrondi on a juste a ajouté ce code dans la fiche css ou il faut faire un remplacement ?

Y'a pas de quoi ^^.

Pour les arrondis tu ajoute le code au css:

Code:

a.mainmenu

et

Code:

a:hover.mainmenu

pense à mettre les arrondis compatible pour chrome et safari .

tu pourrais me donner les codes stp ^^
et ou rajouter les codes stp ^^" ?

Code:

a.mainmenu img {
display:none;
}

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

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

Je t'ai rajouter sa dans le code entier tu auras un arrondis de 1px à toi de modifier la valeur que tu veux.

Code:

        -moz-border-radius: 1px;
        -webkit-border-radius: 1px;
        khtml-border-radius: 1px;
        border-radius: 1px; 

Si veux un arrondis par exemple à droite en bas et seulement un autre en haut à gacuhe je les expliquer sur la première page à une autre personne à toi de faire les essais tout seul .

merci beaucoup a toi

désoler du double post mais sa me fait sa ^^ :

Spoiler:

Ta modifier le "1px" par 5 par exemple? car moi sa marche.

sa c'est changer en arrondi mais sa apparait que quand ma souris viens dessus ^^"

Envoi ta partie de css pour la barre de navigation s'il te plait ^^.

enfaite désoler de t'avoir déranger c'est que j'avais pas changer les couleurs ^^"
maintenant c'est bon c'est parfait merci a toi \o/

Toujours pas de nouvelles pour le profil ? ^^'

Merci du tuto :)