Éléments qui bougent avec le zoom

par xewup Ven 3 Mai 2019 - 9:27

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Opera
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.freeartisticmind.forumactif.com

Description du problème

Bonjour,

J'ai remarqué récemment un problème sur mon forum : Certains éléments se déplacent en fonction de la résolution de l'écran, ou du zoom sur la page. Notamment ma barre de navigation tout en haut.

La résolution de mon écran: 1920x1080
Éléments qui bougent avec le zoom 1556868384-1920

Éléments qui bougent avec le zoom 1556868384-1920

Quand je dézoome : Éléments qui bougent avec le zoom 1556868383-1920dezoom

On remarque que le menu se déplace vers la droite de l'écran.

Pouvez-vous m'aider à régler ceci ?

Merci d'avance

par Adam_sfp Ven 3 Mai 2019 - 14:16

Bonjour

Je ne sais pas si c'est lié mais vous avez les icones de réseau sociaux qui apparaissent 2 fois .
J'ai vu que vous aviez installé un code de Milouze que je salue au passage
https://forum.forumactif.com/t400153-faire-un-menu-des-reseaux-sociaux-en-dessous-de-la-barre-de-navigation

Vous pourriez essayez de le cacher et le faire apparaître au scroll .
Il faudrait essayez en mettant la partie html dans le template overall header après

Code:: <body id="modernbb">

Ensuite mettre ce script dans gestion des codes javascript

Code:: $(document).scroll(function () { var test = $(this).scrollTop(); if (test >50) { $('#M14_btn').fadeIn(); } else { $('#M14_btn').fadeOut(); } });

Vous modifiez la valeur 50 qui correspond au scroll 50px par rapport au top

ensuite dans le CSS vous gardez toujours la partie de Milouze il y a juste la première partie qui est modifiée celle ci

Code:: /*LE BLOC DES RESEAUX SOCIAUX*/ #M14_btn { position:absolute; top:150px; z-index: 999; color: #fff; display: none; float: left; font-family: sans-serif; font-size: 15px; font-weight: 700; padding:18px 0px 18px 200px; background-color:grey; padding: 10px 10px 10px 70px; width: 40%;/*on determine la largeur du bloc*/ margin-left: 10%;/*/*on decale le bloc de 10% de la gauche*/ }

vous pouvez modifier top:150 pour ajuster la position de la barre..

cdt.

par xewup Ven 3 Mai 2019 - 16:28

Je préfère qu'ils ne soient pas affichés au scroll @adam_sfp mais merci tout de même

Le problème dont je parle d'ailleurs était là avant l'apparition de la barre des réseaux sociaux.

par Adam_sfp Ven 3 Mai 2019 - 21:27

xewup a écrit:Je préfère qu'ils ne soient pas affichés au scroll @adam_sfp mais merci tout de même

.

Bonsoir xewup
Pas de soucis Wink

Je trouvais l'effet assez sympa Wink

par xewup Dim 5 Mai 2019 - 10:04

par xewup Lun 6 Mai 2019 - 18:39

Up !

par xewup Mar 7 Mai 2019 - 21:59

Le petit up qu'on aime

par Tite-May Mer 8 Mai 2019 - 15:19

Bonjour

Avec les codes on pourrait plus facilement répondre Smile

J'ai été sur ton forum pour voir le code. Ton bloc de navigation est en position absolute : il faut que tu aies son bloc de référence en position relative sinon ça ne peut pas fonctionner.
Dans ta CSS remplace ceci :

Code:: .wrap { margin: 0 auto; max-width: 1400px; padding: 0 36px; width: 100%; }

par ceci :

Code:: .wrap { margin: 0 auto; max-width: 1400px; padding: 0 36px; width: 100%; position: relative; }

Et ça devrait être bon Smile

par xewup Mer 8 Mai 2019 - 16:21

Merci ça fonctionne ! Par contre je ne sais pas pourquoi mais cette barre est coupée en deux..

par Tite-May Mer 8 Mai 2019 - 16:22

Ah super

Je ne vois pas ce que tu veux dire ? Comment ça elle est coupée en 2 ?

par xewup Mer 8 Mai 2019 - 17:20

Je ne la vois qu'à moitié, voici une capture :

Éléments qui bougent avec le zoom 1557328807-coupee

par Tite-May Jeu 9 Mai 2019 - 10:18

Hello !

Déjà, le padding mis ici :

Code:: #M14_btn { background-color: #565655; color: #fff; display: block; font-family: Caviardreams; font-size: 14px; left: 0; padding: 1px 40% 1px 10%; position: absolute; width: 100%; }

Fait passer les choses sur 2 lignes chez moi. Tu peux remplacer le 67 par 40 par exemple.
Ensuite pour le fait que ça se "grimpe dessus" c'est la hauteur de ton header bloc qui gêne :

Code:: .headerbar { background-color: #1D262C; background-image: url(https://2img.net/i/fa/empty.gif); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 373px; margin: 0; overflow: hidden; padding: 0; position: relative; }

Ca devrait résoudre le souci Wink

par xewup Jeu 9 Mai 2019 - 17:16

Merci infiniment !

Éléments qui bougent avec le zoom