aligner une image FF IE

**Deallyra** · 12/03/2008, 11h44

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

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 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
 
<!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 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
 
/***************************************
			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

**Erwan31** · 12/03/2008, 15h57

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

**Deallyra** · 12/03/2008, 16h28

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?

**Erwan31** · 12/03/2008, 16h42

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.

**Deallyra** · 12/03/2008, 16h46

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

**Deallyra** · 12/03/2008, 16h48

Mon code est désormais le suivant :

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
 
/***************************************
			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...

aligner une image FF IE

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager