Centrer la partie "Navigation" de la Toolbar

[Yonali]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, 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 : 5/04/16 => Mise en place de la Toolbar et Modification de celle ci
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour !

J'aimerais quelques conseils et avis.
J'ai installé la toolbar sur mon forum et tenté de la fusionner avec la barre de navigation. Jusque là, pas de soucis.
Seulement, je n'arrive pas à mettre au centre la partie des liens de menus, la navigation (accueil, membre, messages, etc).
Je souhaiterais à gauche qu'il y ait les copyrights et la fonction recherche, à droite la partie connexion, et au centre, la partie navigation. Est-ce possible ?

Vous vous aider, voici les CSS de la TB :

Code:

#menutest a {
  color : #594231!important;
  font-size : 12px;
  font-weight:500;
  }

#menutest a:hover {
  color : #594231!important;
  text-shadow: 2px 1px 2px #ffffff;
  font-size : 12px;
  }

#menutest {
  color: white!important;
  font-family : Tahoma!important;
  font-size : 18px!important;
  text-transform : uppercase!important;
  padding: 0px 3px 4px 3px;
  text-align : center!important;
  position : center!important;
  width : 100%!important;
  margin-left : auto; margin-right : auto;
  }



#fa_toolbar {      top : 0; left : 0px;  border-radius: 0px 0px 0px 0px;
  border-bottom : #7B5C46 1px double;
  border-top : none;
  box-shadow: 0 1px 1px black inset, 0 0 2px black;
  background-attachment:fixed; 
  -webkit-background-size: 20px 20px;
  -moz-background-size: 20px 20px;
  height : 26px!important;
  background-size: 20px 20px; background-color :#d6a268!important; background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));!important}

    .fa_avatar {
      width: 25px;
      height: 25px;
      position: relative;
      top: -3px;
      margin-right: 5px;
      border-radius: 3px;
      margin-bottom: -10px;
    }


    #fa_search  #fa_textarea {
        width:150px!important;
    height : 20px!important;
  padding-top : 2px!important; }


Et voilà le code Javascript a propos de la Toolbar :

Code:

$(function(){$(function(){
                   
                    $('#fa_search').after('<div class="fa_tbMainElement"><div id="menutest"><center><a href="/">Accueil</a>
        <a href="/memberlist">Membres</a>
        <a href="/privmsg?folder=inbox">Messages</a>
        <a href="/profile?mode=editprofile">Profil</a></center></div></div>');   
                  })});


    $(function(){$(function(){
      $('#fa_welcome').text('Bonjoir ' + _userdata.username + ' !');
    })});


    $(function () {
        $(window).load(function () {
            var av = $('#fa_usermenu img:eq(0)').attr('src');
            $('#fa_welcome').prepend('<img src="' + av + '" class="fa_avatar" />');
        });
    });

[Yonali]

Petit up.
Quelqu'un sait si c'est possible ?

[Yonali]

Petit Up post week end !

[teteaclaqueFR]

Je poste pour voir le lien du forum et peut-être vous trouver une solution.

EDITION : Mes compétences en HTML/CSS ne sont pas assez développées pour t'aider dans votre problème, désolé.

[Yonali]

Merci quand même d'avoir jeté un oeil =)


Je cherche toujours, si quelqu'un a une proposition ou un idée !

[Invité]

Bonjour je suis pas spécialement doué mais j'ai peut-être une idée

J'ai quand même une question avant pourquoi ne pas avoir pris la barre de navigation de base plutôt que d'en créer une?
Sinon pour le code javascript on pourrait mettre ceci:

Code:

$(function(){$(function(){
                 
                    $('#fa_search').after('<div class="fa_tbMainElement"><div id="menutest"><a href="/">Accueil</a>&nbsp;
        <a href="/memberlist">Membres</a>&nbsp;
        <a href="/privmsg?folder=inbox">Messages</a>&nbsp;
        <a href="/profile?mode=editprofile">Profil</a>&nbsp;</div></div>'); 
                  })});
 
 
    $(function(){$(function(){
      $('#fa_welcome').text('Bonjoir ' + _userdata.username + ' !');
    })});
 
 
    $(function () {
        $(window).load(function () {
            var av = $('#fa_usermenu img:eq(0)').attr('src');
            $('#fa_welcome').prepend('<img src="' + av + '" class="fa_avatar" />');
        });
    });

J'ai rajouté des espaces entre les liens et mis la balise center à la poubelle.
Le css en théorie ça devrait être ceci pur l'id #menutest:

Code:

position: relative;
left: 50%;

[Yonali]

Bonjour !!

Merci pour ta réponse et ta proposition ! En insérant ton code j'obtiens quelque chose comme ça :

En jonglant un peu avec le pourcentage, je devrais pouvoir trouver comment le centrer.

Sinon pour répondre à ta question :

J'ai quand même une question avant pourquoi ne pas avoir pris la barre de navigation de base plutôt que d'en créer une?

Je n'ai pas réussi comment faire pour mettre la barre de navigation ( {navbar} il me semble) dans la Toolbar que propose forumactif (et j'aime bien les fonctionnalités de la toolbar, avec les notifications et tout ^^)
Mais si tu sais comment insérer la Barre de Navigation dans la Tool Bar, je suis preneuse !! =)

