Bonjour à toutes et à tous,

Je suis entrain de créer un site web, son graphisme prend toutes la largeur de la page. Afin qu'il soit visible sur toutes les résolutions d'écrans, on m'a conseillé de tout mettre en pourcentage, ce que j'ai donc fait. Cependant l'affichage sur ie8 est catastrophique et l'affichage sur les autres résolutions avec d'autres navigateurs est plutôt moyen. J'ai donc fait des recherches via google mais aucune réponse ou information m'a vraiment aidé quand à faire un site web visible sur toutes les résolutions d'écrans.

Je vous donne donc l'adresse du site où il est hébergé pour le moment pour le tester: http://trentehuitbis.com/arnaud/bellerive-kayak/

Voici donc le code html:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
<head> 
<title>Vichy-Kayak/Sport en eaux vives/sorties kayak en Auvergne-Allier-Vichy/sport d'eaux vives à vichy</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="language" content="fr"> 
<meta name="keywords" content="kayak,kayak vichy, sport vichy," > 
<meta name="description" content=" Vichy - Kayak, kanoé-kayak,site officiel de Vichy-Kayak / Sortie Kayak en Auvergne-Allier-vichy / sport / Du sport en Auvergne ? sport d'eaux vives ? c'est au club de Vichy-Kayak" > 
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.diaporama.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!--[if lte IE 8]> 
<script type="text/javascript" src="js/roundies.js"> </script>
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" media="screen" href="styles_ie8.css">
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="styles_ie7.css">
<![endif]-->
</head>
<body>
 
<!--banniere-->
<div><img class="banniere" src="image/logo/logo_kayak.png" alt=""></div>                 
 
<!--cadre arrondi centre de la page-->
<div class="corps"></div>
 
<div><img class="ornement_droite" src="image/ornement_droite.png" alt=""></div>
<div><img class="ornement_gauche" src="image/ornement_gauche.png" alt=""></div>
 
<!--diaporama jquery-->
<ul class="diaporama">
   <li><img src="image/photo_diapo/photo.jpg" class="photo_diapo" alt=""></li>
   <li><img src="image/photo_diapo/photo1.jpg" class="photo_diapo" alt=""></li>
   <li><img src="image/photo_diapo/photo2.jpg" class="photo_diapo" alt=""></li>
   <li><img src="image/photo_diapo/photo3.jpg" class="photo_diapo" alt=""></li>
   <li><img src="image/photo_diapo/photo4.jpg" class="photo_diapo" alt=""></li>
   <li><img src="image/photo_diapo/photo5.jpg" class="photo_diapo" alt=""></li>
   <li><img src="image/photo_diapo/photo6.jpg" class="photo_diapo" alt=""></li>
   <li><img src="image/photo_diapo/photo7.jpg" class="photo_diapo" alt=""></li>
   <li><img src="image/photo_diapo/photo8.jpg" class="photo_diapo" alt=""></li>
   <li><img src="image/photo_diapo/photo9.jpg" class="photo_diapo" alt=""></li>
   <li><img src="image/photo_diapo/photo10.jpg" class="photo_diapo" alt=""></li>
</ul>
 
<!--menu-->
<div><a href="index.html"><img class="menu_accueil" src="image/menu/accueil_noir.png" onmouseover="this.src='image/menu/accueil_vert.png';" onmouseout="this.src='image/menu/accueil_noir.png';" alt=""></a></div>
<div><a href="assos.html"><img class="menu_assos" src="image/menu/assos_noir.png" onmouseover="this.src='image/menu/assos_bleu.png';" onmouseout="this.src='image/menu/assos_noir.png';" alt=""></a></div>
<div><a href="initiation.html"><img class="menu_initiation" src="image/menu/initiation_noir.png" onmouseover="this.src='image/menu/initiation_orange.png';" onmouseout="this.src='image/menu/initiation_noir.png';" alt=""></a></div>
<div><a href="sorties.html"><img class="menu_sortie" src="image/menu/sorties_noir.png" onmouseover="this.src='image/menu/sorties_rouge.png';" onmouseout="this.src='image/menu/sorties_noir.png';" alt=""></a></div>
<div><a href="#"><img class="menu_contacter" src="image/menu/contacter_noir.png" onmouseover="this.src='image/menu/contacter_jaune.png';" onmouseout="this.src='image/menu/contacter_noir.png';" alt=""></a></div>
<div><a href="#"><img class="menu_remerciement" src="image/menu/remerciement_noir.png" onmouseover="this.src='image/menu/remerciement_violet.png';" onmouseout="this.src='image/menu/remerciement_noir.png';" alt=""></a></div>
 
