[Résolu] Décalage images suivant résolution écran

Bonjour

Je débute et j'essaye de refaire le site d'un contact car il y a trop d'erreurs.

La 1ère page est conforme W3C mais j'ai un problème sur 3 images alignées, celles qui sont en-dessous le bouton "accès" ici : en 1024x768 c'est ok, mon contact est en 1680x1050 et les deux 1ères images sont décalées à gauche, que ce soit sous IE 7 ou FireFox.

Entre-temps j'ai modifié : le lien concerne mes nouveaux codes plus bas.

Codes qui posaient problèmes :

Code HTML

<div id="images5_6_7">
<div class="image5"><img src="index/tir3boniou_250.jpg" width="250" height="403" alt="" /></div>
<div class="image6"><img src="index/canopus1_280.jpg" width="300" height="221" alt="" /></div>
<div class="image7"><img src="index/canopus3_200.jpg" width="220" height="301" alt="" /></div>
</div><br />

Code CSS ancien des 3 images

#images5_6_7
{
    width:90%;
    height:410px;
	margin:auto;
	float:none;
}
.image5
{
    float:left;
}
.image6
{
    float:left;
	margin-left:10px;
	margin-top:80px;
}
.image7
{
    float:right;
}

Code CSS ancien de la page

body
{
width:90%;
margin-top:20px;
margin:auto;
background-image:url(index/630B1604.jpg);}

Je pensais que ça ne se faisait qu'avec les écrans au rapport 1/6 mais je viens de tester en 800x600 et pratiquement tout se mélange, quelles sont mes erreurs ?

C'est pour cela que j'ai mis le code CSS de taille de la page bien que j'ai essayé également en mettant 770px au lieu de 90% mais à 770px tout se mélange

Modification : on m'a dit de ne pas mettre en % la taille de la page si je mets les marges en px.
J'ai choisi la taille 980px pour une résolution en 1024x768. Là rien n'a l'air de se déplacer et toute la page bien centrée.
Svp, est-ce que je peux laisser comme cela pour des résolutions supérieures ou est-ce que dois tout mettre en % pour que la page soit plein écran ? Merci de vos conseils.

Nouveaux codes :

Code CSS nouveau de la taille de la page :

body
{
width:980px;
margin-top:20px;
margin-bottom:20px;
margin:auto;
background-image:url(index/630B1604.jpg);

Code CSS nouveau des 3 images :

#images5_6_7
{
    width:900px;
    height:410px;
	margin:auto;
}
.image5
{
    float:left;
}
.image6
{
    float:left;
	margin-left:65px;
	margin-top:80px;
}
.image7
{
    float:right;
}

J'ai compris que j'étais en train de faire la page en "fluide" et là ça me dépasse.
Modifié par Auguste (21 Apr 2008 - 07:37)