aligner une image FF IE

Version imprimable

Bonjour,

Ayant besoin de hoster un forum entre ami, j'ai décidé de remettre à jour mon ftp qui était fait pour les résolutions en 800*600 et, du coup, je souhaiterais le passer en 1024*768, la résolution supérieure.
Seulement... je n'ai pas trop touché au CSS depuis un long moment... et c'est pas comme la bicyclette :oops:

Sous FireFox, j'obtiens un alignement de ma bannière qui me convient. Sous IE6, ben que dire... c'est IE et il me met tout à gauche

Ne plus arriver à faire un simple centrage d'une image ><

Bref, titi morceaux de codes bien allégés :

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang="fr" lang = "fr">
	<head> <!--Début En-tête-->
		<title>
			unTitre
		</title>
		<link rel = "stylesheet" type = "text/css" href = "_Style/Feuille_De_Style.css" /> <!--Appel de la feuille de style-->
		<meta http-equiv = "Content-Type" content = "text/html; charset=ISO-8559-1" /> <!--Rendre de manière lisible toute les caractères accentués et spéciaux-->
	</head> <!--Fin En-tête-->
	<body> <!--Début Corps de la page-->
		<div id = "container"> <!--Début du conteneur-->
			<div id = "header"> <!--Début de l'en-tête-->
				<div id = "banner">
					<img src = "_Image/banner.jpg" alt = "" />
				</div>
			</div>
			<br />
			<div id = "sidebar"> <!--Début de la barre de coté-->
				<div id = "navcontainer"> <!--Début du conteneur du menu-->
 
					<ul id = "navlist"> <!--Début de la liste du menu-->
						<li>
							<a href = "index.php">
								<img src = "_Image/_Menu/image.gif" id = "accueil" alt = "Accueil"/>
							</a>
						</li>
						<li>
							<a href = "V_Art_Work.php">
								<img src = "_Image/_Menu/image.gif" id = "art_work" alt = "Art Work"/>
							</a>
						</li>						
					</ul> <!--Fin de la liste du menu-->
				</div> <!--Fin du conteneur du menu-->
 
			</div> <!--Fin de la barre de coté-->
			<div id = "contents"> <!--Début du contenu-->
			</div> <!--Fin du contenu-->
			<hr class = "clearfloat" />
			<div id = "footer"> <!--Début de pied de page-->
				Site réalisé pour et par 
				<br />
				<b>
					© 2007 Tous droits réservés
				</b>
			</div> <!--Fin de pied de page-->
			<div id = "numero_page"> <!--Début du numéro de page-->
				&
			</div> <!--Fin du numéro de page-->
			<hr class = "clearfloat" /> <!-- Cet élément de suppression doit suivre immédiatement l'élément div #contenu afin de forcer l'élément div #conteneur à contenir tous les éléments flottants enfants -->
		</div> <!--Fin du conteneur-->
	</body> <!-- Fin Corps de la page-->
</html>

et mon css

Code:

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
 
/***************************************
			All
***************************************/
 
*
{
	margin: 0;
	padding: 0;
}
 
/***************************************
			Html
***************************************/
html
{
	width : 1024px;
	height : 768px;
	margin : 0 auto;
}
 
/***************************************
			Body
***************************************/
 
body
{
	font-family: Monotype Corsiva;
	background-color: #FFFFFF;
	color: #000000;
	width: 1024px;
	height: 768px;
	margin: 10px;
}
 
 
/***************************************
			Header
***************************************/
 
body #header
{
	display: block;
	margin-left : auto;
	margin-right : auto;
	width: 768px;
	height: 135px;
}
 
body #header #banner
{
 
}
 
/***************************************
			Sidebar
***************************************/
 
#container #sidebar
{
	float: left;
	width: 120px;
}
 
/***************************************
			Navigator
***************************************/
 
#container #sidebar #navcontainer li
{
	font-size: 18px;
	font-family: Viner Hand ITC;
	text-align: center;
	margin: 0px 0px 0px 5px;
}
 
#container #sidebar #navcontainer li a
{
	font-weight: bolder;
	text-decoration: none;
	color: #FF0000;
}
 
#container #sidebar #navcontainer #navlist li
{
	list-style: none;
}
 
 
/***************************************
			Contents
***************************************/
 
#container #contents
{
	float: right;
	margin-right: 10px;
	width: 590px;
	font-size: 18px;
}
 
