Créer un contour arrondi

**helkøwsky** · 01/09/2010, 15h37

Bonjour la communauté,

voilà après maintes recherche je ne trouve toujours pas ce que je veux ou presque il y a ornitho13 qui a posté son lien dans un forum qui soit dit en passant est juste génial. Cependant il y a bien écrit compatiblité ie 9 et si je me trompe pas il n'est pas encore disponible.

En gros je voudrais que mon panier se trouve à l intérieur d un encadrement avec des bordures arrondies.
http://debray-jerome.developpez.com/...e-bordure-css3
Par exemple 15 / 4 / solide. Mais comme ce n'est pas compatible ie avant la version 9. je pensais faire un panier en réalisant mes image sur photoshop et comme le panier est extensible il y a 3 image comme suit en annexe.

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
 
<div class="panier" >
<table>	
				<caption>Votre panier</caption>
				<tr class="panier_entete">
				<td><b>Vos produits</b></td>
				<td><b>Prix</b></td>
				<td><b>Qty</b></td>
				<td><b>Total</b></td>	
				</tr>	
				<tr class="panier_middle"><td>ghz </td>
				<td> 4 </td>  
				<td> 9x </td>
				<td> 36 </td> 
				</tr> 
				<tr class="panier_middle">
				<td>xxx </td>
				<td> 3.90 </td>  
				<td> 3x </td>
				<td> 11.7 </td> 
				</tr> 
				<tr class="panier_middle">
				<td>yyy </td>
				<td> 4 </td>  
				<td> 3x </td>
				<td> 12 </td> 
				</tr> 	
				<tr class="panier_piedpage">
				<td><b>Prix total :</b></td>
				<td></td>
				<td></td>
				<td> 59.7 </td></tr>
				</table>
</div>

et le 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
 
.panier 
{
	color: black;
	float: right;
	margin-right: 5%;
}
.panier_entete
{
	background-image: url("image/entetepanier.jpg");
}
.panier_middle
{
	background-image: url("image/milieu.jpg");
}
.panier_piedpage
{
	background-image: url("image/piedpagepanier.jpg");
}

Autant vous dire que le résultat est assez moche, si vous avez des idées ou des solutions je suis preneur. PS: sans javascript si possible

merci

**ornitho13** · 01/09/2010, 20h50

Salut,

tout d'abord merci beaucoup, ça fait plaisir

.

Sinon concernant ton probleme, il se situe au niveau de la table. Les background ne fonctionnent pas parfaitement sur les TR (surtout quand on utilise des images).

voici une solution

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 
	<head>
		<title>test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
 
	<body>
		<div class="panier" >
			<div class="panier_entete"></div>
			<div class="panier_piedpage"></div>
			<div>
				<table cellpadding="0" cellspacing="0">	
					<caption>Votre panier</caption>
					<tr class="entete">
					<td><b>Vos produits</b></td>
					<td><b>Prix</b></td>
					<td><b>Qty</b></td>
					<td><b>Total</b></td>	
					</tr>	
					<tr class="panier_middle"><td>ghz </td>
					<td> 4 </td>  
					<td> 9x </td>
					<td> 36 </td> 
					</tr> 
					<tr class="panier_middle">
					<td>xxx </td>
					<td> 3.90 </td>  
					<td> 3x </td>
					<td> 11.7 </td> 
					</tr> 
					<tr class="panier_middle">
					<td>yyy </td>
					<td> 4 </td>  
					<td> 3x </td>
					<td> 12 </td> 
					</tr> 	
					<tr class="piedpage">
					<td><b>Prix total :</b></td>
					<td></td>
					<td></td>
					<td> 59.7 </td></tr>
				</table>
			</div>
 
		</div>
	</body>
</html>

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
 
.panier 
{
	color: black;
	float: right;
	margin-right: 5%;
	position:relative;
}
.panier_entete
{
	position:absolute;
	top:20px;
	right:0px;
	height:30px;
	width:200px;
	background: url(image/entetepanier.jpg) right top;
}
.panier_middle
{
	position:relative;
	width:200px;
	background-image: url(image/millieu.jpg);
}
.panier table{
	width:200px;
	position:relative;
}
.panier .entete, .panier .piedpage{
	height:30px;
}
.panier_piedpage
{
	position:absolute;
	bottom:0px;
	right:0px;
	height:30px;
	width:200px;
	background: url(image/piedpagepanier.jpg) bottom left;
}

voici une démo: http://debray.jerome.free.fr/demos/bordurePanier.html

Sinon n'utilise pas de guillemets pour le background-image, ce n'est pas utile

**helkøwsky** · 02/09/2010, 16h49

Hello,

merci mais petite question pour utilise tu position:relative; sans attribut derrière ? c'est pour l'héritage ? et autre question est il possible de tout mettre en % pour que ce soit maléable et que cela s adapte a chaque config ? merci

Créer un contour arrondi

CSS

Vue hybride

Discussions similaires

Partager

Partager