Site déformé à cause des différentes résolutions

[Calpurniaccélération]

Bonsoir,

Je suis webmasteur de 2 sites, que j'ai fais lorsque j'étais en résolution 800 x 600. J'ai changé de pc il y a peu et ai donc découvert qu'un de mes sites en particulier apparaissait totalement déformé avec une résolution supérieure à 800 x 600, alors qu'en 800 x 600 il a un super look.

Voici mon site: http://red.dog.free.fr

Pourriez-vous m'indiquer comment résoudre ce problème, comment faire pour que mon site soit affiché parfaitement quelque soit la résolution?
Merci.

[calimo]

C'est un problème typique des sites réalisés avec un éditeur WYSIWYG. Les blocs de la page sont positionnés sans cohérence, tout simplement parce que l'on ne peut pas savoir précisément comment ils le sont.

Par exemple sur lap age http://red.dog.free.fr/Menu.html , l'image "Red dog superior firepower" * est placée sur la droite, parce que tu ne t'es pas rendu compte qu'elle l'était, vu qu'elle était en fait le plus à gauche possible.
Il n'y a pas de solution mirâcle, et aucune technique "simple" pour ne pas avoir ce genre d'ennuis. La seule chose à faire, c'est, lors de la conçeption de la page, bien réfléchir à comment les éléments vont être placés, et imaginer toutes les configurations possibles (cela inclut également la diminution de la largeur, la présence ou non des polices que tu as choisies sur le poste de l'utilisateur, etc ). Et ne pas cliquer sur "aligner à droite" si ce n'est pas ce que tu souhaites.

D'autres techniques simples, utiliser des unités relatives (%, em) plutôt qu'absolues (px), etc.

L'avantage d'éditer manuellement tes feuilles de styles CSS, c'est que c'est toi qui réfléchira directement à comment tu veux positionner les choses. Ainsi tu n'aligneras pas à droite une image si tu veux qu'elle soit en fait à gauche !
Pour cela, il faut oublier quelques fonctions de ton éditeur de pages web et te plonger dans les CSS (tu verras, ça en vaut vraiment la peine)


* En plus cette image n'a pas de texte alternatif. C'est une grosse erreur ! (même si les images-liens en contiennent un).
Je te conseille un peu de lecture : http://www.la-grange.net/accessibilite/day_23.html (lis également les autres articles de la série )

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.4) Gecko/20060508 Firebird Firefox/1.5.0.4

[Calpurniaccélération]

Pour le texte alternatif, j'en ai pas mis sur la bannière effectivement, mais habituellement j'en met un peu partout.

Concernant la bannière, à ce propos, si je me suis parfaitement rendu compte que je l'avais mis totalement à gauche, mais j'ai fait çelà de cette façon qu'elle apparaissait le mieux avec resolution 800 x 600 et sur les différents navigateurs.

Donc, selon toi, si je veux vraiment que mon site s'affiche à la perfection partout, je dois le mettre en CSS?
N'y-t-il pas d'autres alternative?


Parce que "bien placer les élements" comme tu le dis, bon ça n'est que jouer sur des détails, mais à mon avis, ça ne peut resoudre totalement le problème (exemple dans les différentes sections de mon site, il y a un background, qui en haute résolution est totalement déplacé, et là on ne peut pas jouer sur "aligner", "centrer", etc...)

Donc, bon, apparemment il faut que je me mette au CSS, ça me garantira à 100% un affichage parfait?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

[calimo]

Ça ne garantit pas que ce sera parfait, ça c'est sûr ! (rien n'est parfait d'ailleurs !)
Mais ça te forcera à réfléchir, à tester diverses configurations, à essayer de trouver des solutions aux problèmes que tu auras pu trouver. Ça t'évitera de penser que puisque c'est bon dans ton éditeur, c'est bon partout

Pour l'arrière-plan, ça te donnera peut-être l'idée d'aller chercher dans la documentation CSS, et voir que tu peux également définir une couleur d'arrière-plan, afin que la transition ne soit pas aussi visible

http://www.yoyodesign.org/doc/w3c/css2/cover.html

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.4) Gecko/20060508 Firerenard Firefox/1.5.0.4

[Calpurniaccélération]

Non, je veux garder mon fond d'écran, je l'ai créé spécialement pour mon site.

Ce que je demande, c'est est-ce que le CSS est essentiel, et est-ce que comme çà, je ferais mon site tranquillement et il s'affichera automatiquement bien sur toutes les résolutions.

J'ai des tonnes de choses à faire, ça m'embête déja d'avoir à refaire totalement mon site, à y replacer tous les éléments, donc si je dois apprendre le CSS, je veux au moins que ce soit une méthode tout à fait éfficace.

[calimo]

Non, je veux garder mon fond d'écran, je l'ai créé spécialement pour mon site.

