Positionner une image en bas d'un Div

**zooffy** · 15/09/2010, 09h28

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 :

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

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>
....

**Mahefasoa** · 15/09/2010, 09h37

Bonjour,

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

Bien cordialement,

**zooffy** · 15/09/2010, 10h47

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.

**Mahefasoa** · 15/09/2010, 10h51

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,

**zooffy** · 15/09/2010, 14h05

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 :

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

**Mahefasoa** · 15/09/2010, 15h25

Bonjour,

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

Merci

**zooffy** · 17/09/2010, 16h07

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 ................

**Mahefasoa** · 17/09/2010, 16h36

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.

**zooffy** · 20/09/2010, 09h03

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.