1 Barre de navigation style vista 28/3/2010, 00:54
Synchro
(Membre)
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:
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 :
Vous modifier avec votre image de fond
Vous validez le CSS
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