La barre de navigation au niveau de la toolbar

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

Résolu La barre de navigation au niveau de la toolbar

Message par Keskispas le Ven 4 Nov 2016 - 19:24

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://aide-aquariophilie.forumactif.com

Description du problème

Bonjour à tous,

j'aimerais placer la barre de navigation tout en haut du forum en fixe tout comme la toolbar sur une seule ligne.

Pour cela j'ai rendu la toolbar transparente avec ce code
Code:
  }
    #fa_toolbar {
        background-color: transparent !important;  /*  toolbar transparente !!!!!!!!!!!!!!!!!! */
    }

Et pour avoir la barre de navigation en haut du forum, j'ai enlevé ce code dans overall_header
Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
              <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
              </tr>
            </table>

Et j'ai placé apres ceci
Code:
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

ma nouvelle barre
Code:
<div id="navigation"><div id="navig">{GENERATED_NAV_BAR}</div></div>


Et dans le CSS j'ai placé ceci
Code:
 #navig
    {
      width: 1800px;
      margin: auto;
      text-align: center;
    }
    #navigation
    {
      position: fixed;
      z-index: 999;
      width: 100%;
    top:5;

Mais le problème c'est que si je place ma barre plus haut, donc si je diminue la valeur "top;5;"
la barre de navigation se retrouve bien dans la toolbar, mais les lien de cette barre ne sont plus fonctionnels.

Pouvez vous m'aider?

Merci d'avance.


Dernière édition par Keskispas le Ven 11 Nov 2016 - 16:57, édité 1 fois
avatar

Keskispas
****

Masculin
Messages : 458
Inscrit(e) le : 01/05/2009

http://aide-aquariophilie.forumactif.com
Keskispas a été remercié(e) par l'auteur de ce sujet.

Résolu Re: La barre de navigation au niveau de la toolbar

Message par MlleAlys le Mar 8 Nov 2016 - 17:49

Bonjour,
Remplacez votre css par celui-ci :
Code:
#navigation {
  text-align: center;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 200px;
  right: 200px;
}

La largeur s'adaptera en lassant 200px à gauche et 200px à droite de façon à pouvoir toujours accéder aux liens.
avatar

MlleAlys
Membre actif

Messages : 4624
Inscrit(e) le : 12/09/2012

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

Résolu Re: La barre de navigation au niveau de la toolbar

Message par Keskispas le Mar 8 Nov 2016 - 20:08

Bonsoir MlleAlys,

Merci beaucoup, c'est génial, la barre de navigation est bien là au je voulais !!

Mais .... les liens de ma barre de navigation ne sont plus actifs. certainement parce qu'ils sont sous la toolbar, vu que les liens de la toolbar sont eux actifs.
Il y a une solution à cela??

Merci d'avance.
avatar

Keskispas
****

Masculin
Messages : 458
Inscrit(e) le : 01/05/2009

http://aide-aquariophilie.forumactif.com
Keskispas a été remercié(e) par l'auteur de ce sujet.

Résolu Re: La barre de navigation au niveau de la toolbar

Message par MlleAlys le Mar 8 Nov 2016 - 22:01

pourriez vous laisser le code le temps de visualiser le problème, et ajouter une capture de la barre quand vous êtes connectés ?
avatar

MlleAlys
Membre actif

Messages : 4624
Inscrit(e) le : 12/09/2012

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

Résolu Re: La barre de navigation au niveau de la toolbar

Message par Keskispas le Mer 9 Nov 2016 - 21:43

Bonjour MlleAlys,

Voici le lien vers le forum test, le code est installé
http://testeurii.forumgratuit.be/

Et une copie d'écran quand je suis connecté



Merci d'avance.
avatar

Keskispas
****

Masculin
Messages : 458
Inscrit(e) le : 01/05/2009

http://aide-aquariophilie.forumactif.com
Keskispas a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: La barre de navigation au niveau de la toolbar