[◦Jay◦]

Bonsoir Yonali, vous pouvez vous aider de ce tutoriel.

Bien à vous.

[Yonali]

Bonsoir Yonali, vous pouvez vous aider de ce tutoriel.

Bien à vous.

Bonsoir, merci du temps pris pour me répondre, mais ce n'est pas ce que je souhaite. J'avais utilisé ce tuto avant pour mettre ma barre de navigation au dessus du forum, mais je souhaitais profiter de la Toolbar forumactif, que je trouve vraiment pratique, et, n'ayant pas réussi à fusionner les deux (mettre la Barre de Navigation dans la Toolbar), j'ai donc personnalisé le contenu de la Toolbar pour en faire une tool-barre de navigation, dont je souhaite centrer le menu principal.

L'astuce de Don Vito Corleone m'apporte une aide pour que j'adapte avec les pourcentages (mais il semblerait que je doive faire des tests pour trouver quelque chose qui aille à toutes les résolutions ! ^^)

[◦Jay◦]

Vous pouvez très bien mettre les deux en même temps ^^

[Yonali]

Dans ce cas ma barre de navigation n'est pas visible si j'ai la toolbar activée :/


Il n'y a pas moyen de centrer le contenu du milieu de la toolbar alors ?

[◦Jay◦]

Re, vous pouvez donc le faire, comme sur ce forum.

Pouvez-vous remettre votre toolbar et laisser votre barre de navigation comme elle est s'il vous plait ?

[Yonali]

Ah oui c'est quelque chose comme ça que je souhaiterais !

(Par contre, je ne sais pas si cela vous le fait aussi, moi ça me le fait sur Chrome ou FF, mais quand je veux cliquer sur les liens de la toolbar, comme le forumactif à gauche ou le connexion s'enregistrer à droite, si j'ai mas souris dessus ça ne clique pas, il faut que je descende au niveau du cadre rouge de ce screen pour que le lien marche :

Spoiler:

Un problème de margin ?)


J'ai réactivé ma barre de navigation telle que je l'aurai souhaité (avec des images en lien) et la toolbar est activée. C'est ce que vous voulez voir ?
Rappel du lien du forum : http://sonacofl.forumactif.org/
Besoin du CSS de la barre de navigation ? d'autre choses ?

[◦Jay◦]

En effet, cela pose un problème dont je ne m'étais pas aperçu !

Avez-vous essayé de faire comme R-max a indiqué dans ce sujet ?

[Invité]

bonsoir a vous

Avez-vous essayé de faire comme R-max a indiqué dans ce sujet ?

c'est cette information qui fait passé la nav bar par dessus la toolbar

Code:

