Discussion :

[criscaro]

bonsoir,

hé ben voila, moi qui était toute contente de ma page !

sur FF tout est bien placé comme je le voulais mais en passant sur IE7 c'est le grand bazar ! enfin pas le haut de page, ça va encore mais la seconde partie de page est complètement décallée !

quels sont les pb courants entre ces 2 navigateurs ? j'ai lu des tonnes de trucs la-dessus et personne ne s'entend pour dire la mm chose (sauf à dire qu'il faut utiliser FF mais bon tt le monde n'a pas FF et certains préfèrent utiliser IE...)

j'ai des margin négatives dans ma css, cela pourrait-il jouer avec ie ?

je vous colle 2 screenshot pour vous montrer.

Pièce jointe 7359

Pièce jointe 7360

merci de vos réponses

[Bisûnûrs]

A vue de nez tu as des marges trop grandes.

Mais sans code, difficile de faire autre chose que des suppositions.

[criscaro]

bonsoir bisûnûrs !

je rajoute mon code ! je me doute qu'il y a un pb de marges, il n'y a que ça effectivement qui pourrait jouer !!! mais où lesquelles ??? ça mystère pour moi, il n'y a qu'un mois que je me suis mise au css et encore quelques heures par semaine donc je ne suis pas encore au point loin s'en faut

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
body {
	background-image: url("img/petite_etoile.jpg");
	margin:auto;
	margin-top: 10px;
	margin-bottom: 10px;
	font-family: BlackChancery, Arial, "Comic Sans MS", serif;
	padding: 10px;
}
 
.lettrine{
color: #FFFFFF;
font-family: oldlondon;
font-size: 200%;
}
 
@font-face {
	font-family:BlackChancery; src:url(font/BlackChancery.ttf), format(TrueType); 
	}	
 
a:active { 
		text-decoration: none;
		color: #CC0000;
	} 
a:link { 
		text-decoration: none;
		color: #CC0000;
	} 
a:visited { 	
		text-decoration: none;
		color: #CC0000;
	}
 
div#entete {
	width:100%;
	height:25%;
	background-image: url("img/logo_ambre.jpg");
	background-repeat: no-repeat;
	text-align: center;
	color: #CC0000;
	margin-bottom: 10px;
}	
 
	#titre1{
		height: 50%;
		margin-left: 300px;
		display: block;
		font-size: 300%;
	}
 
	#titre2{
		height: 50%;
		margin-left: 300px;
		display: block;
		font-size: 250%;
	}
 
div#menu {
	float:left;
	width:25%;
	height:100%;
	background-image: url("img/menu_parchemin.gif"); 	/* arrière-plan général du menu */
	background-repeat: no-repeat; 
	color: #CC0000;
	font-size: 130%;
	padding-top: 70px;
}
 
	.ul, li {	/* utilisation de liste pour le menu */
		list-style-type: none;	/* suppression des puces de liste */
		margin:0;
		padding:0;
		margin-top: 0px;
		margin-bottom: 5px;
 
	}
 
	.ul {
		position: absolute;	/* positionnement pour IE5 et IE5.5 */
		padding-top: 20px;
		text-align: left;
		margin-top: 50px;
		margin-bottom: 10px;
 
 
	}
 
	.li{
		display: inline;
	}  /* correction pour IE5 et IE5.5 */
 
div#contenu {
	width:75%;
	height:60%;
	float:left;
	text-align: justify;
	color: #00CECE;
	margin-bottom: 10px;
	font-size: 120%;
}
 
	div#bloc1{
		height: 45%;
		margin: 0 10px 20px 10px;
		float: left;
		width: 400px;
	}
 
	#droite{
		float: right;
		height: 305px; 
		width: 400px;
		margin-top: 20px;
 
	}
 
	div#bloc2 {
		height: 45%;
		margin: 20px 10px -155px 130px;
		float: right;
		width: 400px;
	}
 
	#gauche{
		float: left;
		height: 345px;
		width:400px;
		margin-left: 10px;
		margin-top: 20px;
	}
 
	div#infos{
		width: 100%;
		color: #00CECE;
		font-size: 120%;
		margin-top: 750px;
		margin-right: 30px;
		margin-bottom: 30px;
 
 
	}
 
div#piedpage {
	width:100%;
	height:15%;
	clear:both;
	color: #CC0000;
	background-image: url("img/licorne.png");
	background-repeat: no-repeat;
	background-position: center left;
	color: #CC0000;
	margin-bottom: 350px;
	margin-top: 20px;
	}
 
	#contacts{
		margin-left: 130px;
		margin-right: 750px;
	}
 
	#mail{
		margin-left: 130px;
		margin-right: 750px;
	}
 
	#imgpdp{
		margin-left: 400px;
		width: 600px;
		height: 300px;
		margin-top: -100px;
	}
 
	#product{
		margin-left: 10px;
		color: #CC0000;
		margin-top: -100px;
		text-align: center;
 
	}

[Bisûnûrs]

Deux margin-top m'interpellent :

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
.ul {
   position: absolute;	/* positionnement pour IE5 et IE5.5 */
   padding-top: 20px;
   text-align: left;
   margin-top: 50px;
   margin-bottom: 10px;
}
 
div#infos{
   width: 100%;
   color: #00CECE;
   font-size: 120%;
   margin-top: 750px;
   margin-right: 30px;
   margin-bottom: 30px;
}

A quoi correspondent-ils ?

[criscaro]

re,

en fait ma page est séparée en plusieurs parties enfin comme dab quoi:

un div entête

un div contenu avec menu et 2 div blocs avec images

un div infos correspondant à un bloc se trouvant sous le contenu et le menu

et un div pied de page

j'espère que je suis claire dans les explications sinon je te fais un schéma sur XL

voili voilou

[Orgied]

salut,

je crois que tu devrais oublier les valeurs en pourcent pour des hauteurs, je n'ai jamais eu de bons résultats en xhtml avec les pourcentages et les hauteurs en général.

voici un petit plan :

logiquement, tu ne devrais pas fournir de positions absolute. le tout, c'est de ne pas trop utiliser les margins non plus. Pour simuler des margins, ce qui fonctionne encore le mieux, c'est de définir un padding associé à une hauteur et/ou une longueur en pixels. si ta balise doit faire 100 pixels de long mais qu'il y a une marge de 20px, définit simplement une longueur de 80px et un padding-left de 20px.

en utilisant les clear avec les float, cela te permettra d'assurer les passages à la ligne après l'image en float si le texte associé à l'image est plus court que l'image. pour un float: left; le paragraphe suivant doit avoir comme paramètre clear: left;.

juste un autre commentaire, par défaut, un div fait 100% de long, pas la peine de le redéfinir.

j'éspère que tout ça pourra t'aider.

(j'utilise toujours ce genre de code en XHTML strict, ça peut différer sous d'autres versions).