Chrome et Safari

[ddehem]

Bonjour,

quelqu'un pourrait'il me dire comment faire pour que Chrome et Safari affichent le même résultat que les autres navigateurs pour un site. J'ai été voir sur Google, mais leurs explications sont en anglais et là je ne suis pas très calé

Le site en préparation est http://www.torothentique.com que je conçois pour un membre de ma famille..

Merci d'avance pour votre aide.

ddehem

Je précise, que je ne suis pas du tout calé en informatique et que j'avance à tâton, à 59 ans on comprend moins vite qu'à 30 ou 40

[Dylav]

Je ne connais ni Chrome ni Safari, mais je crois qu'il ne faut pas partir sur l'idée d'un rendu strictement identique. Voici plutôt quelques pistes pour éviter les pièges (liste non exhaustive),

• se conformer aux recommandations du W3C, et le vérifier en passant au filtre des validateurs les codes des pages XHTML et des feuilles de style CSS,
  
• se contraindre à une définition souple et modulaire de chaque page, en n'oubliant pas la diversité des définitions d'écrans des visiteurs du site (proportionnalités, etc.),
  
• ne pas oublier les handicapés visuels, en particulier en s'interdisant l'artifice de la mise en page par le truchement de tableaux (ce détournement est catastrophique pour les dispositifs vocaux qui décrivent le contenu d'une page), et en agrémentant les images de textes alternatifs significatifs...
  

Si tu ne l'as déjà fait, jette un œil sur “Passer du HTML...”, et en particulier sur les posts #7, #10 et #13

[Nogi]

Bonsoir ddehem,

 

J'ai regardé ton code source(Ctrl U) et j'ai remarqué que tes "height" sont en pourcentages sur tes photos(ce qui n'est pas supposé), dont celle pour ton triangle central. Je suis allé voir sur Google Chrome et Safari et effectivement, elle s'étire en son milieu, propablement causée par le % .... il te faudrait les mettrent en pixels(px). Ça devrait être mieux!

 

Nogi

[Dylav]

Bonjour Nogi, bonjour Ddehem,

 

En réalité, le dimensionnement en pourcentage fonctionne parfaitement*. Le problème, c'est qu'une définition width:100%;height:100%; étale l'image sur la totalité de son conteneur. Ainsi, si la proportion entre largeur et hauteur n'est pas la même pour ces deux objets, l'image sera déformée.

 

La solution, c'est de n'imposer qu'une seule dimension (le rapport entre les dimensions de l'image sera préservé). Je te conseille alors de choisir width:100%; afin de remplir en priorité toute la largeur du conteneur (avec le risque d'une hauteur démesurée si l'écran est très “plat”, comme les nouveaux écrans en 16/10èmes). L'autre choix est plus aléatoire, car les hauteurs en pourcentage ne sont pas toujours prises en compte.

 

Quant à la définition en pixels, elle nécessiterait un script de calcul, puisque le conteneur lui-même n'a pas de dimensions fixes (définition d'écran du visiteur, largeur du bloc-menu sidebar1). Pas facile à mettre au point... et attention au visiteur qui désactive JavaScript par mesure de sécurité

__________

* en fait, le “rendu” de l'image n'est pas garanti. Il est toujours préférable d'utiliser un produit de retouche d'image pour redimensionner une image. Dans ce cas néanmoins, il faudrait prévoir plusieurs images, avec un script qui choisit l'image à afficher en fonction de la résolution d'écran du visiteur.