28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je rencontre sur mon site deux bugs CSS mystérieux, qui me semblent liés, mais sans que je trouve la solution...

La page concernée est celle-ci : http://adage.bf/references/
On y trouve un header, un corps avec des images, et un footer. Dans le header, un menu, qui apparait différement selon la résolution de l'écran :
- à gauche sur une dalle fullHD ;
- en haut sur un écran "normal" ;
- en burger sur un smartphone.

Les deux bugs n'apparaissent que dans le cas d'un écran "normal", c'est-à-dire une résolution comprise entre 769 et 1500 pixels de large.

BUG 1 : Sur quelques rares outils, l’aperçu du site apparait comme ceci :
http://adage.bf/20161003/bug.jpg

BUG 2 : Les sous-menus sont systématiquement cachés derrière les images du corps principal de la page... malgré un z-index de 1 !

Immenses mercis d'avance pour votre aide.
Modifié par Adage (03 Oct 2016 - 15:49)
Modérateur
Hello,

Tu veux dire quoi par "rares outils" pour reproduire le bug ? Tu sais en dire plus pour qu'on essaie de reproduire ? Tu n'as pas d'erreur JS dans la console quand tu as le soucis ?

Pour le soucis de z-index, j'ai trouvé un endroit où le menu passait sous un élément (creation-de-site-internet) mais c'est normal. Ton menu à un z-index de 1 et .fusion-separator à un z-index de 11.

ps : c'était cool d'avoir ajouté un screenshot mais ce n'est pas lisible... Smiley rolleyes
Modérateur
Pour le bug du menu, ça suffira :
#side-header{
    position: relative;
    z-index: 2;
}

Ajoute évidement ta MQ pour que ça fonctionne dans le bon cas

Pour l'outil d'ovh, j'ai toujours un peu de mal à faire confiance à des rendus comme ça.
J'ai déjà fait dans le passé pas mal de test pour les plus vieilles version d'IE et la conclusion était toujours la même. Pour avoir un vrai rendu, il faut une vrai machine. Smiley decu
À moins que tu trouves un environnement réel où tu peux reproduire ça, je le laisserais comme ça.
Meilleure solution
Génial ! Un coup KO. Grand merci !

Merci également pour le conseil sur le bug d'affichage sur les aperçus automatisés ; effectivement, j'ai testé le site sous des dizaines de combinaisons OS/Browser sans jamais faire face à ce bug.