Je n'ai pas dit le contraire
Une couleur de fond est définie en plus de l'image, donc n'apparaît que là où il n'y a plus d'image (là où c'est noir actuellement)

Ce que je demande, c'est est-ce que le CSS est essentiel,

Oui, même si tu ne t'en rends pas forcément compte, c'est la base de toute mise en page

et est-ce que comme çà, je ferais mon site tranquillement et il s'affichera automatiquement bien sur toutes les résolutions.

Non, comme je l'ai dit, il n'y a pas de solution mirâcle, ça ne fera pas tout tout seul d'un coup de baguette magique . Comme je l'ai dit, c'est surtout que ça te poussera à réfléchir à ce que tu fais

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.4) Gecko/20060508 Firedragon Firefox/1.5.0.4

[Calpurniaccélération]

Mais qu'est ce que tu veux dire exactement?

Soit ça réglera tous les problèmes soit pas. Alors?

Je veux simplement apprendre le CSS si c'est essentiel, si c'est une méthode fiable, pour garder un design comme je le souhaite, et qui apparaisse bien partout. C'est pourtant simple.

J'ai fais tous le travail graphique, maintenant si ma page n'est pas capable d'afficher mes éléments correctement, c'est ennuyeux.

Ma bannière, mon d'écran, ou je ne sais quoi d'autre, que je les places au centre, collé a droite, en haut, collé au gauche, ou n'importe ou ailleurs, ils ne s'affichent jamais correctement quand la résolution change, en html il y aura toujours une "zone noire" et ou un truc qui fait tâche, c'est tout. Donc si le CSS peut régler çelà d'accord, sinon ce n'est pas la peine.

[calimo]

Mais qu'est ce que tu veux dire exactement?

Effectivement, on ne se comprend pas

Soit ça réglera tous les problèmes soit pas. Alors?

Le monde n'est pas binaire. Tout n'est pas blanc ou noir.

Donc, le CSS, c'est important, et tu en fais sans le savoir avec Nvu ou d'autres éditeurs WYSIWYG. Tu ne peux pas t'en passer, tu ne t'en passes pas, comme je l'ai dit c'est ce qui fait toute la mise en forme de toutes les pages.

Tout ce que je dis c'est qu'en sachant ce que tu fais (c'est-à-dire en codant toi-même tes CSS plutôt que de laisser faire Nvu), tu éviteras pas mal de pièges de ce genre, pensant que l'ordinateur fait quelque chose alors qu'il fait en fait autre chose.

C'est tout

Je le répète encore une fois, il n'y a pas de solution mirâcle qui résoudra tous tes problèmes d'un claquement de doigts. Juste du travail, des tests et de la réflexion

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.4) Gecko/20060508 Firedragon Firefox/1.5.0.4

[Calpurniaccélération]

Je m'en doute bien, et j'ai bossé énormément sur mon site en html, mais tu es quand même bien d'accord pour dire que mon background, que je le mette à gauche, à droite, en haut, en bas, ou au centre, on peut user de travail, de tests, et de reflexion comme tu dis, il appaitra toujours réduits sur les hautes résolution, donc ma question est simple, est-ce que mais qu'en faisant du CSS moi même, ce problème sera réglé? C'est tout.

Parce que là, je bien l'impression que je vais avoir à recadrer tous mon site, et apprendre le CSS pour faire tout çà, alors que j'ai passé des heures à faire tout bien en html, ça m'embète un peu.

[calimo]

Je m'en doute bien, et j'ai bossé énormément sur mon site en html, mais tu es quand même bien d'accord pour dire que mon background, que je le mette à gauche, à droite, en haut, en bas, ou au centre, on peut user de travail, de tests, et de reflexion comme tu dis, il appaitra toujours réduits sur les hautes résolution, donc ma question est simple, est-ce que mais qu'en faisant du CSS moi même, ce problème sera réglé? C'est tout.

Ben non, comme je l'ai dit, il n'y a pas de miracles, ton image a une taille fixe et ça tu ne pourras pas le changer (à moins de la refaire).

Mais j'ai également indiqué que tu pouvais également définir une couleur de fond pour qu'à droite de l'image il y ait une couleur qui rende la fin de l'image plus discrète

Il faut que je le répète encore combien de fois ?

Parce que là, je bien l'impression que je vais avoir à recadrer tous mon site, et apprendre le CSS pour faire tout çà, alors que j'ai passé des heures à faire tout bien en html, ça m'embète un peu.

Tu ne l'as pas fait en html, tu as fait du css, même si tu ne t'en es peut-être pas rendu compte

[Calpurniaccélération]

Oui, enfin ne joue pas sur les mots :-p
Je veux dire que je l'ai fait en "html" avec Nvu qui lui a fait du CSS :-p

