Mettre la barre de naviguation sur le côté

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 le Lun 25 Avr 2011 - 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 2011 - 15:51, édité 1 fois

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 le Mar 26 Avr 2011 - 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

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 le Mar 26 Avr 2011 - 15:26

merci j'essaie et je t'informe

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 le Mar 26 Avr 2011 - 18:14

Ok Smile

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


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