Positioner une image (table)

**Remay08** · 04/10/2008, 15h06

Bonjour à tous,
je fait appel à votre aide pour un petit problème que je rencontre :

Comme il est visible sur la photo ci-dessous, j'aimerais placer l'image du charriot où j'ai dessiner une croix noir, malheureusement je n'y arrive pas.
Quelqu'un aurait il une solution ?

CODE HTML simplifié :

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
 
<td class="description_hamac">
 
        Matière : <span class="mpr">Filet Coton</span><br />
 
        Poids: <span class="mpr">0,838 Kg</span><br />
 
        Ref : <span class="mpr">3M060701</span><br />
 
        <span class="prix">58,66 €</span>   
 
        <form  class="cart" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> 
 
           <input type="image" src="images/cart_add.png" border="0" name="imput1" id="imput1" alt="Paiements via PayPal : rapides, gratuits et sécurisés !" />     
 
           <input type="hidden" name="add" value="1">
 
           <input type="hidden" name="cmd" value="_cart">
 
           <input type="hidden" name="business" value="commande@a.net">
 
           <input type="hidden" name="item_name" value="H S - Ref.11111111">
 
           <input type="hidden" name="amount" value="58.66">
 
           <input type="hidden" name="no_note" value="1">
 
           <input type="hidden" name="currency_code" value="EUR">
 
           <input type="hidden" name="lc" value="FR">
 
           <input type="hidden" name="bn" value="PP-ShopCartBF">
 
       </form>
 
</td >

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
 
.description_hamac {
 
	font-family: Arial, Helvetica, sans-serif;
 
	padding-left: 26px;
 
	color: #172323;
 
	padding-top: 5px;
 
}
 
.mpr {
 
	font-weight: bold;
 
	color: #264e90;
 
}
 
.prix {
 
	color: #8ab800;
 
	font-weight: bold;
 
	font-size: 24px;
 
}
 
.cart {
 
	margin-right: 0px;
 
	margin-bottom: 0px;
 
	margin-left: 0px;
 
	padding-top: 0px;
 
	padding-right: 0px;
 
	padding-bottom: 0px;
 
	padding-left: 160px;
 
}

Merci d'avance !

**kohsaka** · 04/10/2008, 15h24

position absolute

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
 
.bouton_achat {
   position: absolute;
   display: block;
   height: 50px;
   width: 50px;
   bottom: 20px;
   right: 20px;
}
#caddie {
  background: transprent url(image) no-repeat;
}
 
#croix {
  background: transprent url(image) no-repeat;
}
 
.description_hamac {
   position: relative;
}

**Remay08** · 04/10/2008, 15h43

Peu tu ajouter ta version HTML qui irait avec le CSS que tu propose, car j'ai un peu de mal à te suivre.

Merci d'avance

**kohsaka** · 04/10/2008, 16h09

pour faire simple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<td class="description_hamac">
   <blablabla />
   <a href="#" id="caddie" class="bouton_achat"></a>
   <a href="#" id="croix" class="bouton_achat"></a>
</td>

en utilisant le position absolute, tu vas placer ton élément par rapport a l'élément parent (en position relative).
en mettant bottom: 20px; les éléments se retrouveront donc 20pixels au dessus du bas du block <td>