boutons menu flottant

par @stra Lun 1 Fév 2016 - 19:05

Détails techniques

Version du forum : Invision
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://testqm.forumpro.fr/

Description du problème

Mon menu flottant fonctionne trés bien, mais visuellement j'ai un soucis:
les boutons sont trés écartés les uns des autres.

Lorsque le menu est "bloqué" en haut, c'est nickel, mais lorsqu'il "flotte" chaque bouton est trés séparé des ses voisins.

Auriez vous une piste ?

merci d'avance

par Neptunia Lun 1 Fév 2016 - 19:31

Bonjour ^^

Le css du tutoriel contient :

Code:: padding:0 10px;

Supprimez cette ligne ou bien réduisez la valeur du padding horizontal (en réduisant le 10, c'est dur pour la troyenne que je suis de sacrifier ce numéro)

par @stra Lun 1 Fév 2016 - 20:14

merci amie Troyenne Very Happy

J'ai fais la manip, mais ça ne change rien Sad

Si tu trouves la solution, je t’emmène boire une mousse au Tricasse, ou l'illustré (j'aime mieux) Wink

par ◦Jay◦ Lun 1 Fév 2016 - 20:34

Bonsoir @stra, essayez ce code dans votre CSS :

Code:: #submenu img{margin:-15px;}

Bien à vous.

par Neptunia Lun 1 Fév 2016 - 20:47

Bah j'ai fait la manip sur votre propre forum avant de poster la solution ici.

Attention ce type de code est susceptible d'apparaître à plusieurs reprises dans votre CSS, veillez à bien modifier uniquement celui se référant à la navigation flottante fa_sticky_nav

par @stra Lun 1 Fév 2016 - 20:50

merci Jay, ça fonctionne trés bien Yes

il faut juste penser à également modifier l'ordre des boutons du menu dans
PA-affichage-entête de navigation en mettant à la fin les boutons inutilisé (pour supprimer l'espace créé automatiquement par l'absence de boutons)

on passe donc ce sujet à résolu

par @stra Lun 1 Fév 2016 - 20:52

merci Neptunia, concrètement, comment fais-je pour modifier seulement le bon ?

par Neptunia Lun 1 Fév 2016 - 21:05

Et bien vous ressortez le tutoriel et dans votre CSS vous vous assurez de bien modifier le passage identique au code du tutoriel.

par @stra Lun 1 Fév 2016 - 22:17

je ne pige pas ta réponse, Neptunia, la ligne de code, je l'ai ajoutée dans le CSS, elle n'y etait pas, d'où ma question
Surprised

par Neptunia Lun 1 Fév 2016 - 22:39

Elle y était vu que je l'ai trouvée dans le code de vos pages.

Evidemment en rajoutant seule cette ligne, ça ne fonctionnera pas vu que la ligne seule ne précise pas quel élément on configure.

Regardez de nouveau le tuto. La ligne en question figure à la ligne 26 des CSS proposés

Astuce

Ajouter une barre de navigation flottante

par @stra Lun 1 Fév 2016 - 22:51

oui, merci , mais les 2 valeurs sont à zero, et ça ne marche pas (là ça marche parce que j'ai ajouté la ligne de code proposée par Jay

Code:: #submenu img{margin:-15px;})

si je l'enlève, même avec

    #fa_sticky_nav a.mainmenu {
      color:#CCC;
      font-size:12px;
      font-weight:bold;
      font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
      background:url('https://i.servimg.com/u/f21/18/21/41/30/row10.gif') repeat-x 0px 30px;
      display:inline-block;
      padding:0 0px;
      height:30px;
      line-height:30px;
      transition:200ms;

ça ne marche pas

Mais bon, vu que ça fonctionne, ne te tracasse pas et encore merci Bizz