28106 sujets

CSS et mise en forme, CSS3

Bonsoir,

Un bandeau titre est positionné sous la navigation. Sur Chrome pas de pb mais sur Safari, le bandeau remonte sous la navigation.

Bien entendu, si je corrige la hauteur avec un margin-top: -188px; c'est bon pour Safari mais pas pour Chrome.

Je ne sais pas comment régler ce pb.

Existe t-il un CSS différent pour Safari et Chrome ? Smiley ohwell
Merci beaucoup pour ton retour mais si j'utilise par exemple :
-webkit-margin-before : 188px!important; 

ça affecte également Chrome.

Et désolé, c'est un peu compliqué pour moi de renvoyer vers le site en question pour l'instant
Modifié par goudurisc (13 Nov 2020 - 14:48)
Modérateur
goudurisc a écrit :
Et désolé, c'est un peu compliqué pour moi de renvoyer vers le site en question pour l'instant Smiley rolleyes

C'est compliqué/impossible d'aider sur du code qu'on ne voit pas. Si ton site n'est pas en ligne, ce n'est pas grave, reproduis le strict nécessaire dans un codepen, jsbin ou autre si tu veux que l'on puisse t'aider… Smiley smile
Bon, ok, comme je ne trouve pas d'issue et que Alsacréation m'a souvent sauvé la mise, je communique la page d'accueil en question : lien supprimé

Ça concerne donc le bandeau titre sur fond jaune. Il est parfait sur Chrome mais sur Safari, ce bandeau remonte sous la navigation (on n'aperçoit que la pointe au dessous) de 188px.

Cela dit, c'est un peu plus compliqué car :
- ce site s'appuie sur un thème Wordpress un peu ancien maintenant (Joyn), donc forcément très chargé en code
- à l'origine du développement, tout était ok mais au fil des mises à jour (CMS, theme, php...), ce bug est apparu mais sans que je m'en aperçoive sur le moment.

L'objectif est donc de positionner le bandeau jaune sur Safari exactement comme sur Chrome. Smiley rolleyes
Modifié par goudurisc (13 Nov 2020 - 16:49)
Merci Jean-Pierre pour ton retour rapide.

Ce qui est clair, c'est que je recherche la solution mini pour ajuster la hauteur du bandeau sur Safari et surtout pas de devoir re-développé la structure de la page.

Sinon, j'avoue que je ne vois pas comment régler l'absence de JS (que je visualise effectivement en rouge depuis la console Google).

J'ai pourtant effectué la mise à jour du thème récemment.

Est-ce la cause de ce pb de hauteur de bandeau ?
Peut-on contourner ce pb avec CSS ?
Sincèrement, je ne sais pas où placer le curseur des compétences quand on parle de "Pros". Pour ma part, si je sollicite ce forum depuis des années, c'est que je considère que la grande majorité des contributeurs savent déjà de quoi ils parlent et apportent souvent la solution. En ce sens, je trouve que le niveau pro Alsacréation me convient parfaitement pour répondre à mes besoins assez modestes, mais ce n'est que mon avis.

Sinon, concernant le bug JS, je voulais jsute savoir si ça méritait que je course l'éditeur du thème Joyn, ou si c'est mon code qui posait pb.

Bon, idéalement, s'il y avait eu une commande CSS propriétaire de Safari (Apple s'y connaît pourtant en tech propriétaire), du type safari-margin-top : 188px; le pb aurait été réglé de suite.

Ce qui est très frustrant, c'est de constater qu'il peut y avoir encore des différences entre Safari et Chrome, même si on en n'est plus à l'époque glorieuse d'Explorer et de ses caprices.
Modérateur
tu as pas mal de margin énorme qui posent problème, quelques exemples:
.page-id-5 #header-section {
margin-top: 535px!important;
}

Tu essaies d'inverser la position visuelle des blocs en gardant un contenu qui n'est pas dans le même ordre. C'est vraiment compliqué et risqué, et on le voit ici. Ce serait plus propre/plus simple si tu faisait correspondre tes éléments à ton envie visuelle. (il existe des possibilités pour inverser, mais ce sera encore plus compliqué dans ton cas)
Oui Yordi, tu as mille fois raison mais ce site est ancien est je n'utilise plus ce mixage de positions un peu douteux. Mais je ne peux envisager de tout revoir aujourd'hui.

