Problème corps site et tronc déformé

**jopa86** · 10/05/2009, 12h32

Bonjour a tous,
voila je post ici car je rencontre un problème avec mon premier codage,
le tronc et le corps du site sont bien alignés sur mon pc et sur plusieurs ordis sous Mozilla firefox, et sur d'autres pc sous le même navigateur le tronc et le corps du site sont tout décalés.
Cela doit venir de l'écran qui diffère...?
J'ai fait un longue recherche sur le net sans résultat

je vous mets mon html et 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
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" type="text/css" title="Politique au Feminin" href="css/style.css" />
<title>Politique au Feminin</title>
</head>
<body>
 
<div class="center">
<div class="entete"></div>
 
<div class="corps">
	<div class="menu_haut">
		<!-- Preload des images au passage de la souris, là aussi uniquement en CSS -->
		<img src="images/accueil_rollover.png" alt="" style="display:none;" />
		<img src="images/information_rollover.png" alt="" style="display:none;" />
		<img src="images/contact_rollover.png" alt="" style="display:none;" />
 
		<!-- On affiche les images cliquable -->
		<a class="rollover_accueil" href="http://politiqueaufeminin.free.fr/index.html"><span>Accueil</span></a>
		<a class="rollover_information" href="http://politiqueaufeminin.free.fr/information.html"><span>Information</span></a>
		<a class="rollover_contact" href="http://politiqueaufeminin.free.fr/contact.html"><span>Contact</span></a>
	</div>
 
	<div class="menu_gauche">
		<div class="menu_gauche_texte">
			<ul>
				<li style="line-height:89px;"><a href="http://politiqueaufeminin.free.fr/changement.html">Le changement</a></li>
				<li style="line-height:40px;"><a href="http://politiqueaufeminin.free.fr/parite.html">La parité</a></li>
				<li style="line-height:95px;"><a href="http://politiqueaufeminin.free.fr/portraits.html">Les portraits</a></li>
				<li style="line-height:33px;"><a href="http://politiqueaufeminin.free.fr/dates.html">Les dates</a></li>
				<li style="line-height:97px;"><a href="http://politiqueaufeminin.free.fr/liens.html">Les liens</a></li>
			</ul>
		</div>
	</div>
 
	<div style="left;100px;color:#FFFFFF">
		<h1>Bienvenue sur Politique Au Féminin !</h1>
		<p>
			Laissez vous guider a travers les différentes parties du site.<br />
			Pour plus d'infos sur le site rendez vous dans la partie "Informations"
		</p>
 
 
		<h3><br>Sur ce... Bon surf ! ;p</h3>
 
	</div>
</div>
 
<div class="pied">
	<p>
	Tout le contenu du site - sauf avis contraire - est placé sous licence Copyright.<br />
	Copyright 2009-2010 Politique au feminin - Association loi 1901 | Version 1.0 | By jopa - Prod &amp; Austin.fla
	</p>
</div>
</div>
</body>
</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
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
body
{
	width:1024px;
	height:1075px;
	margin:auto; /* Pour centrer notre page */
	margin-top:20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
	margin-bottom:20px; /* Idem pour le bas du navigateur */
	padding:0px;
	font-family: Verdana, Geneva, sans-serif;
	font-size:12px;
	background-color:#1C2B33;
}
 
.entete
{
width:100%;
height:1116px;
background-image:url('../images/entete.png');
background-position:center;
background-repeat:no-repeat;
}
 
.corps {
background-color:#2F393B;
height:893px;
margin:0 auto;
width:777px;
}
 
 
.menu_haut
{
	width:100%;
	height:44px;
}
 
.menu_gauche
{
	width:215px;
	height:600px;
	float:left;
	background-image:url('../images/menu_verticale.png');
	background-repeat:no-repeat;
}
 
.menu_gauche_texte
{
	font-size:18px;
	color:#FFFFFF;
}
 
	.corps_texte {
color:#FFFFFF;
float:left;
font-size:9px;
}
 
.pied
{
	width:777px;
	height:27px;
	margin-left:124px;
	background-image:url('../images/pied.png');
	background-repeat:no-repeat;
	text-align:center;
	font-size:9px;
	color:#FFFFFF;
}
 
/* BOUTON ACCUEIL */
a.rollover_accueil
{
	display:block;
	float:left;
	width:277px;
	height:44px;
	background-image:url('../images/accueil.png');
	background-repeat:no-repeat;
	border:0;
}
 
