AccueilDernières imagesRechercherS'enregistrerConnexion

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.

-56%
Le deal à ne pas rater :
Ampli Home Cinema Denon AVR-X1700H à 349€
349 € 799 €
Voir le deal

    [CSS] Barre de navigation

    Sui'
    Sui'
    MasculinAge : 32Messages : 1865

    Ven 25 Juin 2010 - 23:08

    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 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 : [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 beaucoup Woo pour ce kit *-*
    [CSS] Barre de navigation - Page 3 657955SignatureSuicopie
    Sui' Art's
    itsizoh
    itsizoh
    MasculinAge : 28Messages : 13

    Mar 24 Jan 2017 - 14:50

    merci
    kaguya venusity
    kaguya venusity
    FémininAge : 29Messages : 99

    Mer 5 Avr 2017 - 4:02

    tres beau
    Nathouille
    Nathouille
    FémininAge : 33Messages : 70

    Sam 9 Déc 2017 - 11:02

    C'est super, simple et sans toucher aux templates. Merci, c'est super bien expliqué en plus ! =D
    Ena
    Ena
    FémininAge : 26Messages : 149

    Sam 14 Avr 2018 - 22:54

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



    [CSS] Barre de navigation - Page 3 Aero10
    [CSS] Barre de navigation - Page 3 390289enautopia
    Tatia38
    Tatia38
    FémininAge : 35Messages : 318

    Lun 21 Nov 2022 - 18:14

    C'est sublime merci
    Contenu sponsorisé


      La date/heure actuelle est Lun 2 Déc 2024 - 8:00