tableau en div

Version imprimable

1 pièce(s) jointe(s)

tableau en div

Hello,

jai fait un tableau en div parceque juste trop galère les background-images dans des balises tr enfin bref voici mon code

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
 
<div class="panier">
 
 
				<div class="panier_header">
				<caption class="panier_entete">Votre panier</caption>
				</div>
				<div class="panier_body">
				<div class="cell_1">	<b>Vos produits</b>	</div>
				<div class="cell_2">	<b>Prix</b>			</div>
 
				<div class="cell_3">	<b>Qty</b>			</div>
				<div class="cell_4">	<b>Total</b>		</div>	
				</div>		
							<div class="panier_body">
								<div class="cell_1">ghz		</div>
								<div class="cell_2">4 	</div>  	
								<div class="cell_3"> 3x 					</div> 
								<div class="cell_4">12	</div>
 
							</div>		
							<div class="panier_body">
								<div class="cell_1">xxx		</div>
								<div class="cell_2">3.90 	</div>  	
								<div class="cell_3"> 8x 					</div> 
								<div class="cell_4">31.2	</div>
							</div>		
							<div class="panier_body">
								<div class="cell_1">yyy		</div>
								<div class="cell_2">4 	</div>  	
								<div class="cell_3"> 8x 					</div> 
								<div class="cell_4">32	</div>
							</div>		
							<div class="panier_body">
								<div class="cell_1">	<b>Prix total :</b> 												</div>
								<div class="cell_4">	75.2 								</div>
							</div>
							<div class="panier_foot">
								<div class="cell_1">	<a href="http://localhost/test/accueil_membre.php?panier">s</a>		</div>
								<div class="cell_4">	<a href="http://localhost/test/accueil_membre.php?commander">s</a>	</div>
							</div>		
			</div>

et le css

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
 
.panier 
{
	color: black;
	float: right;
	margin-right: 5%;
	position:relative;
	width: 307px;
}
.panier_header
{
	padding-top: 5px;
	padding-left: 5px;
	margin: 0px;
	background: url(image/panier/entete.jpg) no-repeat;
	height: 26px;
}
.panier_body_total
{
	width: 307px;
	height: 30px;
	background: url(image/panier/centre.jpg) no-repeat;
	float: right;
}
.panier_body
{
	width: 307px;
	height: 30px;
	background: url(image/panier/centre.jpg) no-repeat;
	float: left;
}
.panier_foot
{
	width: 307px;
	height: 30px;
	background: url(image/panier/piedpage.jpg) no-repeat;
	float: left;
}
.cell_1
{
	padding-left: 5px;
	float: left;
	width: 127px;
	height: 30px;
}
.cell_2
{
	float: left;
	width: 50px;
	height: 30px;
}
.cell_3
{
	float: left;
	width: 50px;
	height: 30px;
}
.cell_4
{
	float: left;
	width: 75px;
	height: 30px;
}

en attachment le résultat, cependant je voudrais avoir "prix total" aligné avec la colonne "qty" et le "75.2" total aligné avec les "prix" comment dois-je ?procéder ?

07/09/2010, 08h35
ptilemare
Ce n'est peut être pas la section appropriée :aie:
Un tableau en div, je suis pas accro :mouarf:
Code:

1 2 3 4 5 6 <div class="panier_body"> <div class="cell_1">/</div> <div class="cell_2">/</div> <div class="cell_3"><b>Prix total :</b></div> <div class="cell_4">75.2</div> </div>
Cela devrait faire l'affaire.
Tu l'aurais fait avec une table et des tr td, ça aurait été plus simple ;)

Bien cordialement.

Bonjour, à mon avis le plus simple est de faire comme ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 .cell_1_total { padding-left: 5px; float:right; height: 30px; } .cell_4_total { float: right; width: 75px; height: 30px; }
Code:

1 2 3 4 5 <div class="panier_body"> <div class="cell_4_total">75.2</div> <div class="cell_1_total"><b>Prix total :</b></div> </div>
Evidemment je l'ai mis en class, vous pouvez le mettre en id si ils sont seuls.
Vous pouvez aussi mettre cell_1 vide, cell_2 vide, cell_3 prix total et cell_4 75.2

07/09/2010, 13h08
helkøwsky

merci

merci à vous,

j'avais effectivement oublié le float right sur les cell_1 / cell_4 je l avais juste mis sur le conteneur.

@ptilemare effectivement c'est beaucoup plus simple mais la gestion des background-image en <table> sincèrement c est vraiment trop trop galère... Avant j étais en <table> amias je suis devenu fou du coup je suis passé en div et j ai réussi à faire ce que je voulais en 1h. ;)