Barre de navigation style vista
SOS-FORUM.com
     

Derniers sujets

» ATLANTIC CITY - rpg city
par Solitude 15/3/2017, 10:41

» Bonne Année 2015
par Chantra Chantrapa 5/3/2017, 20:31

» Rio de Janeiro
par Solitude 14/9/2015, 15:34

» Bon Anniversaire Zeco
par Laurent 29/5/2015, 06:29

» Plateforme d'affiliation Afflight
par Landry85 5/5/2015, 10:04


Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

Voir le sujet précédent Voir le sujet suivant Aller en bas  Message [Page 1 sur 1]

1 Barre de navigation style vista le 28/3/2010, 00:54

avatar
Synchro
(Membre)
Voir le profil de l'utilisateur
Bonjour

Pour avoir une barre de navigation comme ceci :
DEMO

Vous souhaitez la mettre sur votre forum ?
> Panneau d'admin
> Affichage
> Templates
> Général
> Overall_header_new
> Vous chercher cette ligne {JAVAscript}
>et vous coller ceci en dessous:
Code:
<div id="header">
<ul id="nav">
   <li id="forum"><a href="#">forum</a></li>
   <li id="faq"><a href="#">faq</a></li>
   <li id="recherche"><a href="#">recherche</a></li>
   <li id="membres"><a href="#">membres</a></li>
   <li id="groupes"><a href="#">groupes</a></li>
   <li id="profil"><a href="#">profil</a></li>
   <li id="message"><a href="#">messages</a></li>
    <li id="on"><a href="#">connexion</a></li>
   <li id="off"><a href="#">deconnexion</a></li>
   <li id="enregistrer"><a href="#">enregistrer</a></li>
</ul>
</div>

Vous modifier avec vos liens.
Vous enregistrer et vous publier.


La partie CSS :
> Panneau d'admin
> Affichage
> Couleur
> Feuille de style CSS
> Vous ajoutez ce code :

Code:
#header { width: 1020px; height: 38px; margin: 18px auto; position: relative; z-index: 1; }
#header #nav { margin: 0; padding: 0; }
#header #nav li { display: inline; }
#header #nav li a { float: left; width: 102px; height: 0; padding-top: 38px; overflow: hidden; }
#header #nav li a,
#header { background-image: url(http://img5.hostingpics.net/pics/576743nav.png); _background-image: url(http://img5.hostingpics.net/pics/576743nav.png); background-repeat: no-repeat;}

#header #nav li#forum a { background-position: 0 0; }
#header #nav li#faq a { background-position: -102px 0; }
#header #nav li#recherche a { background-position: -204px 0; }
#header #nav li#membres a { background-position: -306px 0; }
#header #nav li#groupes a { background-position: -408px 0; }
#header #nav li#profil a { background-position: -510px 0; }
#header #nav li#message a { background-position: -612px 0; }
#header #nav li#on a { background-position: -714px 0; }
#header #nav li#off a { background-position: -816px 0; }
#header #nav li#enregistrer a { background-position: -918px 0; }

#header #nav li#forum a:hover { background-position: 0 -38px; }
#header #nav li#faq a:hover { background-position: -102px -38px; }
#header #nav li#recherche a:hover { background-position: -204px -38px; }
#header #nav li#membres a:hover { background-position: -306px -38px; }
#header #nav li#groupes a:hover { background-position: -408px -38px; }
#header #nav li#profil a:hover { background-position: -510px -38px; }
#header #nav li#message a:hover { background-position: -612px -38px; }
#header #nav li#on a:hover { background-position: -714px -38px; }
#header #nav li#off a:hover { background-position: -816px -38px; }
#header #nav li#enregistrer a:hover { background-position: -918px -38px; }

#header #nav li#forum a:active { background-position: 0 -76px; }
#header #nav li#faq a:active { background-position: -102px -76px; }
#header #nav li#recherche a:active { background-position: -204px -76px; }
#header #nav li#membres a:active { background-position: -306px -76px; }
#header #nav li#groupes a:active { background-position: -408px -76px; }
#header #nav li#profil a:active { background-position: -510px -76px; }
#header #nav li#message a:active { background-position: -612px -76px; }
#header #nav li#on a:active { background-position: -714px -76px; }
#header #nav li#off a:active { background-position: -816px -76px; }
#header #nav li#enregistrer a:active { background-position: -918px -76px; }

Vous modifier avec votre image de fond
Vous validez le CSS

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
Un grand bravo pour cette très jolie barre !
Et merci Smile

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

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

 
  •  

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