Images au coin d'un div

**kangouroub** · 06/07/2010, 22h25

Bonjour

Je suis en train de travailler sur un petit site et je n'arrive pas a faire la chose suivante

:

J'ai un un div qui contient mes informations et je souhaiterais mettre aux coins de cette div une image. Je n'arrive pas a me représenter la façon de le faire.

Voici une illustration pour que vous puissiez mieux comprendre

:

Le carré jaune représente mon div et les carré rouge les images que je veux placer.
Mon carré jaune doit en plus etre extensible et les rouge ne doivent quand a eux pas l'etre.

Merci par avance de votre aide

**tsunamichups** · 07/07/2010, 09h06

hm je ne sais pas si tes div rouge doivent ressortir, mais tu peut faire un truk dans le genre

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<style type="text/css">
#rouge
{
position:absolute;
//a modifier celon besoins
margin-top : 20px;
margin-left : 10px;
}
</style>
 
<div id="jaune">
<div id="rouge"></div>
</div>

ta div rouge appartiens a ta div jaune,
le position absolute la sort du flux mais la laisse a sa place, et les margin la position en fonction de ca place initial

Je crois que s'est plus ou moins ce que tu veux

(enfin je crois ^^)

**kangouroub** · 07/07/2010, 10h12

J'ai testé ta solution si je l'ai bien comprise.
J'ai donc fait de la façon suivante

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
 
<html>
	<head>
		<style type="text/css">
			#rouge
			{
				position:absolute;
				margin-top : 20px;
				margin-left : 10px;
			}
		</style>
	</head>
	<body>
		<div id="jaune" style="background-color: yellow;">
			<div id="rouge" style="background-color: red;">
				test
			</div>
		</div>
	</body>
</html>

Voici le resultat

Mais malheureusement ca ne donne pas le resultat attendu. Peut ai-je mal compris.

Et pour répondre a ta question, mes carré rouges doivent rester derrière mon carré jaune

**tsunamichups** · 07/07/2010, 10h22

...

**tsunamichups** · 07/07/2010, 10h22

Envoyé par kangouroub

J'ai testé ta solution si je l'ai bien comprise.
J'ai donc fait de la façon suivante

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
 
<html>
	<head>
		<style type="text/css">
			#rouge
			{
				position:absolute;
				margin-top : 20px;
				margin-left : 10px;
			}
		</style>
	</head>
	<body>
		<div id="jaune" style="background-color: yellow;">
			<div id="rouge" style="background-color: red;">
				test
			</div>
		</div>
	</body>
</html>

Voici le resultat

Mais malheureusement ca ne donne pas le resultat attendu. Peut ai-je mal compris.

Et pour répondre a ta question, mes carré rouges doivent rester derrière mon carré jaune

S'est la base du travail ^^, la il te manque le css de ton div jaune

**kangouroub** · 07/07/2010, 10h40

Je n'arrive vraiment pas a le faire.
J'ai mis ce CSS Sur ma div jaune. Mais ca ne donne toujours rien de bien.

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
<html>
	<head>
		<style type="text/css">
			#rouge
			{
				position:absolute;
				margin-top : 20px;
				margin-left : 10px;
				background-color: red;
				width: 100px;
				height: 100px;
			}
			#jaune
			{	
				background-color: yellow;
				margin-left: auto;
				margin-right: auto;
				width: 50%;
			}
		</style>
	</head>
	<body>
		<div id="jaune">
			<div id="rouge">
				test<br />
				test<br />
				test<br />
				test<br />
				test<br />
				test<br />
				test<br />
				test<br />
				test<br />
				test<br />
				test<br />
				test<br />
				test<br />
			</div>
		</div>
	</body>
</html>

Je comprends pas pourquoi le jaune n'apparait pas.

je suis mauvais...
Help...

**tsunamichups** · 07/07/2010, 10h51

je pense que tu devrais rajouter un doctype au debut de ta page

Code :

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

1
2
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

sinon le css risque de ne pas être interpréteur

et essais de mettre des taille fixe pour le div jaune

**kangouroub** · 07/07/2010, 11h07

Wouhou j'y suis presque !!
Merci beaucoup pour ton aide d'ailleurs
Le carré rouge est bien placé. Le seul problème qu'il me reste est que le carré rouge apparait au dessus du jaune et non l'inverse. J'ai essayé avec le z-index mais rien n'y fait. Tu as une idée ??

**tsunamichups** · 07/07/2010, 11h18

J'ai modifier la structure pour les besoins

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<style type="text/css">
			#rouge
			{
 
				margin-left: auto;
				margin-right: auto;
				background-color: red;
				width: 100px;
				height: 100px;
				z-index:10;
			}
			#jaune
			{	
				position:absolute;
				margin-top : 20px;
				margin-left : 10px;
				background-color: yellow;
				width: 200px;
				height:500px;
				z-index:100;
			}
		</style>
	</head>
	<body>
		<div id="rouge">
			test<br />
			test<br />
			<div id="jaune">
 
			</div>
		</div>
	</body>
</html>

ca reste une base de travail à améliorer

**kangouroub** · 07/07/2010, 11h23

en effet en inversant les div rouge et jaune l'ordre fonctionne mais dans ce cas je ne peux pas mettre un carré rouge de la même façon en bas à droite de mon carré jaune

**tsunamichups** · 07/07/2010, 11h47

j'avais oublier celui du bas
du coups faut rechanger la structure

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<style type="text/css">
			.conteneur
			{
				width:200px;
				margin-left: auto;
				margin-right: auto;
			}
 
			#rouge
			{
				position:absolute;
				margin-top:-50px;
				background-color: red;
				width: 100px;
				height: 100px;
				z-index:1;
			}
			#jaune
			{	
				position:relative;
				margin-top:50px;
				margin-left:20px;
				background-color: yellow;
				width: 200px;
				height:500px;
				z-index:200;
			}
 
			#rouge-b
			{
				position:absolute;
				margin-top:-50px;
				margin-left:150px;
				background-color: red;
				width: 100px;
				height: 100px;
				z-index:1;
			}
		</style>
	</head>
	<body>
		<div class="conteneur">
			<div id="rouge">
				test<br />
				test<br />
			</div>
			<div id="jaune">
				test
			</div>
			<div id="rouge-b">
				test2<br />
				test2<br />
				</div>
		</div>
	</body>
</html>

**kangouroub** · 07/07/2010, 14h22

c'est parfait merci !!!

**tsunamichups** · 07/07/2010, 14h26

Y a pas de quoi

a plus tard

Images au coin d'un div

CSS

Discussions similaires

Partager

Partager