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

[ ↓ ]

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

Milouze14


Fondateur

Milouze14

Message posté: le Sam 1 Sep 2012 - 9:27
coucou ,
Comment installer deux barres de navigation en mettant les boutons
pour les invités en haut et le reste dans la deuxième barre.

Il faut tout d'abord voir les autorisations de chaque boutons dans le P.A:



Affichage/Page d'accueil/En-tête & Navigation/Barre de navigation

Le tutoriel présent est basé sur l'affichage relatif aux autorisations et au images présentes.

La barre du haut sera donc seulement pour les invités et une deuxième barre viendra
se greffer pour les membres.


L'aperçu et le lien des boutons:


https://i36.servimg.com/u/f36/11/26/21/37/forum10.png



https://i36.servimg.com/u/f36/11/26/21/37/portai10.png



https://i36.servimg.com/u/f36/11/26/21/37/calend10.png



https://i36.servimg.com/u/f36/11/26/21/37/faq11.png



https://i36.servimg.com/u/f36/11/26/21/37/recher10.png



https://i36.servimg.com/u/f36/11/26/21/37/membre10.png



https://i36.servimg.com/u/f36/11/26/21/37/groupe10.png



https://i36.servimg.com/u/f36/11/26/21/37/profil13.png



https://i36.servimg.com/u/f36/11/26/21/37/mp10.png



https://i36.servimg.com/u/f36/11/26/21/37/mpnew10.png



https://i36.servimg.com/u/f36/11/26/21/37/connex10.png



https://i36.servimg.com/u/f36/11/26/21/37/deconn10.png



https://i36.servimg.com/u/f36/11/26/21/37/enregi10.png







Affichage/Templates/Général/ overall_header
Recherchez ceci:


Code:

<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>


Remplacez par ceci:
Code:

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

Pensez à enregistrer puis à valider en cliquant respectivement sur Enregistr puis Ajout

On donnera ensuite la position et l'apparence dans la feuille de style.



Pour avoir cet aperçu:






La class .M14_barre_nav devra être:
Code:

.M14_barre_nav
{
position:absolute;
left:27%;
height:80 px;
width:700 px;
}


Pour coller la barre en haut du forum:

L'aperçu:





Ben on voit plus le logo .

Pas de soucis les ami(e)s, on va le déplacer dans la feuille de style:

La barre à une hauteur de 80px (height:80px;)

Pour le logo:
Code:

#i_logo {margin-top:80px;}



La class .M14_barre_nav devra être:
Code:

.M14_barre_nav
{
position:absolute;
top:0;
left:27%;
height:80 px;
width:700 px;
}


c'est déjà mieux ainsi

Le résultat:






On voit en haut de page une marge pas très chouette, on va la supprimer
en mettant le body à 0px


Code:

body {margin-top:0px;}

Et hop, elle n'est plus là .

L'aperçu:






Les boutons "MP et Nouveau MP" "Connexion et Déconnexion" seront placés au même endroit.
On donne des coins arrondis aux images en insérant dans chaque class ceci:
Code:

-webkit-border-radius: 6px;
border-radius: 6px;

On donne un effet de décalage au survol de chaque bouton en
insérant ceci:
pour la barre du haut
Code:
{top:5px;}

pour la deuxième barre:
Code:
{top:50px;}



On file dans la feuille de style pour appliquer tout ça:

Dans la feuille de style:

Affichage/Images et Couleurs/Couleurs/Feuille de style


Code:


#i_logo {margin-top:80px;}
body {margin-top:0px;}

.M14_barre_nav
{
position:absolute;
top:0;
left:27%;
height:80 px;
width:700 px;
}

/*Première barre*/
#i_icon_mini_index:hover, #i_icon_mini_portal:hover, #i_icon_mini_calendar:hover , #i_icon_mini_faq:hover 
, #i_icon_mini_logout:hover , #i_icon_mini_login:hover
{top:5px;}
/*deuxième barre*/
#i_icon_mini_search:hover , #i_icon_mini_members:hover , #i_icon_mini_groups:hover , #i_icon_mini_profile:hover ,
#i_icon_mini_message:hover ,#i_icon_mini_new_message:hover ,#i_icon_mini_register:hover
{top:50px;}

#i_icon_mini_index
{
position:absolute;
top:2px;
left:5px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

#i_icon_mini_portal
{
position:absolute;
top:2px;
left:115px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
#i_icon_mini_calendar
{
position:absolute;
top:2px;
left:225px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
#i_icon_mini_faq
{
position:absolute;
top:2px;
left:335px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

#i_icon_mini_logout , #i_icon_mini_login
{
position:absolute;
top:2px;
left:445px;
-webkit-border-radius: 6px;
border-radius: 6px;
}


#i_icon_mini_search , #i_icon_mini_register
{
position:absolute;
top:45px;
left:5px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
#i_icon_mini_members
{
position:absolute;
top:45px;
left:115px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
#i_icon_mini_groups
{
position:absolute;
top:45px;
left:225px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
#i_icon_mini_profile
{
position:absolute;
top:45px;
left:335px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
#i_icon_mini_message , #i_icon_mini_new_message
{
position:absolute;
top:45px;
left:445px;
-webkit-border-radius: 6px;
border-radius: 6px;
}


Pensez bien à valider les modifications en cliquant sur le bouton Valid

Voilà, c'est tout pour le moment clin oeil .





Fondateur des forums Milouze14

- Contact par MP -



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

[ ↑ ]

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

  
  • © PunBB | Signaler un abus