Discussion :

[Nerull]

Bonjour a tous !

c'est un sujet hyper traité mais j'ai toujours du mal ...
Je cherche a adapter mon site a toutes les résolutions grâce aux % .
J'ai fais mon site avec Dreamweaver CS3 , malheureusement , mon écran étant en 1680x1050 mon site est adapté pour moi et les grandes résolutions

J'ai regardé de partout en rajoutant :
body{width:100%;}
ou en créant un tableau et mettant tout mon site dedans ... Bref je ne sais plus quoi faire ...

Voici mon 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
/* Global Styles */
 
body {
    width: 100%;
	margin:0px;
	}
 
td {
	font:11px Verdana, Arial, Helvetica, sans-serif;
	color:#003366;
	}
 
a {
	color: #FF6600;
	font-weight:bold;
	}
 
a:hover {
	color: #3366CC;
	}
 
/* ID Styles */
 
#navigation td {
	border-bottom: 2px solid #C0DFFD;
	}
 
#navigation a {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	line-height:16px;
	letter-spacing:.1em;
	text-decoration: none;
	display:block;
	padding:8px 6px 10px 26px;
	background: url("mm_arrow.gif") 14px 45% no-repeat;
	}
 
#navigation a:hover {
	background: #ffffff url("mm_arrow.gif") 14px 45% no-repeat;
	color:#FF6600;
	}
 
#logo 	{
	font:24px Verdana, Arial, Helvetica, sans-serif;
	color: #CCFF99;
	letter-spacing:.2em;
	line-height:30px;
	}
 
#tagline 	{	
	font:12px Verdana, Arial, Helvetica, sans-serif;
	color: #FF9933;
	letter-spacing:.4em;
	line-height:18px;
	}
 
#monthformat {
	border-bottom: 2px solid #E6F3FF;
		}
 
#dateformat {
	font:11px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	letter-spacing:.2em;
	}
 
#dateformat a {
	font:11px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	font-weight:bold;
	letter-spacing:.1em;
	}
 
#dateformat a:hover {
	color: #FF6600;
	letter-spacing:.1em;
	}
 
/* Class Styles */
 
.bodyText {
	font:11px Verdana, Arial, Helvetica, sans-serif;
	color:#003366;
	line-height:20px;
	margin-top:0px;
	}
 
.pageName{
	font: 18px Verdana, Arial, Helvetica, sans-serif;
	color: #3366CC;
	line-height:24px;
	letter-spacing:.2em;
	}
 
.subHeader {
	font:bold 10px Verdana, Arial, Helvetica, sans-serif;
	color: #3366CC;
	line-height:16px;
	letter-spacing:.2em;
	}
 
.quote {
	font: 20px Verdana, Arial, Helvetica, sans-serif;
	color: #759DA1;
	line-height:30px;
	}
 
.smallText {
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	}
 
.navText {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	line-height:16px;
	letter-spacing:.1em;
	text-decoration: none;
	}

Je met un lien vers mon site afin de mieux comprendre mon problème : EXEMPLE

Merci beaucoup de votre aide

[Damouille]

Bonjour,

Cela ne suffis pas de mettre 100% sur le body pour que celui-ci s’adapte automatiquement. Si les éléments à l’intérieur de ton body son plus large que l’écran, le site « scrollera » horizontalement.
Tu as 2 images alignées horizontalement, l’une de 690px et l’autre de 211px + une colonne à gauche et des margins. Donc c’est normal que cela ne tienne pas dans un écran standard.

Tu peux rajouter :

img {
width: 100%;
}

A la fin de ta feuille de style et les images devraient s’adapter à l’écran. Mais cela risque d’être moche et d’entraîner un déformement de tes images.

Bon courage.

[Nerull]

Bonjour,

Cela ne suffis pas de mettre 100% sur le body pour que celui-ci s’adapte automatiquement. Si les éléments à l’intérieur de ton body son plus large que l’écran, le site « scrollera » horizontalement.
Tu as 2 images alignées horizontalement, l’une de 690px et l’autre de 211px + une colonne à gauche et des margins. Donc c’est normal que cela ne tienne pas dans un écran standard.

Tu peux rajouter :

img {
width: 100%;
}

A la fin de ta feuille de style et les images devraient s’adapter à l’écran. Mais cela risque d’être moche et d’entraîner un déformement de tes images.

Bon courage.

Bon je vais essayer !
je rajoute :
img {
width: 100%;
}

je nai rien a rajouter ailleurs ?

[Erwan31]

A la fin de ta feuille de style et les images devraient s’adapter à l’écran. Mais cela risque d’être moche et d’entraîner un déformement de tes images.

Oui et cela n'est pas vraiment adapté ici
Il est en général préférable de permettre une réduction homothétique de l'image en fonction de la taille de la zone d'affichage à l'aide de cette règle:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

img {max-width: 100%; height: auto;}

Attention le max-width n'est pas interprété par IE6- mais il existe une alternative CSS (faire une recherche).

Ceci dit ce mécanisme ne fonctionnera pas si l'image est incluse dans un tableau.

Nerull, pour limiter la casse, et si tu ne veux pas supprimer tous tes tableaux, réduis la taille de tes images et supprimes toutes les largeurs importantes de cellules (attribut width) pour que le contenu soit visible sur 1024px de large (résolution encore nettement majoritaire).

[Nerull]

voila une étude de mon trafic :

1. 1024x768 => 33,55 %

2. 1280x1024 => 16,58 %

3. 1680x1050 => 13,90 %

4. 1280x800 => 12,37 %

5. 1440x900 => 8,16 %

6. 1152x864 => 3,83 %

7. 800x600 => 2,93 %

8. 1920x1200 =>2,42 %

9. 1280x768 =>1,40 %

10. 1280x960 =>1,02 %


Il y aurait il un moyen via Dreamweaver de passer ces pages en 1024x768 ?
(actuellement elles sont en 1680x1050)

[Erwan31]

Il y aurait il un moyen via Dreamweaver de passer ces pages en 1024x768 ?
(actuellement elles sont en 1680x1050)

Non tu dois le faire manuellement.
L'optimisation pour UNE résolution en particulier est contradictoire avec
l'objectif principale du design fluide qui est de rendre le contenu accessible
quelque soit la taille d'affichage.
On t'as expliqué comment limiter la casse, maintenant à toi de jouer