z-index:20003 !important; /*ont le fait passé par dessus la toolbar*/

si vous reprenez le sujet que montre Jay , cette information est dedans

[◦Jay◦]

Hmmmmmm, oui, donc, ça ne va pas, c'est ce que j'ai fait mais cela cache les liens de la toolbar.

[Yonali]

Oui j'ai testé aussi et j'ai le même soucis que sur le forum test de Jay, les liens de la tool bar ne sont pas cliquables sur la surface principale (Gnééé, pas claire la phrase xD)

[Invité]

Hey ici,

Le z-index doit être appliqué sur la barre de navigation comme indiqué par R-max ainsi que sur les liens de la toolbar avec une position relative.

Code:

#menu {
position: absolute;
top: 0;
width: 100%;
z-index: 20003;
}
#fa_right {
position: relative;
z-index: 20004;
}

Bye

[◦Jay◦]

Bonjour Don Vito Corleone, j'avais déjà essayé et cela ne fonctionne pas.

[Invité]

Coucou Jay ah oki pardon Attention j'envoie la purée ^^' : (fallait juste ignorer le z-index sur la toolbar):

Code:

#menu {
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
#fa_right {
position: relative;
z-index: 2;
}

bisous

[◦Jay◦]

Non, ça ne peut pas fonctionner de cette manière.

[Invité]

C'est quoi ces yeux qui tournent c'est comment?!
Je m'excuse de vous contredire mais chez moi ça fonctionne

[◦Jay◦]

Pouvez-vous me montrer ?

[Invité]

Oui bien entendu http://mestests.forumactif.org/

[◦Jay◦]

En effet, merci pour Yonali, je dois faire une erreur quelque part, cela ne fonctionnait pas sur le miens.

[Invité]

Bah l'erreur c'est surtout de passer par la feuille de style css interne vu que (pour moi en tout cas) les z-index se remettent à 999 au lieu de 20002 20003 etc .. donc par la feuille de style css cela fonctionne en mettant seulement 1 et 2 et par les templates :

Code:

<style>
body {
overflow-x: hidden;
}
#menu {
position: absolute;
top: 0;
width: 100%;
z-index: 20003;
}
#fa_right {
position: relative;
z-index: 20004;
}
  </style>

Donc de rien... et ouais ma biche le saucisson ça pousse pas aux arbres
Bye

[Invité]

bonsoir a tous
pour information >>
don vito pour que le z-index passe et reste a + de 999 dans le css , rajoute (important) et il devrait rester ainsi..et ne plus se modifier ...

Code:

z-index:20003 !important; /*ont le fait passé par dessus la toolbar*/

avez vous réussi a installer cette barre maintenant ?

[Yonali]

Bonjour à tous !
Merci à tous d'essayer de m'aider !

Désolée pour le délai de réponses, week end chargé !

Alors j'ai suivi les indications du topic "Intégrer la barre de navigation dans la toolbar". J'ai un peu adapté le CSS, je ne pense pas avoir touché à autre chose.

Par contre, j'ai un soucis, si je descend, scroll, la barre de navigation disparait (c'est sans doute le "relative" qui fait ça), et si je la mets en fixed elle n'apparait pas (car du coup, le z-index n'est plus pris en compte, c'est ça ?)
Auriez vous une solution ? :/

[Invité]

il faut mettre le #navig en fixed et le top a 0px et jouer avec un left en % pour la centrer

Code:

#navig {
    position: fixed;
    left: 40%;
    top: 0px;
    z-index: 20003!important;
}

[Yonali]

En effet, je peux faire ça.

Impossible de la centrer du coup ? C'est vraiment dommage... (J'ai testé avec Width 100% et les Margin auto, mais du coup les liens de la toolbar (barre de recherche à gauche et connexion s'enregistrer à droite, notifications) sont inaccessibles :/)
Ça revient un peu au soucis que j'avais initialement, même si je suis parvenue grâce à votre aide à tous à un meilleur résultat esthétique et fonctionnel ! ^^