Centrer la partie "Navigation" de la Toolbar

Page 2 sur 2 Précédent  1, 2

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 le Mar 5 Avr 2016 - 23:09

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


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

Yonali
**

Féminin
Messages : 85
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 R-max le Lun 18 Avr 2016 - 6:51

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

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

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

Message par ◦Jay◦ le Lun 18 Avr 2016 - 7:16

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.



◦Jay◦
Créactif
Créactif

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

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

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

Message par Yonali le Lun 18 Avr 2016 - 9:26

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 ! ♥ )

Yonali
**

Féminin
Messages : 85
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◦ le Lun 18 Avr 2016 - 13:26

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:
Code:
                $('#fa_search').after('<div align="center"><span class="fa_tbMainElement"><div id="menutest">
        <a href="/login"><div id="Image1"></div></a>
        <a href="/"><div id="Image1"></div></a>
        <a href="/forum"><div id="Image1"></div></a>
        <a href="/memberlist"><div id="Image1"></div></a>
        <a href="/groups"><div id="Image1"></div></a>
        <a href="/privmsg?folder=inbox"><div id="Image1"></div></a>
        <a href="/profile?mode=editprofile"><div id="Image1"></div></a>
        <a href="/login?logout"><div id="Image1"></div></a>
        </div></span></div>');
             
              })});

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:
Code:
                $('#fa_search').after('<div align="center"><span class="fa_tbMainElement"><div id="menutest">
        <a href="/login"><div id="Image1"></div></a>
        <a href="/"><div id="Image2"></div></a>
        <a href="/forum"><div id="Image3"></div></a>
        <a href="/memberlist"><div id="Image4"></div></a>
        <a href="/groups"><div id="Image5"></div></a>
        <a href="/privmsg?folder=inbox"><div id="Image6"></div></a>
        <a href="/profile?mode=editprofile"><div id="Image7"></div></a>
        <a href="/login?logout"><div id="Image8"></div></a>
        </div></span></div>');
             
              })});

Ensuite, pour la CSS, faire comme ceci :

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

Spoiler:
Code:
#fa_share_text,#fa_fb,#fa_twitter,#fa_gp,#fa_mail,#fa_rss,a.mainmenu{display:none!important;}

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

Spoiler:
Code:
#menutest a{padding-left:10px;
margin-top:-28px!important;}

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:
Code:
#Image1 { background-image : url(http://image.noelshack.com/fichiers/2016/16/1460954629-bout1.png); width :98px; height : 27px; }
#Image1:hover { background-image : url(http://image.noelshack.com/fichiers/2016/16/1460955017-bout2.png); }

Donc, pour vous, il faudra continuer comme ceci :

Spoiler:
Code:
#Image1 { background-image : url(http://image.noelshack.com/fichiers/2016/16/1460954629-bout1.png); width :98px; height : 27px; }
#Image1:hover { background-image : url(http://image.noelshack.com/fichiers/2016/16/1460955017-bout2.png); }
#Image2 { background-image : url(URL de votre troisième image); width :98px; height : 27px; }
#Image2:hover { background-image : url(URL de votre quatrième image); }

etc...

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:
Code:

#Image1{width:98px; height:27px; background:url("URL de l'image avec boutons regroupés") no-repeat 0 0px;}
#Image1:hover{background:url("URL de l'image avec boutons regroupés") no-repeat 0px -27px;}
#Image2{width:98px; height:27px; background:url("URL de l'image avec boutons regroupés") no-repeat -98px 0px;}
#Image2:hover{background:url("URL de l'image avec boutons regroupés") no-repeat -98px -27px;}
etc...

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. Very Happy

Bien à vous.



◦Jay◦
Créactif
Créactif

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

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

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

Message par R-max le Lun 18 Avr 2016 - 22:14

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 !!

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

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

Message par Yonali le Mar 19 Avr 2016 - 10:42

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 ! ♥


@R-max a écrit: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

Yonali
**

Féminin
Messages : 85
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◦ le Mar 19 Avr 2016 - 13:09

thumright Vous nous montrerez le résultat. Very Happy



◦Jay◦
Créactif
Créactif

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

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

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

Message par Yonali le Mer 20 Avr 2016 - 18:37

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:

Yonali
**

Féminin
Messages : 85
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◦ le Mer 20 Avr 2016 - 21:02

Bonsoir Yonali, essayez comme ceci :

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

Bien à vous.



◦Jay◦
Créactif
Créactif

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

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

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

Message par Yonali le Jeu 21 Avr 2016 - 16:09

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 ♥

Yonali
**

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

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

Page 2 sur 2 Précédent  1, 2

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