Mais bon, j'ai trouvé une solution rapide pour n'affecter que Safari, je ne sais pas si ce hack est homologué mais il semble fonctionner :

@media not all and (min-resolution:.001dpcm) {
  @media {
    .row-margin-title-home {
      margin-top: 188px !important;
    }
  }
}
...et là pour tout dire, je suis en train d'en savoir plus sur la dimension dpcm (point par cm) que j'ai découvert et que j'ai un peu de mal à convertir en px (ou autre) dans ma petite tête... Afin d'ajuster tous les les media-queries Smiley ohwell
heu, je dois rêver, il n'y a quasiment aucune info sur les dimension en dpcm... Quelqu'un peut apporter quelques précision ? Smiley confus
J'ai trouvé ce convertisseur qui prend en compte la dimension en "dpcm"

En revanche, je n'ai pas trouvé comment adapter ce hack Safari pour les écrans à partir de 1024px (soit 403.1496dpcm Smiley rolleyes ) car je mon margin-top est différent pour les tablettes.

J'avais tenté :
@media not all and (max-resolution:403.1496dpcm) {
  @media {
    .row-margin-title-home {
      margin-top: 45px !important;
    }
  }
}


Mais sans succès, ça prend juste le pas sur mon premier hack Smiley confus
Modérateur
Bonjour,

La résolution n'a rien à voir avec la largeur du viewport. Pour une machine donnée, elle est fixe tout le temps, puisqu'il s'agit d'une densité de pixels.

Ton hack pour safari joue sur le fait que safari ne sait pas (ou plutôt ne sait pas encore) ce que c'est que l'unité dpcm.

1) il marche pour l'instant, mais si ça se trouve il ne marchera plus avec la prochaine version de safari.

2) tu peux mettre n'importe quelle valeur assez grande après max-resolution, ça fera la même chose quelque soit la largeur du viewport.

3) dpcm est une unité de densité, ce n'est pas une unité de longueur. Ça n'a aucun sens de vouloir convertir des dpcm en px.

4) c'est plus facile de mettre un min-resolution:.001dpcm qu'un max-resolution parce que comme ça, tu es sûr de ne pas te tromper.

5) pour bien faire, il faudrait trouver la vraie raison de ton problème d'affichage avec safari, mais ta page est un tel bazar qu'il faudrait de la chance pour trouver. C'est toujours le même problème avec les cms : pour afficher 3 malheureuses boites de couleurs différentes, ils ont besoin de 10 millions de lignes de code.

6) Tu ferais mieux de mettre tranquillement de l'ordre dans ton code et de le simplifier plutôt que d'utiliser ce genre de combine, vu que le bug a en fait des conséquences assez limitées.

7) En attendant, si tu veux avoir une règle css qui s'applique à safari uniquement en fonction de la largeur du viewport, tu peux par exemple utiliser le code ci-dessous (ici pour 1024px, à toi de voir s'il faut mettre min-width ou bien max-width). Il suffit en fait de mettre tes @media habituelles sur la 2e ligne de ce code :

@media not all and (min-resolution: .001dpcm) {
  @media screen and (max-width: 1024px) {
    .row-margin-title-home {
      margin-top: 45px !important;
    }
  }
}


Amicalement,
Modifié par parsimonhi (14 Nov 2020 - 10:13)
Ouf, quelle réponse ! Merci pour la clarté de tes explications et l'efficacité de ta solution !!!

Juste pour info, l'afflux de code est plutôt lié au thème qu'au CMS, Wordpress en l'occurence.
Ce site est ancien et bien que ce thème soit dans la catégorie premium, je n'en utilise plus d'aussi chargé en code aujourd'hui.
Et je ne peux envisager de re-développer ce site car, mis à part ce bug a priori "minime", le site tourne bien.

1) Ok noté
2) Noté également
3) "Densité" ? je te crois sans pb mais j'avoue que cette notion me dépasse un peu. Après, il est étonnant que l'on trouve des convertisseurs dpcm > px.
4) J'ai utilisé dpcm un peu à l'aveugle en tentant d'interpréter le hack trouvé sur Internet
5) et 6) Je confirme, le volume de code généré est important mais je ne vais pas re-développer ce site aujourd'hui

7) Génial donc puisque ta solution fonctionne parfaitement et je t'en remercie sincèrement !!!!! Smiley cligne