Bon, mais alors comment font les autres sites avec leur background qui s'affichent toujours nickel partout? Il doit bien y avoir un moyen.

Tu as un lien ou on peut apprendre le CSS? Mais seulement pour les fonctions que je desire utiliser, je n'ai pas besoin d'une documentations de 20 pages pour recadrer deux boutons et une bannière.

[calimo]

Oui, enfin ne joue pas sur les mots :-p
Je veux dire que je l'ai fait en "html" avec Nvu qui lui a fait du CSS :-p

Avec Nvu, tu ne fais pas de HTML, c'est Nvu qui le fait

Bon, mais alors comment font les autres sites avec leur background qui s'affichent toujours nickel partout? Il doit bien y avoir un moyen.

Ben déjà beaucoup de sites ont un fond uni. Il est évident que ça simplifie fortement les choses.

Les autres peuvent soit :

• avoir une image plus grande (mais bon, il y a toujours un moment où ça passe plus) ;
• s'arranger pour que ça ne se voie pas (par exemple une image qui se fond dans la couleur de fond, etc.) ;
• avoir une largeur fixe (quitte à ressembler à un timbre poste sur un grand écran).

Tu as un lien ou on peut apprendre le CSS? Mais seulement pour les fonctions que je desire utiliser, je n'ai pas besoin d'une documentations de 20 pages pour recadrer deux boutons et une bannière.

Looool
Essaye de t'intéresser à ce que tu fais

Tu as une introduction à la syntaxe ici : http://www.tuteurs.ens.fr/internet/web/html/css.html (n'hésite pas aussi à visiter la partie traitant du HTML, c'est très instructif !)
La spécification CSS2 qui contient tout ce qu'il faut : http://www.yoyodesign.org/doc/w3c/css2/cover.html
Un tuto très bien fait (mais il doit bien faire 20 pages : http://www.siteduzero.com/tuto-3-6-0-ap ... e-web.html

Ah oui, une dernière chose, le CSS c'est un tout, et si tu veux que ton site soit cohérent, ça va te demander un minimum de travail

[Calpurniaccélération]

Tiens regarde ce site par exemple: http://www.jdcv.amelior-prod.info/

C'est un site en CSS tout ce qu'il y a de plus classique.

Bon, bref il y a un cadre, et tout le site est dans ce cadre, il suffit d'aller de gauche à droite, ça se feuillette comme livre
Bon, voilà, un site en CSS standard.

Bon, le background a l'intérieur du cadre, il est bien, parfaitement positionné, un croissant de la Terre en son socle, bref tout est net, et je puis être certain que ce background ne va pas se rétrécir en laissant apparaitre un gros blanc si je change de résolution!

Et bien voilà, c'est ce que veux pour mon background moi aussi.

[Calpurniaccélération]

Non, mais soyons clair, Nvu fait du WYSIWYG, mais si l'on veux des resultats optimum, il faut savoir soi-même faire du html, et donc personnellement je passe plus de temps à travailler dans la source html qu'en automatique.

Concernant le CSS, je m'interesse énormément à ce que je fais, j'ai bossé énormément sur mes sites, et ça m'a passioné. Seulement un jour je me rend compte qu'ils n'apparaissent pas correctement sur les hautes résolutions, y'a de quoi être dépité. Moi qui ait passé tellement de temps sur mes sites, il va falloir que je me coltine de long tutoriaux de CSS pour qu'ils apparaissent correctement, c'est trés chiant, je n'ai pas que ça à faire.
Surtout que le CSS, je ne pas trouve ça extra, je veux dire, tous les sites en CSS sont fait sur la même base, tout est encadré, listé, etc... c'est assez générique.

Je ferai peut-être mieux d'apprendre directement à faire du flash.

Ca m'embête, en ce si bel été, d'avoir à refaire mes sites entièrement en CSS

[Flore]

Surtout que le CSS, je ne pas trouve ça extra, je veux dire, tous les sites en CSS sont fait sur la même base, tout est encadré, listé, etc... c'est assez générique.

Mon dieu ! Tu veux dire que ces sites ont un balisage sémantique et qu'on s'y retrouve . Inconcevable... C'est un peu comme si tous les livres étaient divisés en chapitres et en paragraphes, qu'est-ce que ce serait barbant. Je ne vous raconte pas si en plus, ils se mettaient à nous coller des numéros sur les pages.

trêve de plaisanteries...
Forcément que tout est balisé, encadré dans des div ou des balises significatives. Ca s'appelle de la sémantique. C'est indispensable.

Et ne rêve pas, ton site n'aura jamais la même tête quelle que soit la résolution d'écran, l'écran lui même ou le navigateur ou l'OS. Ou bien tu en fais un guide en pdf et là tu es sûr que c'est bien statique et que rien ne bougera.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1b1) Gecko/20060710 Firefox/2.0b1