Centrer la partie "Navigation" de la Toolbar

[Yonali]

Rappel du premier message :

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" />');
        });
    });

[Invité]

Normalement ont c'est la centrer et passer c'est liens par dessus la barre.navigation.
Je regarde ce soir.

[◦Jay◦]

Bonjour Yonali, comme vous avez un petit problème, je me permet de repasser, j'avais abandonné ma première idée et je suis reparti sur la votre avec le JS, je me suis permis de vous "voler" un bouton pour le test et je suis arrivé à quelque chose de satisfaisant > http://testjayphpbb3.forumactif.org/forum

Si vous souhaitez revenir au JS, faites moi signe.

Bien à vous.

[Yonali]

Bonjour !
Hé, ça me semble vraiment bien comme ça =)
Je n'ai pas de préférence, on peut se servir du JS ou faire autrement, qu'importe. Comment as-tu fait -Jay- pour faire ça ?

Cela dit, R-max, n'hésite pas à me montrer ce que tu pensais pouvoir faire =)

(Vraiment merci de votre temps et de votre aide ! ♥ )

[◦Jay◦]

Re Yonali, j'espère que nous n'allons pas nous mélanger entre les deux méthodes ...

Donc, pour le JS, j'ai fait comme ceci :

Spoiler:

Celui-ci est l'essai pour mon forum, pour aller plus vite, en réel, il faudra faire comme ceci (mettre une ID différente à chaque fois quoi) :

Spoiler:

Ensuite, pour la CSS, faire comme ceci :

Personnellement, j'ai supprimé la ligne de partage (et aussi la BDN d'origine=a.mainmenu)

Spoiler:

Ensuite mise en place au bon endroit de la partie navigation :

Spoiler:

Vous avez l'air assez à l'aise avec les codes mais bon, le padding-left correspond à l'espace entre les boutons, le margin-top correspond au placement en haut de la page, ceci dit, j'ai un petit beug sur firefox que je n'explique pas, le bouton se place sur le bas de la toolbar (cela se produit seulement avec FF), pour y remédier, j'ai ajouter à votre image une marge en dessous de 2px, ce qui permet d'avoir le même résultat sur tous les navigateurs !

Et enfin, placement des images à l'intérieur :

Spoiler:

Donc, pour vous, il faudra continuer comme ceci :

Spoiler:

Toutefois, pour un meilleur rendu, il faudrait ne faire qu'une seule et unique image avec tous les boutons les uns à côté des autres, de cette manière, il n'y aurait aucun problème de transition puis mettre le code CSS comme ceci :

Spoiler:

De cette manière, la transition ne se verra pas du tout et il n'y aura qu'une seule image et donc un seul chargement.

J'espère avoir été suffisamment clair. Si vous avez des questions, n'hésitez pas.

Bien à vous.

[Invité]

Cela dit, R-max, n'hésite pas à me montrer ce que tu pensais pouvoir faire =)

ok , donc pour information

"centrer le navig "

modifier ce code >>>>>

Code:

#navig {
left:340px;
    position: fixed;
    top: 2px;
    z-index: 20003!important;
   
}

par celui ci>>>>

Code:

#navig {
    position: fixed;
    top: 2px;
    z-index: 20003!important;
    width: 100%;
}

par contre j'ai accès au lien de droite mais juste en dessous ,dans le bas de la barre , étrange

sur votre forum je ne trouve pas pour les faire passé par dessus le navig , surement un code qui rentre en conflit !!

[Yonali]

Bonjour !

@◦Jay◦ : J'ai suivi vos indications. J'ai mis pour le moment moins de lien, et donc d'images, dans la partie navigation, et au lieu de faire deux images par lien, j'ai simplement rajouté la propriété "box-shadow" sur une image "hover".

Code:

    #Image3 { background-image : url(http://i40.servimg.com/u/f40/17/20/22/50/navfor10.png); width :98px; height : 25px; margin-top:-12px!important;}
#Image3:hover { background-image : url(http://i40.servimg.com/u/f40/17/20/22/50/navfor10.png); width :98px; height : 25px; box-shadow: 2px 1px 5px #3B110D inset!important;}
    #Image4 { background-image : url(http://i40.servimg.com/u/f40/17/20/22/50/navcit12.png); width :98px; height : 25px; margin-top:-12px!important;}
#Image4:hover { background-image : url(http://i40.servimg.com/u/f40/17/20/22/50/navcit12.png); width :98px; height : 25px; box-shadow: 2px 1px 5px #3B110D inset!important;}
    #Image6 { background-image : url(http://i40.servimg.com/u/f40/17/20/22/50/navmes10.png); width :98px; height : 25px; margin-top:-12px!important;}
#Image6:hover { background-image : url(http://i40.servimg.com/u/f40/17/20/22/50/navmes10.png); width :98px; height : 25px; box-shadow: 2px 1px 5px #3B110D inset!important;}
    #Image7 { background-image : url(http://i40.servimg.com/u/f40/17/20/22/50/navame10.png); width :98px; height : 25px; margin-top:-12px!important;}
#Image7:hover { background-image : url(http://i40.servimg.com/u/f40/17/20/22/50/navame10.png); width :98px; height : 25px; box-shadow: 2px 1px 5px #3B110D inset!important;}


J'avais le même soucis, les images étaient en bas de la barre, alors j'ai rajouté un alignement vertical haut dans les propriétés du lien :

Code:

    #menutest a{ margin-top:-16px!important;  vertical-align : top!important;}

Et en jonglant avec les margin top des liens et des images, je suis arrivée à un compromis.
Je vais continuer de bidouiller un peu pour voir ce qui me semble le mieux.
Merci de l'aide ! ♥

par contre j'ai accès au lien de droite mais juste en dessous ,dans le bas de la barre , étrange

sur votre forum je ne trouve pas pour les faire passé par dessus le navig , surement un code qui rentre en conflit !!

Oui, Jay avait le même soucis quand il avait tenté de le faire sur son forum. Et c'est dommage qu'on ne trouve pas d'où ça vienne, ce serait tellement plus simple et plus esthétique comme rendu :S

[◦Jay◦]

Vous nous montrerez le résultat.

[Yonali]

Bonsoir !
Si quelqu'un est encore là pour m'aider, j'aimerais bien ^^

Je ne sais pas si c'est à force de bidouiller la toolbar, mais maintenant, quand je veux accéder au menu de notification ou au menu utilisateur, j'ai les cadres qui sont coupés, ils sortent de la fenêtre à droite :

Spoiler:

Est-ce qu'il y aurait moyen de les aligner avec le bord de droite ?
Comme ici par exemple :

Spoiler:

[◦Jay◦]

Bonsoir Yonali, essayez comme ceci :

Code:

#notif_list,#fa_menulist{margin-left: -50px !important;}

Bien à vous.

[Yonali]

C'est super, ça marche !!

Merci beaucoup =)

Merci à vous tous pour votre aide pour mes soucis ! Toujours un plaisir de trouver des gens sur qui on peut compter !

Je passe en résolu !
Bien à vous ♥