Bonjour à tous =)

après plusieurs tests et recherches sur internet je n'arrive pas à positionner mes tableaux correctement, je souhaite que les 3 tableaux en colonne à gauche soit à la même hauteur que le premier rectangle rouge et que le tout soit aligné à gauche comme la bannière.

j'ai beau essayer plusieurs options css, mettre différemment mon html impossible d'avoir le résultat voulu :/




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
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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
        <title>test</title>
    </head>
    <body>
		<div id="bandeau_1">
			<table align="right">
				<tr>
					<td>login:</td>
					<td><input type="text"></td>
					<td>password:</td>
					<td><input type="text"></td>
					<td><input type="button" value="connexion"></td>
				</tr>
			</table>
		</div>
		<div id="banniere">
			<img src="img/banniere.png">
		</div>
		<div id="bandeau_2">
			<table>
				<tr>
					<td>a</td>
					<td> | </td>
					<td>Galerie</td>
					<td> | </td>
					<td>Mes Favoris</td>
					<td> | </td>
					<td>Ma Liste</td>
					<td> | </td>
					<td>Mon Menu</td>
				</tr>
			</table>
		</div>
		<div id="centre_page">
			<table>
				<tr>
					<td width="20%">
						<table>
							<tr>
								<td>
									<div id="nouveaute">
										<table>
											<tr><th>Nouveauté</th></tr>
											<tr><td>a</td></tr>
											<tr><td>b</td></tr>
											<tr><td></td></tr>
											<tr><td></td></tr>
											<tr><td></td></tr>
										</table>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									<div id="mon_menu">
										<table>
											<tr><th>Mon menu</th></tr>
											<tr><td>a</td></tr>
											<tr><td>b</td></tr>
											<tr><td></td></tr>
											<tr><td></td></tr>
											<tr><td></td></tr>
										</table>
									</div>
									<div id="pub">
										<table>
											<tr><th>PUB</th></tr>
											<tr><td></td></tr>
											<tr><td></td></tr>
											<tr><td></td></tr>
											<tr><td></td></tr>
											<tr><td></td></tr>
										</table>
									</div>
								</td>
							</tr>
						</table>		
					</td>
					<td width="80%">
						<table>
							<tr>
								<td>
									<div id="recherche">
										<table>
											<tr></tr>
											<tr>
												<td>Mot clé:</td> 
												<td><input type="text"></td>
												<td><input type="button" value="Rechercher"></td>
											</tr>
											<tr><td>avancé</td></tr>
										</table>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									<div id="liste_recherche">
										<table>
											<tr><td></td></tr>
											<tr><td></td></tr>	
											<tr><td></td></tr>
										</table>
									</div>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</div>
 
 
 
 
    </body>
</html>

code CSS :

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
#bandeau_1{
width:800px;
height:30px;
background-color:black;
margin-left: auto; 
margin-right: auto;
margin-top:-10px;
}
#bandeau_1 td{
color:white;
 
 
}
 
#bandeau_1 input[type="text"]{ 
width:100px; 
height:20px; 
font-size:14px; 
}
 
 
#banniere{
margin-left: auto; 
margin-right: auto;
width:800px;
}
 
#bandeau_2{
width:800px;
height:30px;
background-color:black;
margin-left: auto; 
margin-right: auto;
margin-top:-2px;
}
#bandeau_2 td{
color:white;
}
 
 
 
#centre_page{
margin-left: auto; 
margin-top:0px;
width:800px;
}
 
 
#nouveaute{
margin-top:0px;
width:200px;
height:200px;
background-color:green;
}
 
#recherche{ 
margin-top:0px;
width:595px;
height:200px;
background-color:red;
}
 
 
#mon_menu{
margin-top:0px;
width:200px;
height:200px;
background-color:grey;
}
 
#pub{
margin-top:3px;
width:200px;
height:200px;
background-color:grey;
}
 
#liste_recherche{
margin-top:0px;
width:595px;
height:800px;
background-color:red;
}


merci de votre aide =)