a.rollover_accueil:hover
{
	background-image:url('../images/accueil_rollover.png');
	background-repeat:no-repeat;
}
 
a.rollover_accueil span
{
	display:none;
}
 
/* BOUTON INFORMATION */
a.rollover_information
{
	display:block;
	float:left;
	width:223px;
	height:44px;
	background-image:url('../images/information.png');
	background-repeat:no-repeat;
	border:0;
}
 
a.rollover_information:hover
{
	background-image:url('../images/information_rollover.png');
	background-repeat:no-repeat;
}
 
a.rollover_information span
{
	display:none;
}
 
/* BOUTON CONTACT */
a.rollover_contact
{
	display:block;
	float:left;
	width:277px;
	height:44px;
	background-image:url('../images/contact.png');
	background-repeat:no-repeat;
	border:0;
}
 
a.rollover_contact:hover
{
	background-image:url('../images/contact_rollover.png');
	background-repeat:no-repeat;
}
 
a.rollover_contact span
{
	display:none;
}
 
.menu a { /* Les liens qui ne sont pas sous le curseur. */
	color: #FFFFFF; /*ma couleur*/
	text-decoration:none; /* pas de soulignement*/
	font-family:Arial,Verdana; /* la font du texte*/
}
.corps {
background-color:#2F393B;
height:893px;
left:314px;
margin:0 auto;
position:absolute;
top:242px;
width:777px;
}
 
a:link,a:active,a:visited {
text-decoration: none;
}
a:hover{
text-decoration: none;
background-color : #E17B04;
}
	/* LIENS */
a:link
{
	color:#FFFFFF;
	text-decoration:none;
}
 
a:visited
{
	color:#FFFFFF;
	text-decoration:none;
}
 
a:hover
{
	color:#FFFFFF;
	text-decoration:underline;
}
 
 
/* UL */
ul
{
	margin-top:0px;
}
 
ul li
{
	list-style-type: none;
}
 
 
p
{
	margin-top:0px;
}

Le lien du site :
-->http://politiqueaufeminin.free.fr/

Il faudrait que je rajoute quelque chose qui permette a tous les ordinateurs d'avoir le même visuel sans décalage.
Merci de votre aide.

En esperant vous lire prochainement.
Jopa86

**Macmillenium** · 10/05/2009, 14h36

Bonjour et bienvenue

Ce qu'il faut corriger :

Enlever le width:1024px sur body, laisse le s'adapter à la taille du viewport,
Enlever le width:100% sur .entete, le comportement par défaut d'un élément block c'est d'occuper toute la largeur de son parent,
Mettre le background de .entete sur le body,
Enlever le height:1116px; sur .entete et renseigner plutôt une hauteur qui correspond au texte "politique au féminin",
Enlever le position:absolute, le left et le top sur .corps,
Attribuer un width:777px; à .center et le centrer via un margin:0 auto.

**jopa86** · 10/05/2009, 15h08

bonjour Macmillenium et merci pour ta réponse,

j'ai fait toutes tes modifs' je mets en code le nouveau css et maintenant c'est bien plus pire regarde :
-->http://politiqueaufeminin.free.fr/

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
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
body
{
 
	height:1075px;
	margin:auto; /* Pour centrer notre page */
	margin-top:20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
	margin-bottom:20px; /* Idem pour le bas du navigateur */
	padding:0px;
	font-family: Verdana, Geneva, sans-serif;
	font-size:12px;
	background-color:#1C2B33;
    background-image:url('../images/entete.png');
	}
 
.entete
{
 
background-position:center;
background-repeat:no-repeat;
}
.center
{
width:777px
margin:0 auto;
}
 
.corps {
background-color:#2F393B;
height:893px;
margin:0 auto;
width:777px;
}
 
 
.menu_haut
{
	width:100%;
	height:44px;
}
 
.menu_gauche
{
	width:215px;
	height:600px;
	float:left;
	background-image:url('../images/menu_verticale.png');
	background-repeat:no-repeat;
}
 
.menu_gauche_texte
{
	font-size:18px;
	color:#FFFFFF;
}
 
.corps_texte {
color:#FFFFFF;
float:left;
font-size:9px;
}
 
