[Résolu]Problème de mise en page entre différents résolution

Bonjour

J'ai un problème avec un design fait pour une résolution de 1024*768 :

La page posant problème se situe ici http://www.rpgstudio.org/sitealsace2.htm

en gros mon designeur me dit que chez lui sous IE 6 ou opera 7 avec une résolution de 1024 * 768 le design occupe bien toute la page (sans aucune bande blanche à droite et à gauche et sans barre de scroll horizonthale bref le design colle pile poile à la résolution ) alors que moi et un ami avec la même résolution avons une bande blanche sous IE 6 à droite et à gauche d'une largeur d'environ 1 cm et sous opera 7 j'ai une grande bande blanche de 6-7 centimètres à droite alors qu'à gauche le design est bien collé !

Ne sachant ni lui ni moi comment résoudre ce problème je demande aux boss de ce forum en css de nous aider.

Le problème doit se situer sur la largeur du header et / ou du contenu mais lui comme moi ne comprenons pas comment entre différents ordinateurs aillant la même résolution et le même navigateur des problèmes de mise en page différent apparaissent.

Le design de la page http://www.rpgstudio.org/sitealsace2.htm devrait en théorie s'afficher sur toute la page sans aucune barre de scroll horizonthale et sans aucune bande blanche à gauche et à droite avec une résolution de 1027 * 768.

Y'a t'il une meilleure solution pour faire un design qui s'adapte à la résolution des utilisateurs que de faire un design en 800*600 et un design en 1026 * 768 et de rediriger le visiteur en fonction de sa résolution et sans utiliser de tableau d'une largeur de 100 % ? ? (je ne fais que deux designs différents car ces deux résolutions sont celles les plus utilisées par les utilisateurs).

Merci d'avance pour votre aide, vos tutoriaux sont supers et très clair ! Du bon boulot, vraiment !
Modifié par tidou (13 Jun 2005 - 12:01)

ca risque pas d'occuper tte la page en 1024 puisque le conteneur fait 955px (width: 955px;)
s'il veut occuper toute la page il faut qu'il fasse 100%, sinon il donne la couleur de fond verte au background du body et fixe le conteneur à 800px. (ca centre le conteneur sur la page avec un fond vert)
Modifié par benny (12 Jun 2005 - 23:38)

J'avais écrit une bêtise...j'efface!
Modifié par bouquins (13 Jun 2005 - 07:35)

Bonjour,

Je ne comprends pas très bien ce code :

#conteneur {
position: absolute;
width: 955px;
left: 50%;
margin-left: -480px;
background-color:#309429;
}

Pourquoi ne pas s'inspirer de ce modèle qui s'adapte à toutes les résolutions :

http://css.alsacreations.com/modeles/modele6.htm

Vero a écrit :
Bonjour,

Je ne comprends pas très bien ce code :

#conteneur {
position: absolute;
width: 955px;
left: 50%;
margin-left: -480px;
background-color:#309429;
}

Pourquoi ne pas s'inspirer de ce modèle qui s'adapte à toutes les résolutions :

http://css.alsacreations.com/modeles/modele6.htm

Bonjour

Je n'avais pas vu qu'il y avait des modèles, ils sont en effet très bien mais il reste néamoins un problème : j'ai prit le modèle que tu propose en mettant mon header avec une largeur et hauteur de 100%, ca marche bien comme je veux mais le seul problème c'est que l'image est bien sur déformer : y'a t'il moyen de ne pas avoir cette déformation ? Une chose qui me vient tous de suite à l'esprit et de créer une image par résolution et de charger la bonne image en fonction de la résolution du visiteur ainfi de ne pas avoir de déformation de l'image qu'en pense-tu ?

Est-ce que quelqu'un a un site qui présente un graphique avec les % des résolutions des internautes francais et si possible le plus récent possible ?

1 - Il faut que tu oublies de faire plusieurs versions : il y a des moyens pour t'adapter à toutes et un secret : ne pas vouloir tout contrôler ...

2 - Je te conseille de faire un tour dans les tutoriels et de commencer par celui-ci :

http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-css

3 - L'idée est de séparer le contenu de la forme. En l'occurence, ton image étant décorative, tu pourrais la déclarer en css (en fond de ton header) et non dans ton code html. De plus, dans ce dernier, tu déclares une taille pour ton image :