/***************************************
			Footer
***************************************/
#container #footer
{
	background-color: #DDDDDD;
	width: 100%;
	text-align: center;
	font-size: 20px;
}
 
 
/***************************************
			Number of Page
***************************************/
 
#numero_page
{
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 30px;
}
 
#numero_page a
{
	color : #FFFFFF;
}
 
#numero_page a:hover
{
	color : #FF4500;
}
 
/***************************************
			Others
***************************************/
 
.clearfloat
{ 
	clear : both; 
	width : 0px; 
	height : 0px; 
	font-size : 0px; 
	line-height : 0px; 
}
 
.block
{
	display: block;
}
 
a img
{
	border: 0;
}

Pièce jointe 26952

Pièce jointe 26953

Merci beaucoup de vous pencher sur mon sujet :)

12/03/2008, 15h57
Erwan31

hello,
tu devrais attribuer à ton container des marges latérales auto et du coup les
supprimer là ou c'est nécessaire, ça réglerait ton problème ;)
12/03/2008, 16h28
Deallyra

Merci de ta réponse Erwan mais elle ne résout pas mon problème.

Cependant, je me demandais si ce n'était pas ma page html qui n'était pas centrée... je lui donne un taille, peut être devrais-je ne pas le faire?
12/03/2008, 16h42
Erwan31

Citation:

Envoyé par MimiCracra44

Merci de ta réponse Erwan mais elle ne résout pas mon problème.

Cependant, je me demandais si ce n'était pas ma page html qui n'était pas centrée... je lui donne un taille, peut être devrais-je ne pas le faire?

Ah oui pardon un oublie ;) Tu dois toujours préciser une largeur a ton conteneur.
12/03/2008, 16h46
Deallyra

conteneur en tant que terme générique?
en gros, tout mes divs?
enfin tout mes blocs...

je m'enfonce là...et devient moins compréhensible

Mon code est désormais le suivant :

Code:

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
 
/***************************************
			All
***************************************/
 
*
{
	margin: 0;
	padding: 0;
}
 
/***************************************
			Html
***************************************/
html
{
	width : 1024px;
	height : 768px;
	margin : 0 auto;
}
 
/***************************************
			Body
***************************************/
 
body
{
	font-family: Monotype Corsiva;
	background-color: #FFFFFF;
	color: #000000;
	width: 1024px;
	height: 768px;
	margin: 10px;
	/*text-align : center;*/
}
 
/***************************************
			Container
***************************************/
 
#container
{
	width: 1024px;
	height: 768px;
	margin: 0px auto auto;
}
 
 
/***************************************
			Header
***************************************/
 
body #header
{
	display : block;
	margin : 0 auto auto;
	width: 768px;
	height: 135px;*/
}
 
body #header #banner
{
 
}

mais c'est toujours le même rendu...

12/03/2008, 16h52
Erwan31
En principe ça devrait se centrer, tu as juste un auto en trop:
Ne pas mettre l'unité quand la valeur est de 0
Code:

1 2 3 4 5 6 #container { width: 1024px; height: 768px; margin: 0 auto; }
12/03/2008, 16h53
Erwan31

EDIT Attention, tu as une fermeture de commentaire en trop:

Code:

height: 135px;*/
12/03/2008, 16h58
Deallyra

effectivement :oops:

mais elle n'avait pas d'incidence sur mon problème... (la fermeture de commentaire)
le rendu en ce moment est ma bannière décalée un peu à droite et dans cet espace de décalage, en dessous, se trouve mes boutons de menu.

edit : je viens de voir ton précédent post et j'ai supprimé px et le auto en trop.
aucun changement...

Enlève ça :
Code:

1 2 3 4 5 6 html { width : 1024px; height : 768px; margin : 0 auto; }
Et le width sur le body.

12/03/2008, 17h11
Deallyra

:aie:

et tu m'as fait poireauter tout un après midi alors que tu avais la réponse?

Merci Bisûnûrs :D

merci aussi Erwan ;)
12/03/2008, 17h11
Deallyra

pourquoi supprimer les propriétés css de HTML?

et le width de body alors qu'on laisse le height?
12/03/2008, 17h34
Erwan31

Tu n'as pas besoin d'attribuer en général trop de styles au HTML (excépté des
propriété spécifique comme scrollbars..,des taille de police et souvent un
height:100% ) mais c'est d'avantage nécessaire si ton doc est servi en application/xml+xhtml.

Mettre une propriété de taille au body n'a aucun sens.