barre de navigation trop petite, trop espacée et pas centrée

2 participants

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

Résolu barre de navigation trop petite, trop espacée et pas centrée

Message par I.S.A Lun 19 Avr 2021 - 16:18

Détails techniques


Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome, Internet Explorer
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis toujours
Lien du forum : https://partages-bibliques.forumactif.com/

Description du problème

Bonjour,

J'ai un souci avec ma barre de navigation : selon l'écran elle n'est pas centrée (pourtant j'ai bien mis centré dans la page affichage) et elle est trop espacée du reste du contenu, plus je touche plus j'empire les choses).

Par la suite j'envisage de rajouter ou enlever des boutons, j'ai donc besoin d'apprendre à gérer.

J'ai cherché dans plusieurs topics, j'ai testé plusieurs solutions mais rien ne fonctionne, je suis trop débutante peut être.

J'ai tenté de toucher aux templates (hover-head), aux CSS, au javascript, j'ai même tenté un code d'une barre menu toute faite, mais elle ne s'affiche que dans la prévisualisation (affichage, couleurs).
J'ai tout effacé pour revenir à l'origine.

La seule solution qui me semble à mon niveau envisageable : changer de version pour une invision ou PPhb2 ou 3 et redimensionner mes boutons, mais j'avais envie de persévérer, pour apprendre.

En image le soucis :
barre de navigation trop petite, trop espacée et pas centrée 210419041447252797

Merci pour l'aide et les conseils.

Smile
I.S.A

I.S.A
Nouveau membre

Messages : 6
Inscrit(e) le : 19/04/2021

https://partages-bibliques.forumactif.com/
I.S.A a été remercié(e) par l'auteur de ce sujet.

Résolu Re: barre de navigation trop petite, trop espacée et pas centrée

Message par Invité Lun 19 Avr 2021 - 16:44

Bonjour I.S.A,

Essayer d’installer ceci et mettre en PX votre grossissement de votre choix !

Chemin pour s'y rendre : Panneau d'administration / Affichage / Images et Couleurs / Feuille de style CSS,

Ou si vous avez déjà ce code dans votre "Feuille CSS" réglé ce, PX !

Code:
.navbar img {
    width: 16px !important;
}

Cdlt,
Anonymous

Invité
Invité


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

Résolu Re: barre de navigation trop petite, trop espacée et pas centrée

Message par I.S.A Lun 19 Avr 2021 - 17:47

Bonjour et merci beaucoup pour votre réponse.

Est-ce que je dois recopier tout le CSS et apporter cette information à un endroit précis?
ou est-ce qu'il faut juste copier ce code dans la feuille vierge?
En effet, en copiant dans la feuille CSS vierge et en mettant 90 px, j'obtiens un résultat intéressant mais pas suffisant :
Voici ce que ça donne, avec les annotations précisant mes soucis restants :

barre de navigation trop petite, trop espacée et pas centrée Pb_res10

Encore 10 000 mercis Smile
I.S.A

I.S.A
Nouveau membre

Messages : 6
Inscrit(e) le : 19/04/2021

https://partages-bibliques.forumactif.com/
I.S.A a été remercié(e) par l'auteur de ce sujet.

Résolu Re: barre de navigation trop petite, trop espacée et pas centrée

Message par Invité Lun 19 Avr 2021 - 18:18

Re,

En redimensionnant vos images à l'identique (Dans "Paint", par exemple), cela pourrait peut-être le faire
Puis réinstallez vos images redimensionnées dans le chemin suivant !..

Dans votre : Panneau d'administration

Chemin : / Affichage / Gestion des images / Mode Avancé

barre de navigation trop petite, trop espacée et pas centrée Captu105


Voici un lien ci-dessous de recherche qui pourrait être très utile à propos de votre Forum !
Bonne lecture !

Listing des Questions & Réponses Fréquentes

Cdlt,
Anonymous

Invité
Invité


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

