[CSS] Problème d'alignement des images

**Walabar** · 04/08/2006, 13h51

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)

J'ai alors essayé de mettre un float:left; à la div du pied de page, et j'obtiens du coup, ceci:

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 :

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
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 :

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
<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>

**sedryk** · 04/08/2006, 15h30

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 :

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
<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>

**Walabar** · 04/08/2006, 15h42

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.

[CSS] Problème d'alignement des images

CSS

Discussions similaires

Partager

Partager