Creer une jolie barre de navigation.

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

Résolu Creer une jolie barre de navigation.

Message par Pablo. le Jeu 16 Juin 2016 - 18:30

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Toujours.
Lien du forum : http://lsrp-fr.fr1.co/?tt=1

Description du problème

Bonsoir,

Je chercher èa creer une navbar pareil à celle que l'on peut retrouver sur ce forum ici: https://gyazo.com/03d3b24f3ed5a925ea81b63cf1dceda1

Je voudrais pouvoir mettre un fond bleu qui fait tout la largeur du forum ainsi que si possible pouvoir regler tout les boutons pareil a celui-ci si possible, merci à vous!


Dernière édition par Pablo. le Sam 18 Juin 2016 - 0:04, édité 1 fois

Pablo.
Nouveau membre

Messages : 25
Inscrit(e) le : 16/06/2016

http://lsrp-fr.fr1.co/?tt=1
Pablo. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Creer une jolie barre de navigation.

Message par tupac le Ven 17 Juin 2016 - 6:04

Bonjour Pablo,

Pour commencer il nous faut afficher seulement les liens dans la barre de navigation , faite comme ceci.
Panneau de config => Affichage => En-tête et navigation => Afficher seulement des images dans la barre des liens : OUI

Puis placer ceci dans votre feuille de style css , je pense que vous connaissez le chemin.

Spoiler:
Code:
/* barre de navigation  */

a.mainmenu {
  font-size:13px;            /* grosseur des lettres */
  font-weight:bold;          /* lien en gras */
  font-family: 'Segoe Print', sans-serif;      /* police du lien */
  letter-spacing:-1px;      /* espace entre chaque lettre */
  color:#ffffff;                /* couleur du lien */


.barre_nav {
  background-color: #1976D2;        /* couleur de fond */
  position: fixed;      /* fixe la barre a l'écran ou mettre absolute a la place de fixed pour la voir défiler */
  top: 0px;
  left: 0px;
  width: 100%;
  height: 50px;      /* hauteur de la barre */
  z-index: 999;      /* pour que l'élément s'affiche au dessus des autres */
}

/* texte au survol */
.navig a:hover{ color: #cccccc; }      /* couleur du lien au survol */


Pour finir une petite modif dans la template Overall-header.

Repérer cette partie.
Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
   <tr>
      <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
   </tr>
</table>
Remplacez la par celle-ci.
Code:
<table cellspacing="0" cellpadding="0" border="0" align="center" class="barre_nav">
   <tr>
      <td><div class="navig" align="{MENU_POSITION}">{GENERATED_NAV_BAR}</div></td>
   </tr>
</table>

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Creer une jolie barre de navigation.

Message par Pablo. le Ven 17 Juin 2016 - 20:48

Est il possible de laisser la Barre de navigation en haut du forum sans qu'elle bouge quand je descend la page avec la mollette ?

Pablo.
Nouveau membre

Messages : 25
Inscrit(e) le : 16/06/2016

http://lsrp-fr.fr1.co/?tt=1
Pablo. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Creer une jolie barre de navigation.

Message par tupac le Ven 17 Juin 2016 - 23:00

Bonsoir Pablo,

Dans votre CSS vous avez ceci.

Code:
position: fixed;      /* fixe la barre a l'écran ou mettre absolute a la place de fixed pour la voir défiler */

fixed pour fixer la barre.
absolute pour quelle défile avec le forum.

tupac
+ Hyperactif +

Masculin
Messages : 2334
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Creer une jolie barre de navigation.

Message par Pablo. le Sam 18 Juin 2016 - 0:03

Merci à toi, RÉSOLU!

Pablo.
Nouveau membre

Messages : 25
Inscrit(e) le : 16/06/2016

http://lsrp-fr.fr1.co/?tt=1
Pablo. 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