Résolu Re: barre de navigation trop petite, trop espacée et pas centrée

Message par I.S.A Lun 19 Avr 2021 - 19:06

Alors avant tout un énorme merci pour votre aide et vos réponses rapides, je trouve ça vraiment chouette.

On avance, j'ai réussi à inverser les couleurs comme je veux, mais pour la taille, et le centrage c'est pas ça!
Mes images à l'origine ont toutes la même hauteur (je les ai travaillées avec Gimp Wink ), mais la largeur varie en fonction de la longueur du mot, effectivement, si je n'arrive pas à égaliser je verrai pour refaire tous mes boutons, mais ça m'ennuie.

En attendant j'ai réussi à aligner par le haut, je trouve déjà plus acceptable bien que ce ne soit pas encore je que je veux!

En fait, j'ai réussi en code HTML à faire ce que je veux (voir image Wink )
avec sans doute un onmouse pour les changements de de boutons mais je ne sais pas l'intégrer.

I.S.A

I.S.A
Nouveau membre

Messages : 6
Inscrit(e) le : 19/04/2021

https://partages-bibliques.forumactif.com/
I.S.A a été remercié(e) par l'auteur de ce sujet.

Résolu Re: barre de navigation trop petite, trop espacée et pas centrée

Message par MlleAlys Lun 19 Avr 2021 - 19:40

Bonjour,

- Pour la bannière non centrée, c'est parce qu'elle est plus grand que son contenant, donc dépasse à droite.
Pour régler ce problème en empêchant l'image de dépasser, copiez/collez ce code css dans la feuille de style de votre forum :
Code:
/*taille image bannière*/
a#logo img {
  max-width: 100%;
}


- Pour la barre de navigation, les hauteurs ne sont pas les mêmes car vous avez fixé la largeur des images. Hors ici c'est plutôt leur hauteur qu'il faudrait égaliser, et laisser la largeur libre.
Dans votre css, localisez le code suivant :
Code:
.navbar img {
  display: inline-block;
  filter: invert(0%);
  heignt: relative;
  margin-right: 0;
  vertical-align: top;
  width: 77px;
}
Et remplacez-le par celui-ci :
Code:
.navbar img {
  height: 45px;
  width: auto;
  filter: none;
}
La hauteur des images sera alors la même, égale à 45px (valeur que vous pouvez modifier selon votre envie).


- Si vous souhaitez coller les images les unes aux autres pour n'avoir qu'une seule barre, alors il faut supprimer les marges des images te des liens. Complétez le code précédent ainsi :
Code:
.navbar img {
  height: 45px;
  width: auto;
  filter: none;
  margin: 0;
}
Puis localisez celui-là :
Code:
.navbar a {
  border-radius: 3px;
  color: #FFF;
  display: inline-block;
  font-size: 1.3rem;
  line-height: relative;
  padding: 6px;
}
Et remplacez-le par :
Code:
.navbar a {
  padding: 0;
}


- Si vous souhaitez empêcher l'effet négatif au survol des images, ajoutez également le code suivant :
Code:
.navbar a:hover img {
  filter: none;
}



Voilà, je ne sais pas si cela répond à vos attentes, par exemple il n'y a plus du tout d'effet au survol... N'hésitez pas à me dire ! ^^
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

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

Résolu Re: barre de navigation trop petite, trop espacée et pas centrée

Message par I.S.A Lun 19 Avr 2021 - 22:57

Fantastique, encore un grand merci!
on y est presque!