.pied
{
	width:777px;
	height:27px;
	margin-left:124px;
	background-image:url('../images/pied.png');
	background-repeat:no-repeat;
	text-align:center;
	font-size:9px;
	color:#FFFFFF;
}
 
/* BOUTON ACCUEIL */
a.rollover_accueil
{
	display:block;
	float:left;
	width:277px;
	height:44px;
	background-image:url('../images/accueil.png');
	background-repeat:no-repeat;
	border:0;
}
 
a.rollover_accueil:hover
{
	background-image:url('../images/accueil_rollover.png');
	background-repeat:no-repeat;
}
 
a.rollover_accueil span
{
	display:none;
}
 
/* BOUTON INFORMATION */
a.rollover_information
{
	display:block;
	float:left;
	width:223px;
	height:44px;
	background-image:url('../images/information.png');
	background-repeat:no-repeat;
	border:0;
}
 
a.rollover_information:hover
{
	background-image:url('../images/information_rollover.png');
	background-repeat:no-repeat;
}
 
a.rollover_information span
{
	display:none;
}
 
/* BOUTON CONTACT */
a.rollover_contact
{
	display:block;
	float:left;
	width:277px;
	height:44px;
	background-image:url('../images/contact.png');
	background-repeat:no-repeat;
	border:0;
}
 
a.rollover_contact:hover
{
	background-image:url('../images/contact_rollover.png');
	background-repeat:no-repeat;
}
 
a.rollover_contact span
{
	display:none;
}
 
.menu a { /* Les liens qui ne sont pas sous le curseur. */
	color: #FFFFFF; /*ma couleur*/
	text-decoration:none; /* pas de soulignement*/
	font-family:Arial,Verdana; /* la font du texte*/
}
.corps {
background-color:#2F393B;
height:893px;
margin:0 auto;
width:777px;
}
 
a:link,a:active,a:visited {
text-decoration: none;
}
a:hover{
text-decoration: none;
background-color : #E17B04;
}
	/* LIENS */
a:link
{
	color:#FFFFFF;
	text-decoration:none;
}
 
a:visited
{
	color:#FFFFFF;
	text-decoration:none;
}
 
a:hover
{
	color:#FFFFFF;
	text-decoration:underline;
}
 
 
/* UL */
ul
{
	margin-top:0px;
}
 
ul li
{
	list-style-type: none;
}
 
 
p
{
	margin-top:0px;
}

**Macmillenium** · 10/05/2009, 16h38

Envoyé par jopa86

j'ai fait toutes tes modifs'

Non je ne pense pas

Rajoute un background-position:center; et un background-repeat:no-repeat; sur le body,
Rajoute un height:115px; (à adapter) sur .entete,
Il manque le ";" après width:777px sur .center,
Enlève le margin-left:124px; sur .pied

Je te laisse faire les modifs et voir l'amélioration du rendu au fur et à mesure, ensuite, on fera le ménage dans ton code

**jopa86** · 10/05/2009, 16h54

Nickel Macmillenium

,
ça fonctionne parfaitement

bonne continuation
-->http://politiqueaufeminin.free.fr/

**Macmillenium** · 10/05/2009, 17h05

Un coup de nettoyage comme promis

(juste une partie du code)

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
 
body
{
 
	height:1075px;
	margin:20px auto; /* Pour centrer notre page, on optimise aussi */
	/*margin-top:20px;  Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir !  
	margin-bottom:20px; /* Idem pour le bas du navigateur */
	padding:0px;
	font-family: Verdana, Geneva, sans-serif;
	font-size:12px;
/* 	background-color:#1C2B33;
    background-image:url('../images/entete.png');
	background-position:center;
	background-repeat:no-repeat; */
	background:#1C2B33 url(../images/entete.png) no-repeat center; /* On optimise aussi */
	}
 
.entete
{
height:130px;
/* background-position:center;  inutile puisqu'on a plus de background
background-repeat:no-repeat; */
}
.center
{
width:777px;
margin:0 auto;
}
 
.corps {
background-color:#2F393B;
height:893px;
/* margin:0 auto; inutile, le bloc occupe toute la largeur de son conteneur 
width:777px; */
}
 
 
.menu_haut
{
	/* width:100%;  inutile, le bloc occupe toute la largeur de son conteneur  */
	height:44px;
}

Tu peux faire pareil pour le reste de ton code !

Problème corps site et tronc déformé

CSS

Discussions similaires

Partager

Partager