[CSS] Problème d'alignement des images

Version imprimable

Bonjour tout le monde, je développe actuellement un ti site web en php/css, mais j'ai un petit problème...

Je n'arrive pas à placer le pied de page sous le menu...

Voilà ce que j'obtiens: (le fond noir, c'est normal, c'est pour que le problème ressorte mieux)
http://img208.imageshack.us/img208/4...obleme2ca5.png

J'ai alors essayé de mettre un float:left; à la div du pied de page, et j'obtiens du coup, ceci:
http://img456.imageshack.us/img456/5246/problemevt4.png

Si j'enlève le float du menu, il disparait, pour etre remplacé par la couleur de fond du body... mais le pied de page est bien placé, collé sous la partie texte de la page...

J'ai a peu près tout essayer alors si quelqu'un pouvait m'aider, ce serait sympa...

Ci-dessous, le code css et le code html:

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
body
{
	padding: 0px;
	margin: 0px;
	margin-left: 100px;
	width: 800px;
	background-color:#000000;
}
 
img
{
	padding:0px;
	margin:0px;
	border:0px;
}
 
#bann
{
	background-image:url(./images/site/bann.png);
	background-repeat:no-repeat;
	width:679px;
	border:0px;
	padding: 0px;
	margin: 0px;
	vertical-align:top;
}
 
#corps
{
	width:679px;
	height:100%;
	border:0px;
	padding: 0px;
	margin: 0px;
	vertical-align:top;
}
 
	#menu_main
	{
		background-image:url(./images/site/menu_main.png);
		background-repeat:repeat-y;
		width:104px;
		height:100%;
		padding: 0px;
		margin: 0px;
		float:left;
	}
 
		.menu_content
		{
			background-image:url(./images/site/menu_content.png);
			background-repeat:no-repeat;
			height:113px;
			width:104px;
			padding: 0px;
			margin: 0px;
			font-size:10px;
		}
 
			#menu_down
			{
				background-image:url(./images/site/menu_down.png);
				background-repeat:no-repeat;
				width:104px;
				height:37px;
				padding: 0px;
				margin: 0px;
			}
 
	#main
	{
		background-image:url(./images/site/main.png);
		background-repeat:repeat-y;
		width:575px;
		height:100%;
		padding: 0px;
		margin: 0px;
		margin-left:104px;
	}
 
#footer
{
	width:679px;
	height:43px;
	padding: 0px;
	margin: 0px;
	background-image:url(./images/site/footer.png);
	background-repeat:repeat;
}
 
	#footer p
	{
		text-align:center;
		font-size : xx-small;
	}

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
<html>
	<head>
		<title>test du design</title>
		<link rel="StyleSheet" type="text/css" href="style.css">
	</head>
 
	<body>
 
		<!-- Entête de la page -->
		<div id='bann'>
		</div>
 
		<!-- Corps de la page -->
		<div id='corps'>
			<div id='menu_main'>
				<div class='menu_content'><br>
					&nbsp // link 1<br>
					&nbsp // link 2<br>
				</div>
				<div id='menu_down'>
				</div>
			</div>
			<div id='main'>
				<!-- Texte de la page -->
			</div>
		</div>
 
		<!-- Pied de page -->
		<div id='footer'>
			<p>&copy 2006 - Nom de la team, tous droits réservés</p>
		</div>
	</body>
<html>

Walabar,

J'ai repris ton code en remplaçant tes images par des couleurs :)

Il me semble qu'il manque un float: left; sur ta div #main du coup sous IE elle apparaît en dessous du menu :) Si on le rajoute il faut enlever le margin-left: 104px qui ne sert plus à rien.

Voici ce que ca donne :

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
<html>
	<head>
		<title>test du design</title>
		<style>
		  body
{
	padding: 0px;
	margin: 0px;
	margin-left: 100px;
	width: 800px;
	background-color:#000000;
}
 
img
{
	padding:0px;
	margin:0px;
	border:0px;
}
 
#bann
{
	background: orange;
	width:679px;
	border:0px;
	padding: 0px;
	margin: 0px;
	vertical-align:top;
}
 
#corps
{
	width:679px;
	height:100%;
	border:0px;
	padding: 0px;
	margin: 0px;
	vertical-align:top;
}
 
	#menu_main
	{
		background: yellow;
		width:104px;
		height:100%;
		padding: 0px;
		margin: 0px;
		float:left;
	}
 
		.menu_content
		{
			background: blue;
			height:113px;
			width:104px;
			padding: 0px;
			margin: 0px;
			font-size:10px;
		}
 
			#menu_down
			{
				background: green;
				width:104px;
				height:37px;
				padding: 0px;
				margin: 0px;
			}
 
	#main
	{
		background: white;
		width:575px;
		height:100%;
		padding: 0px;
		margin: 0px;
		float: left;
	}
 
#footer
{
	width:679px;
	height:43px;
	padding: 0px;
	margin: 0px;
	background: red;
}
 
	#footer p
	{
		text-align:center;
		font-size : xx-small;
	}
		</style>
	</head>
 
	<body>
 
		<!-- Entête de la page -->
		<div id='bann'>
		</div>
 
		<!-- Corps de la page -->
		<div id='corps'>
			<div id='menu_main'>
				<div class='menu_content'><br>
					&nbsp // link 1<br>
					&nbsp // link 2<br>
				</div>
				<div id='menu_down'>
				</div>
			</div>
			<div id='main'>
				<!-- Texte de la page -->
			</div>
		</div>
 
		<!-- Pied de page -->
		<div id='footer'>
			<p>&copy 2006 - Nom de la team, tous droits réservés</p>
		</div>
	</body>
<html>

04/08/2006, 15h42
Walabar

J'ai fait ce que tu m'as dit, sous internet explorer, pas de problème. Sauf qu'il y a une séparation du footer avec le reste sous firefox.

Après ajout d'un float:left au footer, le décalage n'est plus.

Merci à toi. ;)