Positionner une image en bas d'un Div

Version imprimable

Bonjour à tous.

Je patauge depuis hier sur un positionnement d'image.
Pour monter mon design j'ai mis un Div dans ma page et je voudrais lui mettre 4 images, une dans chaque coin.

J'ai trouvé comment faire les deux du haut mais je sèche sur celle du bas.
Mon Div a une largeur fixe, donc la balade entre droite et gauche est simple. Mais il a une hauteur dynamique en fonction de son contenu et là, c'est plus compliqué pour lui dire d'aller mettre l'image en bas.

Les arguments Bottom et Right n'ont pas l'air de fonctionner.

J'ai cherché sur le net avec mon ami Google, mais j'ai pas trouvé.

Pouvez vous m'aider ?

Mon code actuel :
Code:

1 2 3 4 5 6 7 8 9 <body> <div style="width:1000px;border:solid 1px White;padding:50px;"> <img src="/App_Themes/ecrou.gif" alt="élément de décoration" style="position:relative;top:-50px;left:-50px;" /> <img src="/App_Themes/ecrou.gif" alt="élément de décoration" style="position:relative;top:-50px;right:0px;" /> <img src="/App_Themes/ecrou.gif" alt="élément de décoration" style="position:relative;bottom:0px;left:-50px;" /> <img src="/App_Themes/ecrou.gif" alt="élément de décoration" style="position:relative;bottom:0px;right:0px;" /> <table> ....

15/09/2010, 09h37
Mahefasoa

Bonjour,

Pour fixer un élément à un endroit précis, utilise le positionnement absolute et non relative.

Bien cordialement,
15/09/2010, 10h47
zooffy

Merci pour ton aide.

J'ai mis relative parce qu'il faut que se soit relatif au div du haut (le premier).
Si je mets Absolute, ça va être par rapport à la page, non ?

Il va y avoir plusieurs "cadre" de ce type dans la page.
15/09/2010, 10h51
Mahefasoa

Re,

Met le div en position:relative et les img (de coin) en position:absolute. Ainsi, ce sera par rapport au div et non à la page.

Bien cordialement,

Ok, je capte mieux. Merci beaucoup.

Du coup en exploitant ta proposition et farfouillant un peu j'ai trouvé un bout de code (que je mets en fin de message).
Ca marche presque. Les images de coin ayant une partie transparente, on voit les images de côté se prolonger et je sais pas trop comment faire pour empêcher cela.

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
 
<style type="text/css">
.top{ 
background-image:url('/App_Themes/Cadre_HM.gif'); 
background-repeat:repeat-x; 
background-position:top left; 
} 
.right{ 
background-image:url('/App_Themes/Cadre_MD.gif'); 
background-repeat:repeat-y; 
background-position:top right; 
} 
.bottom{ 
background-image:url('/App_Themes/Cadre_BM.gif'); 
background-repeat:repeat-x; 
background-position:bottom left; 
} 
.left{ 
background-image:url('/App_Themes/Cadre_MG.gif'); 
background-repeat:repeat-y; 
background-position:top left; 
} 
.top-left{ 
background-image:url('/App_Themes/Cadre_HG.gif'); 
background-repeat:no-repeat; 
background-position:top left; 
} 
.top-right{ 
background-image:url('/App_Themes/Cadre_HD.gif'); 
background-repeat:no-repeat; 
background-position:top right; 
} 
.bottom-right{ 
background-image:url('/App_Themes/Cadre_BD.gif'); 
background-repeat:no-repeat; 
background-position:bottom right; 
} 
.bottom-left{ 
background-image:url('/App_Themes/Cadre_BG.gif'); 
background-repeat:no-repeat; 
background-position:bottom left; 
} 
.contenu 
{ 
padding:50px; 
} 
.cadre
{
    width:100%;
}
    </style>
<!--du contenu quelconque-->
<div class="cadre"> 
<div class="top"> 
<div class="right"> 
<div class="bottom"> 
<div class="left"> 
<div class="top-left"> 
<div class="top-right"> 
<div class="bottom-right"> 
<div class="bottom-left"> 
<div class="contenu"> 
<!--le contenu qui dot être encadré et la fermeture des Div-->

Nota : les lettre majuscule sur les nom des images sont sémentiques : Milieu, Bas, Haut, Droite et Gauche

15/09/2010, 15h25
Mahefasoa

Bonjour,

Afin de mieux comprendre, peux-tu joindre ici une capture d'écran?

Merci
17/09/2010, 16h07
zooffy

Voici une copie d'écran. Tu pourras remarquer les coins haut gauche, haut droite et bas droite. C'est l'image qui se prolonge sous l'image prévue en guise de coin.

La seule option que j'ai trouvé pour l'instant pour éviter ça c'est de monter le tout dans une table.
Mais il parait que les Table dans les Table c'est mal ! !
Aprés, je vois pas la différence avec des Div dans des Div ................
17/09/2010, 16h36
Mahefasoa

Bonjour,

Au niveau de background-position, au lieu d'utiliser les top, left, bottom, etc., utilise les pixels: comme pour remonter pour un top c'est background-position: top left => background-position: -2px -2px;.

Ajuste comme tu veux et cela devrait faire l'affaire.
Bien cordialement et bon week-end.
20/09/2010, 09h03
zooffy

Merci pour ton aide.

Je tripotte un peu dans les classes avec cette nouvelle idée, mais je rame pas mal. J'ai du mal à comprendre les mouvements des images.

Bon, je lâche pas, mais je vais peut-être repartir sur mon idée de Table, même si ça plait pas aux adeptes de la nouvelle mode.
20/09/2010, 10h10
Mahefasoa

Bonjour,

Je vais te donner un exemple fonctionnel et tu verras comme cela se comportera-t-il.

Bien cordialement,
20/09/2010, 10h57
Mahefasoa

1 pièce(s) jointe(s)

Bonjour,

Tout est dans l'attache: fonctionnel sous FF et IE8.

Bien cordialement,