☁--Invité--☁
Invité Click ♥ |
| Sujet: 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 ^^ |
| | |
Click ♥ JournalStatistiques: Relations: Armes et Magies: |
| Sujet: Re: Tuto : Barre de Navigation en Haut [CSS&Template] Jeu 3 Nov - 19:20 | |
| Et 40 points pour ton clan, Beau gosse |
| | | | Tuto : Barre de Navigation en Haut [CSS&Template] | |
|
Page 1 sur 1 | |
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |