Discussion :

[pierrot10]

Bonjour,

J'aimerais savoir comment superposer deux <div>. Soit que le <div id="shadow"> soit dessous le <div id="content">

J'ai essayé plusieurs trucs dans mon css du div "shadow", tel que float:left, mais le div se mets a gauche alors qu'il faut qu'il reste toujours au centre de la page, position:absolute;, bref j'ai pas reussi avoir le resultat qu'il me faut.

merci pour votre aide

voici mon code:

Code CSS :

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
 
#shadow{ 
background-color:#00CCCC; 
height:300px; 
width:650px; 
margin-left:auto;
margin-right:auto;
margin-top:6px; 
z-index:0;}
#content{
	margin-left:auto;
	margin-right:auto;
	top:10px;
	position:relative;
	width:770px;
	height:560px;
	text-align:left;
	background-color:#FFFF99;
	padding-bottom:50px;
	z-index:1;
}

Code HTML :

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

1
2
3
 
<div id="shadows"></div>
<dib id="content"></div>

[Bisûnûrs]

Je pense que tu peux t'inspirer de ça :

http://web.developpez.com/faq/html/?..._superposition

[pierrot10]

Merci bisunurs,
J'ai deja vu ca et j'ai deja essayé avec le position:absolute + z-index(je l'ai pas mentionné, sorry). Le probleme c'est avec cette solution, lorsque je mets position:absolue les margin-left:auto et margin-right:auto ne font plus leur effet de mettre mon <div> au centre de la page. Et c'est primordiale.

Je sais pas s'il y a une autre facon pour qu'un <div> soit toujours au centre de la page?

[Bisûnûrs]

Il y en a une.
Par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
#shadow{ 
   background-color:#00CCCC; 
   height:300px; 
   width:650px;
   position:absolute;
   margin-left:-325px;
   left:50%;
   z-index:1;
}

[beejeridou]

il te suffit de specifier le top et le left apres avoir mis position: absolute!
position = absolute;
left = 300px;
top = 200px;

et voila! tous tes éléments du <div></div> sont placés!

bye bye!

[pierrot10]

Tip top, merci bisunurs, ca marche tres bien