Mettre la barre de naviguation sur le côté

2 participants

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

Résolu Mettre la barre de naviguation sur le côté

Message par Hemma Lun 25 Avr - 15:06

Bonjour/soir je voudrais ma barre de navigation sur le côté comme dans ce forum

Merci d'avance


Dernière édition par Hemma le Mar 26 Avr - 15:51, édité 1 fois
Hemma

Hemma
**

Féminin
Messages : 61
Inscrit(e) le : 25/11/2010

http://Fashion-Graph-World.forumgratuit.org
Hemma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre la barre de naviguation sur le côté

Message par EstoLouis Mar 26 Avr - 14:33

Salut Smile
Je vais t'aider, mais par contre elle ne sera pas coulissante, c'est grave ou pas ?

Bref,

1 - Direction Templates > overall_footer

2 - cherche
Code:
</body>

3- colle le code suivant au dessus de </body>
Code:
<div class="navigation">
<div class="cadre1">NAVIGATION</div>
<div  class="cadre2">
<a href="LIEN">TEXTE LIEN</a><br>
<a href="LIEN">TEXTE LIEN</a><br>
<a href="LIEN">TEXTE LIEN</a><br>
<a href="LIEN">TEXTE LIEN</a><br>
</div>
</div>
Remarque : Remplace LIEN par le lien de la page ou tu souhaites aller et TEXTELIEN par le texte qui s'affichera (ex : FAQ, Membres etc...)
Pour ajouter des boutons, tu n'a qu'a copier une ligne de ce genre et de la mettre a l'endroit voulu
Code:
<a href="LIEN">TEXTE LIEN</a><br>

4- Dans ton CSS, colle ce code :
Code:
.navigation{
position: fixed; /* position de boite, qui ne bougera pas */
top: 300px; /* position à partir du haut */
left: 10px; /* position à partir de la droite */
width: 170px; /* largueur de la boite */
background-color: #515151; /* couleur de fond */
padding: 8px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #ffffff;
}

.cadre1{
background-color: #000000; /* couleur de fond */
color:#ffffff; /* couleur de la police */
font-weight:bold; /* texte en gras */
font-size:11px; /* taille de la police */
text-align : center; /* alignement du texte */
padding: 6px;
margin-bottom: 5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
}

.cadre2{
background-color: #2e2e2e; /* couleur du fond */
color:#ffffff; /* couleur du texte */
text-align: justify; /* alignement du texte */
font-size:11px; /* taille du texte */
padding: 6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
}
Je te laisse modifier ca a ton gout Wink

Malheureusement, c'est pas encore fini xD

5- Direction Templates > Overall_header

6- Repère et efface. Publie sans faire d'apercu.
Code:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

Voila ca devrait etre bon....
Si tu as trop de mal, je peux le faire.
Je n'ai pas de forum de test, donc... Smile

Bizz
avatar

EstoLouis
**

Masculin
Messages : 64
Inscrit(e) le : 05/07/2009

http://kef-coding.keuf.net
EstoLouis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre la barre de naviguation sur le côté

Message par Hemma Mar 26 Avr - 15:26

merci j'essaie et je t'informe
Hemma

Hemma
**

Féminin
Messages : 61
Inscrit(e) le : 25/11/2010

http://Fashion-Graph-World.forumgratuit.org
Hemma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre la barre de naviguation sur le côté

Message par EstoLouis Mar 26 Avr - 18:14

Ok Smile
avatar

EstoLouis
**

Masculin
Messages : 64
Inscrit(e) le : 05/07/2009

http://kef-coding.keuf.net
EstoLouis a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

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