28172 sujets

CSS et mise en forme, CSS3

Chargement étrange du site

Bonjour,

J'ai touché du css cet après-midi et depuis j'ai un soucis sur le chargement de mes pages. Ce qui se trouve sous le header semble comme sauter au moment du chargement et cela se produit sur toutes les pages.

Je trouve vraiment pas agréable de naviguer avec ces déplacements sur chaque page.

Pourriez-vous me donner une piste pour corriger ce bug ?

Vous allez voir tout de suite de quoi je parle en vous rendant sur mon site : https://greenbeautysquare.com/

Merci d'avance pour votre aide,

Géraldine
Yo,

Je vois pas trop de 'sautement'. Il y a un margin-top: -54px sur un élément. Je le retrouve plus...Mais vous pourrez commencez par inspectez toutes les valeurs négatives, surtout les margin puisque ces propriétés bousculent tous les éléments autour de celui qui contient un margin négatif. Je sais pas trop. A tester....
Bonjour,

C'est visible sur la version mobile uniquement. J'ai modifié le code encore une fois et un espace se crée entre le menu et le reste du site.

J'ai essayé de chercher ce margin-top : -54px mais je n'ai pas trouvé.

Si vous avez une idée de comment enlever cet espace je suis preneuse.

Merci beaucoup et belle journée Smiley smile
Modérateur
Bonjour,

Chez moi, ça m'a l'air pas trop mal (que ce soit sur mobile ou ordinateur).

C'est même un petit miracle que ça marche aussi bien vu la complexité du code.

EDIT : n'oublie pas de vider ton cache !

Je n'observe pas de tressautement.

J'observe l'apparition d'un espace entre le header et le reste du site pour des fenêtres entre 980px et 1025px de large. Je ne sais pas si on parle de la même chose (pas bien méchant, si on ne sait pas qu'il est non désiré, on ne s'aperçoit de rien).

Il semble qu'il y ait un script javascript qui modifie le padding-top de l'élément "#page-container" (il le fait passer de 88px à 63px pour les fenêtres moins large que 980px). C'est peut-être ça la raison du tressautement (que pour ma part je n'ai pas vu) et peut-être aussi la raison de l'espace qui apparait parfois (le script ne faisant peut-être pas le bon calcul en toute circonstance). Les scripts étant minimifiés, il est assez difficile de les corriger.

Par contre, on peut modifier le height du header (qui est en position:fixed) via css pour faire coller sa hauteur à la dimension du padding-top de "#page-container".

Par exemple, avec un peu de chance (car si ça se trouve, ça dépend d'autres paramètres comme la taille de la police), ceci pourrait fonctionner (et si c'est bien du même phénomène dont on parle) :
@media only screen and (min-width: 981px) {
    #main-header {
        height: 88px;
    }
}


Amicalement,
Modifié par parsimonhi (13 Feb 2021 - 17:20)
Sujet clos
Aller à