<!--sous titre-->
<div class="sous_titre">Bienvenue sur le site des kayakistes de Bellerive</div>
 
<!--paragraphe-->
<div class="paragraphe"><span class="text_gras">Une association de passionnés de kayak</span> créée pour se faire plaisir pagaie à la main...<br><br>
Notre club est en cours d'agrément à la " Direction départementale de la jeunesse et des sports de l'Allier ". Nous sommes en train de préparer 
l'acquisition d'un raft afin <span class="text_gras">d'élargir le pannel de nos activités.</span></div>
<div class="paragraphe2">Cela nous permettra de <span class="text_gras">faire découvrir la rivière artificielle de Vichy</span> ainsi que des 
rivières naturelles (Isère...) à certains de nos membres ou amis.</div> 
 
<div><img class="paysage" src="image/paysage.jpg" alt=""></div>
 
<div class="footer">Site Internet créé par Arnaud OLIVIER</div>
 
<div><img class="herbe" src="image/herbe.png" alt=""></div>
 
</body>
</html>
et le code css:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
* { margin:0; padding:0 }
 
body
{color:#5e5e5b;
font-family:Verdana,Arial,Helvetica,sans-serif;
background-position:top left;
background-color:white;
font-size:62.5%;}
 
a img
{border:none;}
 
.banniere
{position:absolute;
left:25%;
top:0.62%;
width:50%;
height:8.75%;}
 
.corps
{border:2px solid #CECECE;
width:84%;
height:53%;
position:absolute;
left:8%;
top:19%;
background-color:white;
-moz-border-radius:25px;/*firefox*/
-webkit-border-radius:25px;/*safari et chrome*/}
 
/*diaporama photo*/
.diaporama li
{list-style-type:none;
overflow:hidden;
position:absolute;
left:62.5%;
top:30%;
margin-right:2%;}
 
.footer
{width:23.4%;
border:1px solid black;
color:black;
text-align:center;
font-size:10px;
font-family:Arial,Verdana,Helvetica,sans-serif;
position:absolute;
left:38.3%;
top:75%;}
 
.herbe
{position:absolute;
left:0%;
bottom:0%;
height:18.7%;
width:100%;}
 
/*menu*/
.menu_accueil 
{position:absolute;
left:22.5%;
top:11.25%;
width:9%;
height:5%;}
.menu_assos 
{position:absolute;
left:32%;
top:11.25%;
width:9%;
height:5%;}
.menu_initiation 
{position:absolute;
left:41.4%;
top:11.25%;
width:9%;
height:5%;}
.menu_sortie 
{position:absolute;
left:50.8%;
top:11.25%;
width:9%;
height:5%;}
.menu_contacter
{position:absolute;
left:60.19%;
top:11.25%;
width:9%;
height:5%;}
.menu_remerciement
{position:absolute;
left:69.6%;
top:11.25%;
width:9%;
height:5%;}
 
.ornement_droite
{position:absolute;
right:2.1%;
top:6.2%;
height:18.75%;
width:8%;}
 
.ornement_gauche
{position:absolute;
left:6.25%;
top:7.5%;
height:18.75%;}
 
html:first-child .ornement_gauche
{position:absolute;
left:6.25%;
top:6%;
height:18.75%;}
 
.paragraphe
{position:absolute;
left:16.40%;
top:29%;
font-size:1.4em;
width:39%;
height:5%;
text-align:justify;}
 
.paragraphe2
{position:absolute;
left:32.8%;
top:52%;
font-size:1.4em;
width:27%;
text-align:justify;}
 
.paysage
{position:absolute;
left:16.40%;
top:50%;
width:15%;
height:18%;
margin-top:1%;}
 
.photo_diapo
{width:80%;
height:30%;}
 
.sous_titre
{position:absolute;
left:19.53%;
top:22%;
border:2px solid #5e5e5b;
padding:0.5%;
font-size:20px;}
 
.text_gras
{font-weight:bold;}
J'espère avoir été le plus clair possible et merci par avance de votre aide