HTML - CSS tableau taille de case différente

**dragonxav72** · 16/07/2012, 18h35

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

**Muchos** · 16/07/2012, 19h41

Il y a beaucoup d'erreurs de code. On ne met pas de formulaire dans un tableau, on n'imbrique pas des <table>, la propriété CSS align n'existe pas…

Pour votre problème, peut-être que l'usage de la propriété float vous aidera.

**dragonxav72** · 16/07/2012, 20h23

bonsoir,

je ne comprend pas pourquoi on ne peux pas imbriquer un formulaire dans un tableau ça permet de mieux structurer, l'attribut align existe bien et fonctionne parfaitement

après quelque bidouille j'ai réussi il fallait mettre une taille au body et rajouter des floats pour que tout ce place bien je doit mettre les menus dans un certains ordre j'espère juste que ça ne bougera pas par la suite :/

merci

**miss_socrates** · 16/07/2012, 20h36

En effet, je confirme, on n'utilise pas de tableau pour la mise en forme (c'est dépassé et mal traité par les moteurs).
Un tableau sert à structurer des données (comme un tableau Excel) et non à les mettre en forme. On met en forme les div pour cela avec le css.
De même, la propriété align s'utilise en html mais elle est devenue obsolète vu qu'on utilise du css pour la mise en forme. Le html est réservé aux données et le css à les mettre en forme. Donc pour être cohérent, on ne peut utiliser la propriété align en html mais son équivalent en css.

**dragonxav72** · 16/07/2012, 20h44

personnellement

text-align:right;

ne fonctionne pas du tout y a t'il un autre code?

edit : il fonctionne si j'enlève le tableau

**miss_socrates** · 16/07/2012, 21h14

Ben oui il faut enlever le tableau, ce n'est pas chinois, il suffit de remplacer le tableau et les cellules par des div...

HTML - CSS tableau taille de case différente

Tableau en CSS

Discussions similaires

Partager

Partager