La barre de navigation au niveau de la toolbar

par Keskispas Ven 4 Nov - 20: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.

par MlleAlys Mar 8 Nov - 18: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.

par Keskispas Mar 8 Nov - 21: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.

par MlleAlys Mar 8 Nov - 23: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 ?

par Keskispas Mer 9 Nov - 22: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é

La barre de navigation au niveau de la toolbar Forum_10

La barre de navigation au niveau de la toolbar Forum_10

Merci d'avance.

par MlleAlys Jeu 10 Nov - 12: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; }

par Keskispas Jeu 10 Nov - 20: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

par MlleAlys Jeu 10 Nov - 20:48

Le code n'est effectivement pas prioritaire, corrigez ainsi :

Code:: #fa_toolbar { z-index: 998 !important; }

par Keskispas Jeu 10 Nov - 22: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.

par MlleAlys Ven 11 Nov - 12: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

.

par Keskispas Ven 11 Nov - 17: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.

La barre de navigation au niveau de la toolbar