Message par MlleAlys le Jeu 10 Nov 2016 - 11:59

Ah j'avais mal compris le problème, j'ai lu trop vite, désolée ^^"
Ajoutez en plus le code css suivant :
Code:
#fa_toolbar {
  z-index: 998;
}
avatar

MlleAlys
Membre actif

Messages : 4624
Inscrit(e) le : 12/09/2012

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

Résolu Re: La barre de navigation au niveau de la toolbar

Message par Keskispas le Jeu 10 Nov 2016 - 19:25

Bonsoir,

Je viens d'installer ton code en plus de celui que j'avais.
Mais malheureusement je n'ai aucun lien de la barre de navigation qui fonctionne.

Désolé Crying or Very sad
avatar

Keskispas
****

Masculin
Messages : 458
Inscrit(e) le : 01/05/2009

http://aide-aquariophilie.forumactif.com
Keskispas a été remercié(e) par l'auteur de ce sujet.

Résolu Re: La barre de navigation au niveau de la toolbar

Message par MlleAlys le Jeu 10 Nov 2016 - 19:48

Le code n'est effectivement pas prioritaire, corrigez ainsi :
Code:
#fa_toolbar {
  z-index: 998 !important;
}
avatar

MlleAlys
Membre actif

Messages : 4624
Inscrit(e) le : 12/09/2012

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

Résolu Re: La barre de navigation au niveau de la toolbar

Message par Keskispas le Jeu 10 Nov 2016 - 21:12

MlleAlys a écrit:Le code n'est effectivement pas prioritaire, corrigez ainsi :
Code:
#fa_toolbar {
  z-index: 998 !important;
}

Re,

Un énorme Merci!! Cela fonctionne bien!
En quelques réponses tu m'as évité bien des arrachages de cheveux!! Vraiment tres sympa.

Mais pour me coucher moins bête, tu peux m'expliquer ton code?

Bonne fin de soirée et encore merci.
avatar

Keskispas
****

Masculin
Messages : 458
Inscrit(e) le : 01/05/2009

http://aide-aquariophilie.forumactif.com
Keskispas a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: La barre de navigation au niveau de la toolbar

Message par MlleAlys le Ven 11 Nov 2016 - 11:17

Lorsque des éléments sont positionnés de façon absolue ou fixe, on peut régler leur positionnement vertical (avec top ou bottom), horizontal (avec left ou right), et au dessus ou en dessous des autres éléments positionnés de la même façon (avec z-index).
Par défaut, si on a deux éléments positionnés de façon fixe ou absolue au même endroit, c'est l'élément qui arrive après dans le codage de la page est positionné au dessus.
Du coup, pour que la toolbar reste toujours au dessus des autres éléments du forums, un z-index très élevé lui est appliqué, et effectivement la barre de navigation se mettait en dessous.

Dans le premier code pour le positionnement de la barre de navigation, on a appliqué à celle-ci un z-index de 999. Le dernier code applique un z-index de 998 à la toolbar pour qu'elle s'affiche juste en dessous de la barre de navigation.

Si vous avez par la suite des problèmes d'éléments qui "passent par dessus" la toolbar quand on fait défiler la page, c'est donc vers la propriété css z-index qu'il faudra se tourner pour corriger Wink .
avatar

MlleAlys
Membre actif

Messages : 4624
Inscrit(e) le : 12/09/2012

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

Résolu Re: La barre de navigation au niveau de la toolbar

Message par Keskispas le Ven 11 Nov 2016 - 16:56

Bonjour,

Oui, expliqué de la sorte c'est clair.

Merci pour ce complément d'info et surtout pour votre convivialité.

Une très bonne fin de w-e.
J'édite le premier sujet et je place en résolu.
avatar

Keskispas
****

Masculin
Messages : 458
Inscrit(e) le : 01/05/2009

http://aide-aquariophilie.forumactif.com
Keskispas 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