Alors j'ai laissé l'effet survol, mais je voudrais savoir s'il est possible de mettre une autre image (que j'ai créé aussi) plutôt que le négatif.
Il y a un truc bizarre : j'ai changé l'image de déconnexion pour une plus visible, (que j'aimerais mettre en fin de barre) mais quand je modifie quelque chose, mon alignement redevient chaotique, et ce n'est qu'en effaçant tout et recommençant que j'obtiens à nouveau le bon alignement (conflit quelque part? normal?)

Je voudrais savoir s'il est possible d'avoir un pourcentage plutôt qu'une valeur fixe afin que quand on se trouve sur un écran plus petit, la barre se réduise proportionnellement et à la même valeur que la bannière. J'ai essayé les % mais c'est une catastrophe, je n'ai pas dû savoir comment les mettre.

Enfin, j'aimerais que l'espace entre la barre et le forum soit réduit et l'espace entre le sujet et le texte (je ne sais pas si je suis claire) j'ai dû le modifier sans le vouloir, car c'était beaucoup moins gros à l'origine!

Par la suite j'envisage l'a possibilité d'un menu déroulant pour y faire figurer les sujets les plus importants du forum, j'ai vu qu'il existait des tutos, mais j'ai tellement galéré à fixer tout ça, que j'hésite.

Je souhaite aussi mettre une image différente à chacune de mes catégories. (mais ça c'est en option, ce serait le petit plus Smile )

J'ai réussi l'ajout des boutons haut-bas, grâce à un tuto, je suis trop fière!
J'ai réussi aussi à personnaliser mon favicon et à l'installer merci les tutos Smile
Merci pour l'aide et désolée de vous faire encore contribuer Smile
I.S.A

I.S.A
Nouveau membre

Messages : 6
Inscrit(e) le : 19/04/2021

https://partages-bibliques.forumactif.com/
I.S.A a été remercié(e) par l'auteur de ce sujet.

Résolu Re: barre de navigation trop petite, trop espacée et pas centrée

Message par MlleAlys Mar 20 Avr 2021 - 15:10

Concernant le problème en changeant l'image de déconnexion, difficile pour moi de répondre sans observer le problème en direct malheureusement.


Pour une taille en pourcentage, malheureusement ce ne serait pas un pourcentage en fonction de la taille de l'écran ici, donc ça parait compliqué de passer par là, même si l'idée de base d'en utiliser était bonne.
On peut essayer de passer par un affichage "flex", qui gèrera la largeur de chaque élément en fonction de l'espace disponible.... Je ne sais pas si ça va fonctionner parfaitement, en gardant la même hauteur pour chaque image de façon à ce qu'elles restent bien alignées, mais ça semble fonctionner quand je teste en direct en tout cas ! Donc à tester :

- sauvegardez votre css actuel, sur un bloc note par exemple, ainsi si le résultat à la fin ne vous convient pas, vous pourrez revenir facilement à l'état précedent.

- localisez le code suivant :
Code:
.navbar img {
  display: inline-block;
  filter: invert(0%);
  height: 70px;
  margin: 0;
  vertical-align: top;
  width: auto;
}
Et modifiez-le ainsi :
Code:
.navbar img {
  filter: invert(0%);
  max-height: 70px;
  margin: 0;
  width: auto;
  max-width: 100%;
}
(on passe sur une hauteur maximale plutôt que fixe, qui sera ensuite diminuée si besoin à l'affichage.

- Puis ajoutez le code suivant :
Code:
ul.navbar {
  display: flex;
  justify-content: center;
}

- enregistrez
-actualisez votre forum

Cela devrait permettre de garder la barre de navigation sur une seule ligne en diminuant la taille des images lorsque nécessaire.



Pour modifier l'image au survol, je vais vous renvoyer vers ce tutoriel :
https://forum.forumactif.com/t246228-images-de-la-barre-de-navigation-modifiees-au-passage-de-la-souris#2235908
Et vous pourrez ouvrir un nouveau sujet dédié si vous rencontrez des difficultés. ^^


De même pour le menu déroulant, et les images des catégories, je vous laisse tester les tutoriels que vous avez trouvés, et ouvrir des sujets différents pour demander de l'aide si besoin.

Pensez à faire des recherches dans les sujets résolus du forum Wink



Pour ce qui est de la marge en dessous de la barre de navigation , je vois d'où ça vient, et j'ai bien une solution qui semble fonctionner quand je teste, mais comme je ne connais pas bien cette version, il est aussi possible que ça s'affiche mal dans un cas que je n'aurais pas vu en testant scratch
Si vous souhaitez tester pour savoir :
La hauteur de la partie de la bannière est fixée à 350px. On va redéfinir la hauteur sur automatique pour qu'elle s'adapte à son contenu :
- Ajoutez dans votre css les codes suivants :
Code:
.headerbar, #headerbar-top {
  height: auto;
}
- enregistrez
- actualisez votre forum
L'espace en dessous de la barre de navigation devrait avoir disparu.
Si jamais vous avez l'impression que ça provoque un problème d'affichage de la bannière vous pouvez retirer ce code ajouté de la même façon. ^^
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

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

Résolu Re: barre de navigation trop petite, trop espacée et pas centrée

Message par I.S.A Mar 20 Avr 2021 - 16:39

Alors super merci beaucoup.

J'ai encore un dernier petit réglage s'il est possible sur ma barre de menu
en fait il s'agit d'aligner tout le contenu (logo, forum, avec le menu)

barre de navigation trop petite, trop espacée et pas centrée Dernie10

Pour le reste, je vais regarder les tutos Wink
Mais le lien que vous proposez je l'avais vu, mais comme il ne concerne pas ma version, je n'ai pas osé tester.
Est ce que ça peut fonctionner quand même?

Encore un énorme merci!
I.S.A

I.S.A
Nouveau membre

Messages : 6
Inscrit(e) le : 19/04/2021

https://partages-bibliques.forumactif.com/
I.S.A a été remercié(e) par l'auteur de ce sujet.

Résolu Re: barre de navigation trop petite, trop espacée et pas centrée

Message par MlleAlys Mar 20 Avr 2021 - 17:42

Pour que la bannière fasse la même largeur que le forum, vous pouvez ajouter le code suivant dans votre css :
Code:
#headerbar-top .wrap {
  padding: 0;
}
Ce qui supprime les marges de chaque côté de la bannière.



Pour le tuto, oui, les identifiants des deux versions semblent être les mêmes à première vue, donc je pense que ça pourrait fonctionner ! A tester en tout cas.



Pour élargir la barre de navigation, je pense que la solution sera, plutôt que de bidouiller la taille des boutons, d'appliquer un fond à la barre navigation qui les lie tous :
- J'ai découpé un morceau d'un de vos boutons. Il se répètera sur toute la largeur de la barre. barre de navigation trop petite, trop espacée et pas centrée 54r1
- Localisez le code suivant :
Code:
ul.navbar {
  display: flex;
  justify-content: center;
}
- Complétez-le ainsi :
Code:
ul.navbar {
  display: flex;
  justify-content: center;
  background: url(https://zupimages.net/up/21/16/54r1.jpg);
  background-size: contain;
}

On peut si vous le souhaitez re-répartir les boutons le long de la barre, mais comme l'alignement n'est pas parfait avec le fond, ça se voit...

Peut être que afficher les lien avec le texte et non les images sera finalement d'autant plus simple à mettre en forme, en fonction de l'effet que vous cherchez au survol.

Vos images peuvent donc contenir seulement le texte sur fond transparent, le fond est déjà tout le long de la barre ^^
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

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

Résolu Re: barre de navigation trop petite, trop espacée et pas centrée

Message par I.S.A Mer 21 Avr 2021 - 14:54

Génial! Merci beaucoup!
Je marque résolu!
Les images de survol : j'ai tenté le tuto (en thème temporaire) mais ça ne semble pas fonctionner. Je reste comme ça de toute façon pour le moment, encore un immense merci à vous.
I.S.A

I.S.A
Nouveau membre

Messages : 6
Inscrit(e) le : 19/04/2021

https://partages-bibliques.forumactif.com/
I.S.A a été remercié(e) par l'auteur de ce sujet.

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