Forum RPG Fairy Tail - 20 Lignes ( soit 360 mots ) Minimum demandées - Bon Roleplayers exigés
 

Partagez | 
 

 Tuto : Barre de Navigation en Haut [CSS&Template]

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage

avatar
☁--Invité--☁

Invité
Click ♥
MessageSujet: Tuto : Barre de Navigation en Haut [CSS&Template]   Jeu 3 Nov - 18:43

BARRE DE NAVIGATION EN HAUT
~ Ou Quant le CSS Devient Dieu ~
    Bonjour à vous.

    Alors voilà, j'ai cru remarquer que c'est devenu, comment dire, à la mode de mettre sa barre de navigation au-dessus de sa bannière. J'avoue avoir, moi aussi, éprouvé le désir de bidouiller cette partie de mon forum...Aussi, et bien, permettez que je mette en commun l'astuce que j'ai trouvé.
    J'ignore si quelqu'un d'autre la connaît, ou l'a déjà vu. J'avoue apprendre le code en faisant des tonnes d'essais, et en bidouillant...Donc bon, si ça se trouve, quelqu'un à déjà proposer cette technique sur la toile.

    Dans tout les cas, au final, vous devriez obtenir un moyen facile de gérer la position de votre barre de navigation, la mise en place d'un fond et d'un cadre, et toute autre personnalisation imaginable...et cela, en rajoutant une seule et unique chose dans le monstre nommé "Template".
    Une seule chose...Oui...Car tout le reste se fait via la fiche de CSS. Ainsi, s'est une façon plus rapide et simple...car si on veut annuler les modifs, il suffit de changer juste le CSS et ça roule. ^^

    Bon, entrons dans le vif du sujet.

    Tout d'abord, ouvrez le monstre. Le template dans lequel se trouve la gestion de la barre de navigation. Ce-dernier est le "overall_header".
    Là, comme je l'ai expliqué à Leck Demonis dans son sujet d'appel à l'aide, vous cherchez cette partie du template :

    Code:
    <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
                  <tr>
                      <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
                  </tr>
                </table>
    Pour rechercher de façon rapide, utilisé le raccourcis Firefox Ctrl+F. Il ouvre une petite barre dans laquelle vous pouvez entrer du texte. Entrez cette partielle du code...ça sera plus rapide et facile pour vous ^^.

    Bon, maintenant, vous aller rajouter un tout pitit truc.
    En fait, dans le vous allez rajouter une fonction class="navipose".
    Bon, je l'ai appelé "navipose" pour "navigation position"...Mais vous pouvez lui donner le nom que vous voulez. ^^
    Dans tout les cas, vous devriez avoir ceci désormais :

    Code:
    <table class="navipose" cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
                  <tr>
                      <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
                  </tr>
                </table>
    A présent, c'est simple. Validé et surtout : publié votre template.
    Puis, on file droit dans Couleur >> Feuille de CSS !

    Là, vous aller ajouter une nouvelle partie de code.
    Le code devra avoir cette apparence :

    Code:
    .navipose td {
    Votre code CSS;
    }
    Bon, si vous avez nommé votre class autrement que navipose, mettez le même nom ici ! Ne vous trompez pas ^^

    Après : que faire ?
    Simple, après, on utilise le CSS.
    Pour mettre votre barre en haut, usez des fonctions "right" et "top" en les mettant toutes deux à 0% -_^

    Ensuite, votre imagination est la seule limite.
    Si vous avez des ennuis avec les balises de base du CSS, je vous conseille la Liste des propriétés du CSS du Site du Zéro ! ^^

    Sur ce, j'espère que ceci vous aura aider ! ^^
    Si vous désirez des exemples, pas de blem' ! Dîtes-le, et je rajouterais des screen's ^^

    Exemple

    Code:
    /*Barre de Navigation*/
    .navipose td {position: fixed;
    top: 0%;
    right:0%;
    height: 32px;
    width: 100%;
    background: #D3DAF0;
    border: 1px solid #275ba6;}
    Avec le code d'au-dessus, on obtient quelque chose comme ça :
    Spoiler:
     
    C'est vraiment tout basique...par contre, ça modifie uniquement la barre. Je veux dire, les effets que vous voyez sur le screen, sur les boutons en eux-même...ce n'est pas ce CSS mais un autre ^^'

    Sur ce, bonne journée à vous ! Et bon courage ^^
    Oh, si vous avez des questions : n'hésitez pas ^^
Revenir en haut Aller en bas

avatar
☁--Ryuu Kurohiryuu--☁


Féminin
Messages : 916
Jewels : 108068
Date d'inscription : 01/08/2011
Age : 24


Look Me ♥️
Clique ici
Clique ici aussi
Je suis belle ♥️
Clique ici (:
Clique ici
Click ♥
MessageSujet: Re: Tuto : Barre de Navigation en Haut [CSS&Template]   Jeu 3 Nov - 19:20

Et 40 points pour ton clan, Beau gosse Wink





Thème Song Of Loo





Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://hell-heaven.forumgratuit.org/
 

Tuto : Barre de Navigation en Haut [CSS&Template]

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: Tutoriels De Codages-
Sauter vers:  

Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit