site qui décalé en 800x600

**orphen** · 26/02/2007, 17h04

Coucou voila j'ai fini ma page d'accueil apres un troisieme recodage

je n'ai plus qu'un leger probleme j'ai essayer de penser ma page de façon a ce que quand on est en 800x 600 le fond gris disparaisse mais que le contenu soit toujours bien vsible.

malheureusement le resultat n'est pas ce lui que j'attendai au lieu de s'ecraser en mode 800x600 on dirai que le site ce decale sur la droite resultat un fond gris a gauche mais pas a droite et un scroll en bas.

http://fansyl.com.free.fr

je vous met mes nouveaux codes que je vais essayer de reduire plus tard.

Code html :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Bienvenue sur www.fansyl.fr</title>
<meta name="description" content="Le site de deux jeunes graphiste qui travaillent aussi biend ans la 2d que la 3d." />
<meta name="keywords" content="fansyl,www.fansyl.fr,3d,2d,maya,3dsmax,tutorial,bousselier,deliee,portofolio,compositing" /> 
<link href="css/css1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="fondblanc">
<div id="banniere"><span class="titre"><img src="images/iconefansyl.gif" alt="Chargement" class="iconefansyl" /><img src="images/banniere.gif" alt="Chargement" class="banniere" /><img src="images/iconebanniere.gif" alt="Chargement" class="iconebanniere" /></span></div>
<div id="menu"><p class="liens">Galeries <span class="separation">|</span> CV <span class="separation">|</span> Biographies <span class="separation">|</span> Projets <span class="separation">|</span> Forum <span class="separation">|</span> Liens</p></div>
<div id="corps"> <img src="images/print/printmont.gif" alt="Chargement" class="printmont" />
                 <img src="images/bienvenue.gif" alt="Chargement" class="bienvenue" />
                 <p class="paracorps">Bienvenue sur <span style="color:#cb6709;">www.fan</span><span style="color:#66330b;">syl.com</span>
                                     Ce site a été entierement codé à la main, il contient le travail
	                                 personnel et professionnel de <span style="color:#66330b;">Sylvain Bousselier</span> et <span style="color:#cb6709;">Fanny Deliée.</span>
	                                 Nous travaillons dans l'imagerie de synthese, le maquettisme, le compositing,
	                                 le webdesign, l'integration (xhtml,multimedia).
	                                 Chaque partie du site est decoupée en deux sections: celle de <span style="color:#66330b;">Sylvain</span> et de <span style="color:#cb6709;">Fanny.</span><br />
 
									 <img src="images/separation2.gif" alt="Chargement" class="separtext" /><br />
 
									 Ce site se compose d'un menu qui vous permettra de naviguer dans les differentes sections.
	                                 La partie <span style="color:#cb6709;">galerie</span> vous montrera differents travaux personnels ou professionnels, la partie
	                                 <span style="color:#cb6709;">CV</span> contient nos Curiculum Vitae avec nos experiences, la partie <span style="color:#cb6709;">biographie</span> contient nos parcours
                                     respectifs, la partie <span style="color:#cb6709;">projet</span> contient notre projet personnel commun, la partie <span style="color:#cb6709;">forum</span> contient le forum de
                                     notre site, et la partie <span style="color:#cb6709;">liens</span> contient differents liens sur le graphisme qui nous tiennent à coeur. <br />
 
                                     <img src="images/separation2.gif" alt="Chargement" class="separtext" /><br /> 
 
                                     <span style="color:#cb6709;">Fanny</span> et <span style="color:#66330b;">Sylvain</span> vous souhaitent une bonne visite. N'hesitez pas à nous contacter pour
                                     vos projets ou plus de renseignements sur notre travail en nous envoyant un message
                                     grace à la partie ci-dessous.								 
		        </p>						
			    <p class="introformsyl"><img src="images/barre.gif" alt="Chargement" class="barre" /><br />
				                        <span class="contacter1">Contacter moi</span><br />
				                     Pour vos projets ou besoins concernant l'illustration, l'imagerie de synthese, le maquetisme, la conception de site internet, ou pour tout autre renseignements
		        </p>
                <form method="post" action="traitement.php" class="formulairesylvain">
				<p class="paraformsyl">
                Genre:<br />
                <select name="genre">
                <option value="monsieur" class="interieursylv">Monsieur</option>
                <option value="madame" class="interieursylv">Madame</option>
                <option value="mademoiselle" class="interieursylv">Mademoiselle</option>
                </select>
                <br />
				<label>Votre Nom :<br /><input type="text" name="nom" class="interieursylv" /></label><br />
				<label>Votre Prenom :<br /><input type="text" name="prenom" class="interieursylv" /></label><br />
				<label>Votre telephone :<br /><input type="text" name="telephone" class="interieursylv" /></label><br />
				<label>Votre Mail :<br /><input type="text" name="mail" class="interieursylv" /></label><br />
				Cochez la raison de votre message :<br />
                <label><input type="checkbox" name="illustration" />Illustration</label><br />
                <label><input type="checkbox" name="imagerie3d" />Imagerie de synthese(3d)</label><br />
                <label><input type="checkbox" name="maquetisme" />Maquetisme</label><br />
                <label><input type="checkbox" name="site" />Site internet</label><br />
				<label><input type="checkbox" name="autre" />Autre</label><br />
				<label>
                Votre message/commande :<br />
                <textarea name="commande" rows="5" cols="25" class="interieursylv"></textarea>
                </label><br />
                </p>
				<p class="boutonsylvain">
				<input type="submit" value="Envoyer" /> <input type="reset" value="Effacer" />
				</p>
                </form>
 
                <p class="introformfan"><span class="contacter1">Contacter moi</span><br />
				                     Pour vos projets ou besoins concernant l'illustration, l'imagerie de synthese, les effets speciaux, le compositing, ou pour tout autre renseignements
		        </p>
                <form method="post" action="traitement.php" class="formulairefanny">
				<p class="paraformfan">
                Genre:<br />
                <select name="genre">
                <option value="monsieur" class="interieurfan">Monsieur</option>
                <option value="madame" class="interieurfan" >Madame</option>
                <option value="mademoiselle" class="interieurfan" >Mademoiselle</option>
                </select>
                <br />
				<label>Votre Nom :<br /><input type="text" name="nom" class="interieurfan" /></label><br />
				<label>Votre Prenom :<br /><input type="text" name="prenom" class="interieurfan" /></label><br />
				<label>Votre telephone :<br /><input type="text" name="telephone" class="interieurfan" /></label><br />
				<label>Votre Mail :<br /><input type="text" name="mail" class="interieurfan" /></label><br />
				Cochez la raison de votre message :<br />
                <label><input type="checkbox" name="illustration" />Illustration</label><br />
                <label><input type="checkbox" name="imagerie3d" />Imagerie de synthese(3d)</label><br />
                <label><input type="checkbox" name="maquetisme" />Effets speciaux</label><br />
                <label><input type="checkbox" name="site" />compositing</label><br />
				<label><input type="checkbox" name="autre" />Autre</label><br />
				<label>
                Votre message/commande :<br />
                <textarea name="commande" rows="5" cols="25" class="interieurfan"></textarea>
                </label><br />
                </p>
				<p class="boutonfanny">
				<input type="submit" value="Envoyer" /> <input type="reset" value="Effacer" />
				</p>
                </form>	
</div>			
<div id="news"> <img src="images/evenement.gif" alt="Chargement" class="imageevenement" />
                <h5>News du site :</h5>
				<p class="newssite">Mise en ligne du site le../../....
	                            Certaines pages ne sont pas encore en ligne
                </p>
 
				<img src="images/separation.gif" alt="Chargement" class="separation1" />
 
				<h5>News de Sylvain :</h5> 
				<p class="newssite">Fin du codage de notre site.
	                                Premieres images de ma galerie.
							        Ma biographie et mon CV en ligne.
                </p>
 
				<img src="images/separation.gif" alt="Chargement" class="separation1" />
 
				<h5>News de Fanny :</h5>
                <p class="newssite">Fin du codage de notre site.
	                            Premieres images de ma galerie.
							    Ma biographie et mon CV en ligne.
                </p>	   													  
</div>
<div id="deco"></div>
               <img src="images/barre.gif" alt="Chargement" class="barre2" />
			   <img src="images/barreverticale.gif" alt="Chargement" class="barre3" />
</div>
<div id="footer">fansyl et tous les documents qui le concerne sont des proprietees exclusive de ses auteurs</div>
</body>
</html>

et le css

Code css :

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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
 
* {margin:0; padding:0}
body{
background-image: url(../images/imagefond.gif);
}
 
#fondblanc{
position: absolute;
left: 100px;
right: 100px;
background-color: #ffffff;
width: 800px;
height: 1310px
}
 
#banniere{
position: absolute;
width: 780px;
height: 100px;
top: 19px;
left: 10px;
}
 
.iconefansyl{
position: absolute;
width: 140px;
height: 100px;
top: 0px;
 
}
 
.banniere{
position: absolute;
width: 440px;
height: 100px;
top: 0px;
left: 160px;
}
 
.iconebanniere{
position: absolute;
width: 130px;
height: 100px;
top: 0px;
left: 600px
}
 
#menu{
position: absolute;
background-color: #66330b;
width: 780px;
top: 119px;
left: 10px;
}
 
.liens{
margin-left: 100px;
font-size: 0.8em;
color: #ffffff;
word-spacing: 35px;
}
 
.separation{
color: #cb6709;
}
 
#corps{
position: absolute;
width: 560px;
top: 134.5px;
left: 186px;
}
 
.printmont{
position: absolute;
width: 560px;
height: 200px;
}
 
.bienvenue{
position: absolute;
width: 135px;
height: 90px;
top: 200px;
}
 
.paracorps{
position: absolute;
top: 320px;
padding-left: 30px;
padding-right: 30px;
color: #787878;
font-size: 0.8em;
}
 
.separtext{
margin-top: 10px;
margin-bottom: 10px;
margin-left: 150px;
}
 
.barre{
margin-bottom: 10px;
}
 
.contacter1{
font-weight: bold; 
font-size: 1.5em;
margin-left: 40px;
color: #b2b2b2;
}
 
.introformsyl{
margin-top: 10px;
position: absolute;
top: 610px;
width: 280px;
font-size: 0.8em;
color: #787878;
}
 
.introformfan{
position: absolute;
top: 632px;
left: 300px;
width: 280px;
font-size: 0.8em;
color: #787878;
}
 
.formulairesylvain{
position: absolute;
top: 730px;
left: 20px;
color: #787878;
font-size: 0.8em;
}
 
.interieursylv{
color: #66330b;
}
 
.formulairefanny{
position: absolute;
top: 730px;
left: 320px;
color: #787878;
font-size: 0.8em;
}
 
.interieurfan{
color: #cb6709;
}
 
#news{
position: absolute;
background-image: url(../images/news.gif);
width: 176px;
height: 1165px;
top: 134.5px;
left: 10px;
}
 
.imageevenement{
margin-top: 20px;
width: 176px;
height: 18px;
}
 
h5{
margin-top: 10px;
margin-left: 20px;
text-decoration: underline;
color: #ffffff
}
 
.newssite{
margin-top: 10px;
text-align: left;
font-size: 0.7em;
font-variant: small-caps;
color: #ffffff;
margin-left: 20px;
}
 
.separation1{
margin-top:10px;
margin-left: 30px;
height: 10px;
width: 136px;
}
 
#deco{
position: absolute;
background-color: #cb6709;
width: 44px;
height: 1165px;
left: 746px;
top: 134.5px;
}
 
.barre2{
margin-top: 1297px;
margin-left: 180px;
}
 
.barre3{
position: absolute;
top: 755px;
left: 460px;
}
 
#footer{
position: absolute;
top: 1310px;
left: 400px;
font-size: 0.7em;
font-variant: small-caps; 
}

je me suit dit que la solution etait peut etre de mettre des margin auto...
mais dans ce cas la je dois tous modifier et ma mise en page ce casse encor plus en 800x600.

merci d'avance

**roudoudouduo** · 26/02/2007, 17h52

théoriquement si tu as complètement séparé le CSS du HTML tu ne dois modifier que quelques lignes dans ta feuille de style pour rajouter la propriété margin.

De plus ton code est très mal indenté (j'ai été sur ton site et j'ai fais un view source avec firefox), ce qui le rend très difficille à lire. Vu la longueur si tu veux de l'aide arrange toi pour que l'on puisse le lire facilement.

J'ai remarqué toujours avec le view source que toutes tes fermetures de balise type <br /> ou <input /> contenait des erreurs (le / et surlignés en rouge). Peut-être que ça peut venir de ça (meme si j'en doute fortement).

**Dan_A** · 26/02/2007, 19h12

Avec position:absolute et left fixé il n'est pas possible de centrer le contenu.
Il vaut peut-être mieux laisser les choses telles quelles car sinon tout est à recoder !

**mLk92** · 27/02/2007, 15h22

Envoyé par roudoudouduo

théoriquement si tu as complètement séparé le CSS du HTML tu ne dois modifier que quelques lignes dans ta feuille de style pour rajouter la propriété margin.

De plus ton code est très mal indenté (j'ai été sur ton site et j'ai fais un view source avec firefox), ce qui le rend très difficille à lire. Vu la longueur si tu veux de l'aide arrange toi pour que l'on puisse le lire facilement.

J'ai remarqué toujours avec le view source que toutes tes fermetures de balise type <br /> ou <input /> contenait des erreurs (le / et surlignés en rouge). Peut-être que ça peut venir de ça (meme si j'en doute fortement).

Mis à part ces quelques erreur d'écriture, on peut au moins le féliciter d'avoir fait un design comme celui là sans dreamweaver !! On croise bcp trop de sites crées sous forme de tableau, qui ne respectent aucun standard !

pour voir tes erreurs, tu peux tjr validé tes pages avec le validateur w3c.org

**speedev** · 27/02/2007, 17h54

Salut,

Chouette site!
Pour ce qui est du positionnement, tu as donné la solution en parlant des "margin auto".
Les modifications ne sont pas si lourdes que ça à apporter.
Supprimes les div en marge et inutiles, créer-toi un unique div conteneur d'une largeur fixe et centre-le comme tu le pensais de cette façon:

Code :

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

1
2
3
 
margin-left:auto;
margin-right:auto;

Appliques un background à ton body tel qu'actuellement sur les côtés.

Quelques remises en forme sont nécessaires seulement ça t'élimine bien des ennuis de mise en page pour les prochains épisodes!

a+!

**orphen** · 01/03/2007, 15h21

Merci beaucoup pour vos commentaires ca me fait vraiment plaisir.
je m'investi beaucoup dans ce projet et je souhaite vraiment tous coder main lol.

J'ai reussi a regler tous mes problemes de compatibilitée suivant les resolutions ou les navigateurs.

J'ai juste modifier un peut mon code.
merci de vos encouragements

site qui décalé en 800x600

CSS

Vue hybride

Discussions similaires

Partager

Partager