W3C, affichage, resolution et navigateur

[feyesh]

Bonjour à toutes et à tous.

Après avoir longuement bataillé pour que mon site soit valide w3C, et qu'il s'affiche correctement sur différents navigateurs, je m'aperçois que l'affichage est encore chamboulé sur diverses résolutions d'écran.

J'utilise des css , mes valeurs sont exprimées en px.

Comment faire en sorte d'avoir un site à l'affichage homogène , quel que soit la configuration de l'internaute ?

Merci d'avance de vos lumières .

[Sarc]

Bonjour,

Il est "quasiment" impossible d'avoir un design qui marche correctement sur toutes les configurations... L'important, c'est de faire le maximum pour qu'il le soit sur un maximum d'écran ! En général, il faut éviter les designs fluides, qui s'adaptent totalement à la taille de l'écran. Sinon, forcément, si tu réduis la fenêtre, les éléments vont finir par se rentrer dedans...

Il faudrait que tu nous donnes l'URL de ton site pour qu'on puisse voir ce qui ne va pas exactement. Sinon, on aura du mal à t'en dire plus !

[ghost]

Salut,

La validation ne "valide pas" le fait que ton site soit "compatible" avec tous les navigateurs mais juste que l'orthographe et la grammaire de ton code résultant html et css soit corrects.

C'est vrai que ça aide, ça oblige chaque navigateur à utiliser sa manière à lui d'interpréter les standards (chacun la sienne) en évitant en cas d'erreur de code une interprétation "libre" de ton code afin d'essayer d'afficher tes page. En fait c'est juste "moins pire "

Modifié 28 Février 2009 par ghost

[Dudu]

Entièrement d'accord avec ghost: c'est précisèment la différence entre "validité" et "conformité".

Le validateur w3c, comme son nom l'indique, ne vérifie que la validité.

[paolodelmare]

Feyesh, tu touches du doigt le souci majeur de tous les intégrateurs : les caprices des navigateurs (allez, surtout un)

Si ton HTML est propre, c'est déjà un bon point. ultérieurement, tu peux perfectionner ton code en vérifiant sa sémantique, réduire les balises au juste besoin etc

Les pb d'affichages sont essentiellement liés aux CSS, interprétés (comme cela vient d'être écrit) différemment selon les moteurs de rendus.

De plus, certains navigateurs (allez, surtout un) gèrent mal certaines images (png).

Pour que ton site s'affiche correctement sur d'autres navigateurs que celui sur lequel tu as travaillé, il faut adapter les css et rechercher les hacks publiés sur le net.

Une autre solution (pour ie) est d'utiliser les commentaires conditionnels dans le html afin de charger une feuille de style en fonction du navigateur.

Les designs fluides ou liquides sont difficiles à implémenter et souvent peu robustes. on corrige ce problème avec des min/max-width pour autoriser l'adaptation dans une certaine plage

Les designs trop statiques risquent d'obliger l'internaute à scroller horizontalement (ça c'est mal)

Les designs élastiques permettent d'adapter le design à la taille des caractères.

Le mieux est souvent d'observer le (bon) travail des autres dans les sites de layouts et de s'en inspirer.

Il existe aujourd'hui plusieurs services permettant de voir son travail sur une multitude d'os/navigateurs, comme litmus ou browsershots.

Bon courage!

[feyesh]

Merci à tous pour vos réponses.

En faite, pour être précis, je pensais plutot au faite que l'affichage se fait mal à cause de l'emploi de "px" dans ma css, et j'ai cru comprendre qu'il valait mieux utiliser des " %" . Mais je ne sais comment changer l'unité de mesure (px ) vers ( % ) en conservant l'existant intacte.

Le souci, c'est que si l'internaute utilise une résolution qui dépasse une largeur de 800, le résultat est affreux, les box se superposent etc.

Et aujourd'hui les écrans ont tendances à être de plus en plus grand. évidemment, sur mon modeste 14 pces, pas de pb .

[paolodelmare]

Tout est là http://www.pompage.net/pompe/designelastique/