Centrer la partie "Navigation" de la Toolbar

3 participants

Page 1 sur 2 1, 2  Suivant

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

Résolu Centrer la partie "Navigation" de la Toolbar

Message par Yonali Mar 5 Avr 2016 - 23:09

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


Dernière édition par Yonali le Jeu 21 Avr 2016 - 16:09, édité 1 fois
Yonali

Yonali
**

Féminin
Messages : 86
Inscrit(e) le : 04/05/2011

http://copains-floodeurs.discutforum.com/
Yonali a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par Yonali Jeu 7 Avr 2016 - 10:33

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

Yonali
**

Féminin
Messages : 86
Inscrit(e) le : 04/05/2011

http://copains-floodeurs.discutforum.com/
Yonali a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par Yonali Lun 11 Avr 2016 - 9:15

Petit Up post week end !
Yonali

Yonali
**

Féminin
Messages : 86
Inscrit(e) le : 04/05/2011

http://copains-floodeurs.discutforum.com/
Yonali a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par teteaclaqueFR Mar 12 Avr 2016 - 3:24

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é.
teteaclaqueFR

teteaclaqueFR
Nouveau membre

Messages : 27
Inscrit(e) le : 17/03/2013

http://thelawofimmortal.forumactif.org/
teteaclaqueFR a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par Yonali Mar 12 Avr 2016 - 9:06

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


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

Yonali
**

Féminin
Messages : 86
Inscrit(e) le : 04/05/2011

http://copains-floodeurs.discutforum.com/
Yonali a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par Invité Mar 12 Avr 2016 - 9:27

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%;
Wink
Anonymous

Invité
Invité


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

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par Yonali Mar 12 Avr 2016 - 19:37

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 !! =)
Yonali

Yonali
**

Féminin
Messages : 86
Inscrit(e) le : 04/05/2011

http://copains-floodeurs.discutforum.com/
Yonali a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par ◦Jay◦ Mar 12 Avr 2016 - 19:49

Bonsoir Yonali, vous pouvez vous aider de ce tutoriel.

Bien à vous.
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par Yonali Mar 12 Avr 2016 - 22:12

◦Jay◦ a écrit: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 ! ^^)
Yonali

Yonali
**

Féminin
Messages : 86
Inscrit(e) le : 04/05/2011

http://copains-floodeurs.discutforum.com/
Yonali a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par ◦Jay◦ Mer 13 Avr 2016 - 7:46

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

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par Yonali Mer 13 Avr 2016 - 16:04

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 ?
Yonali

Yonali
**

Féminin
Messages : 86
Inscrit(e) le : 04/05/2011

http://copains-floodeurs.discutforum.com/
Yonali a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par ◦Jay◦ Mer 13 Avr 2016 - 17:15

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 ?
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par Yonali Mer 13 Avr 2016 - 18:16

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 ?
Yonali

Yonali
**

Féminin
Messages : 86
Inscrit(e) le : 04/05/2011

http://copains-floodeurs.discutforum.com/
Yonali a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par ◦Jay◦ Mer 13 Avr 2016 - 19:44

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

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

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par Invité Mer 13 Avr 2016 - 22:26

bonsoir a vous

Jay a écrit: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 Hi
Anonymous

Invité
Invité


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

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par ◦Jay◦ Jeu 14 Avr 2016 - 8:10

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

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par Yonali Jeu 14 Avr 2016 - 10:58

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)
Yonali

Yonali
**

Féminin
Messages : 86
Inscrit(e) le : 04/05/2011

http://copains-floodeurs.discutforum.com/
Yonali a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par Invité Jeu 14 Avr 2016 - 12:27

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. Wink
Code:
#menu {
position: absolute;
top: 0;
width: 100%;
z-index: 20003;
}
#fa_right {
position: relative;
z-index: 20004;
}
Bye ::fleur::
Anonymous

Invité
Invité


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

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par ◦Jay◦ Jeu 14 Avr 2016 - 16:15

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

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par Invité Jeu 14 Avr 2016 - 16:34

Coucou Jay ah oki pardon Embarassed 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
Anonymous

Invité
Invité


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

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par ◦Jay◦ Jeu 14 Avr 2016 - 16:48

Non, ça ne peut pas fonctionner de cette manière. Rolling Eyes
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par Invité Jeu 14 Avr 2016 - 17:34

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

Invité
Invité


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

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par ◦Jay◦ Jeu 14 Avr 2016 - 17:41

Pouvez-vous me montrer ?
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par Invité Jeu 14 Avr 2016 - 17:45

Anonymous

Invité
Invité


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

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par ◦Jay◦ Jeu 14 Avr 2016 - 17:49

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

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par Invité Jeu 14 Avr 2016 - 17:56

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 Very Happy Embarassed ::fleur::
Bye
Anonymous

Invité
Invité


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

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par Invité Jeu 14 Avr 2016 - 22:16

bonsoir a tous Mr. Green
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 ?
Anonymous

Invité
Invité


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

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par Yonali Dim 17 Avr 2016 - 19:49

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 ? :/
Yonali

Yonali
**

Féminin
Messages : 86
Inscrit(e) le : 04/05/2011

http://copains-floodeurs.discutforum.com/
Yonali a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par Invité Dim 17 Avr 2016 - 22:12

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;
}
Anonymous

Invité
Invité


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

Résolu Re: Centrer la partie "Navigation" de la Toolbar

Message par Yonali Dim 17 Avr 2016 - 23:09

En effet, je peux faire ça.

Impossible de la centrer du coup ? Sad 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 ! ^^
Yonali

Yonali
**

Féminin
Messages : 86
Inscrit(e) le : 04/05/2011

http://copains-floodeurs.discutforum.com/
Yonali a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum