Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    [CSS] Barre de navigation

    Partagez
    MasculinAge : 24Message(s) : 1865
    Sui'
    le Ven 25 Juin 2010 - 23:08
    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 Wink.

    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 : Ici

    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 beaucoup Woo pour ce kit *-*

    Sui' Art's
    MasculinAge : 31Message(s) : 31655

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Ven 25 Juin 2010 - 23:58
    Ah parfait, j'allais le faire justement, depuis le temps que j'en avais parlé... mais du coup c'est bon Razz Par contre je réfléchissais à la section la plus appropriée entre ici et les codes à personnaliser... T'en penses quoi ?


    MasculinAge : 24Message(s) : 1865
    Sui'
    le Sam 26 Juin 2010 - 5:18
    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 beaucoup Woo pour ce kit *-*

    Sui' Art's
    FémininAge : 17Message(s) : 103
    Edwin
    le Jeu 8 Juil 2010 - 16:20
    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
    MasculinAge : 24Message(s) : 1865
    Sui'
    le Jeu 8 Juil 2010 - 16:24
    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?


    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    FémininAge : 17Message(s) : 103
    Edwin
    le Jeu 8 Juil 2010 - 19:26
    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
    MasculinAge : 24Message(s) : 1865
    Sui'
    le Jeu 8 Juil 2010 - 19:31
    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?


    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    Age : 24Message(s) : 76
    Mitsuomi Takayanagi
    le Ven 9 Juil 2010 - 12:03
    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?


    FémininAge : 17Message(s) : 103
    Edwin
    le Ven 9 Juil 2010 - 14:23
    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?
    MasculinAge : 28Message(s) : 1447
    TheLoneSpirit
    le Sam 10 Juil 2010 - 12:49
    Question : Comment obtiens t-on les forme tel que ceux de l'aperçu que tu as donné ? ^^'




    -- L'important n'est pas d'être fort...mais de se sentir fort. --
    MasculinAge : 24Message(s) : 1865
    Sui'
    le Dim 11 Juil 2010 - 10:03
    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).


    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    Age : 24Message(s) : 76
    Mitsuomi Takayanagi
    le Dim 11 Juil 2010 - 22:22
    @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!


    Dernière édition par Mitsuomi Takayanagi le Ven 23 Juil 2010 - 10:55, édité 1 fois


    FémininAge : 22Message(s) : 9733

    Les Guildes
    Guilde des Conteurs:
    4/10  (4/10)
    Guilde des Illusionnistes:
    2/10  (2/10)
    Guilde des Architectes:
    10/20  (10/20)
    Halloween
    le Ven 23 Juil 2010 - 10:34
    Merci c'est super Wink


    Je mets les voiles, que le vent te soit favorable matelot !
    MasculinAge : 31Message(s) : 31655

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Ven 23 Juil 2010 - 12:42
    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^^


    MasculinAge : 21Message(s) : 1686

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Pti' Biscuit
    le Sam 31 Juil 2010 - 15:12
    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 ?




    ~ Canonnier of Calypso ~
    MasculinAge : 24Message(s) : 1865
    Sui'
    le Sam 31 Juil 2010 - 18:19
    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 Wink.


    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    MasculinAge : 21Message(s) : 1686

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Pti' Biscuit
    le Sam 31 Juil 2010 - 18:47
    tu pourrais me donner les codes stp ^^
    et ou rajouter les codes stp ^^" ?




    ~ Canonnier of Calypso ~
    MasculinAge : 24Message(s) : 1865
    Sui'
    le Sam 31 Juil 2010 - 19:20
    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 Wink.


    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    MasculinAge : 21Message(s) : 1686

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Pti' Biscuit
    le Sam 31 Juil 2010 - 19:23
    merci beaucoup a toi




    ~ Canonnier of Calypso ~
    MasculinAge : 21Message(s) : 1686

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Pti' Biscuit
    le Sam 31 Juil 2010 - 19:30
    désoler du double post mais sa me fait sa ^^ :
    Spoiler:





    ~ Canonnier of Calypso ~
    MasculinAge : 24Message(s) : 1865
    Sui'
    le Sam 31 Juil 2010 - 23:22
    Ta modifier le "1px" par 5 par exemple? car moi sa marche.


    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    MasculinAge : 21Message(s) : 1686

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Pti' Biscuit
    le Dim 1 Aoû 2010 - 11:47
    sa c'est changer en arrondi mais sa apparait que quand ma souris viens dessus ^^"




    ~ Canonnier of Calypso ~
    MasculinAge : 24Message(s) : 1865
    Sui'
    le Dim 1 Aoû 2010 - 12:04
    Envoi ta partie de css pour la barre de navigation s'il te plait ^^.


    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    MasculinAge : 21Message(s) : 1686

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Pti' Biscuit
    le Dim 1 Aoû 2010 - 12:20
    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/




    ~ Canonnier of Calypso ~
    MasculinAge : 22Message(s) : 436
    Kuro'
    le Jeu 26 Aoû 2010 - 2:50
    Toujours pas de nouvelles pour le profil ? ^^'

    Merci du tuto :)



    Merci Didi-senpai ! :)
    Contenu sponsorisé
    Aujourd'hui à 6:55

      La date/heure actuelle est Ven 30 Sep 2016 - 6:55