<div id="header">[b]<img src="header.jpg" alt="" width="955"/>[/b]</div>

Oki oki mais en faite je ne suis pas le designeur de ce site ce n 'est pas moi qui ai fait tout cela.

Pour la taille de l'image et le fait qu'elle ne soit pas en fond du header je suis daccord ca aurait été changé.

a écrit :

1 - Il faut que tu oublies de faire plusieurs versions : il y a des moyens pour t'adapter à toutes et un secret : ne pas vouloir tout contrôler ...

Je suis daccord mais le problème de l'étirement de l'image du header reste toujours là et pour moi à moins que tu me donne une autre solution, le seul moyen de ne pas avoir une image déformée et de faire une image par résolution (une image pas un design).

Comment règler le problème de l'étirement de l'image (et donc de sa déformation) si on lui donne une largeur et une hauteur de 100% ?
Modifié par tidou (13 Jun 2005 - 10:36)

Tu ne pourras pas résoudre les problèmes au cas par cas si tu n'investis pas un peu dans ton apprentissage.

La réponse à ta question t'a été donnée dans le point 3 de mon post précédent : si ton image ne mesure pas 955 px, c'est normal qu'elle soit déformée puisque c'est la taille qui est spécifiée pour son affichage ...

Je t'invite à lire également les
règles du forum et notamment le point 16.


Modifié par Vero (02 Sep 2005 - 17:46)

Tiens, j'ai retrouvé cela pour toi :

http://blog.alsacreations.com/2004/05/21/8-faire-un-arriere-plan-etirable

Et puis cela aussi :

http://css.alsacreations.com/Tutoriels-et-articles-divers/Faire-un-site-pour-toutes-les-resolutions

ok ok j'en retient cela

a écrit :

Attention : avec cette méthode, l'image risque d'être très déformée puisque les proportions (hauteur / largeur) ne sont pas respectées.Si vous voulez que les proportions soient gardées, il vous suffit de ne spécifier que la dimension qui devra s'élargir (width OU height)... l'autre dimension va s'adapter mais dans ce cas n'occupera plus 100% de l'espace.

et aussi

a écrit :

Ensuite, il faut bien être conscient qu'un site fluide est fait pour être déformé (il va s'adapter aux résolutions en s'élargissant ou en se rétrécissant). Il faut donc "penser" le design et la mise en page en fonction de ce paramètre important. Il est inutile donc d'espérer faire un site fluide à partir d'un design entièrement graphique fait intégralement sous Photoshop par exemple.

Donc j'en conclus qu'il est impossible d'avoir un site avec des éléments graphiques (comme ma grande image du header) qui s'adapte aux différentes résolutions des visiteurs sans avoir le problème de déformation des images (dans mon cas de l'image de mon header).

Mais est-ce qu'il y a une solution alors ? Le fait de créer une image de header spécialement adaptée à chacune des résolutions (disons en faire deux ou trois pour les résolutions les plus utilisées) est une solution non ? Il n'y en a pas d'autre ?
Modifié par tidou (13 Jun 2005 - 11:19)

Non, il n'y a pas de solution pour s'adapter à toutes les résolutions et contrôler l'apparence du design au px.

Pour que ton image ne soit pas déformée, il faut qu'elle s'affiche dans sa taille d'origine.
Si tu veux qu'elle s'adapte, il faut accepter qu'elle soit déformée ...

Concevoir plusieurs versions de sites pour l'affichage d'une image décorative est une perte de temps. D'autres objectifs autrement plus sérieux et délicats (comme l'accessibilité du web par des navigateurs non visuels) évitent d'avoir recours à cela.

Comment peux-tu prévoir à l'avance, le média utilisé pour visiter ton site ?
(lecteur vocaux, téléphones portables, etc ...)

Les pros ont, depuis longtemps, abandonner cette idée là ... elle n'est pas viable et l'expérience passée l'a prouvé !

ok c'est ce que je voulais savoir depuis le début : "y'a t'il une solution ou non" et concernant les utilisateurs avec (lecteur vocaux, téléphones portables, etc ...) je ne les ciblent pas pour le moment vu leur faible nombre (dans ce cas la je devrais aussi faire une version optimisée pour Linx par exemple) et j'adapterai le design si leur nombre devient conséquent.

Merci

Bon, j'ai commencé, je finis :

Un petit résolu alors !


Modifié par Vero (13 Jun 2005 - 11:59)