Probleme d'une boite dans une boite

Version imprimable

Salut

voici mon code HTMl :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">	
		<head>
			<title></title>
			<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
		<link href="main2.css" rel="stylesheet" type="text/css" />
 
 
		</head>
 
		<body>
 
			<div id="conteneur">
				<div id="header">			
 
				</div>
			</div>
		</body>
	</html>

le css :

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
	body {
		margin: 0;
		margin-top:10px;
		padding: 0;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.8em;
		background-color: #fff;
	}
 
	#conteneur {
		width: 970px;
		margin-left: auto;
		margin-right: auto;
		background-color: #99C00C;
		height:500px;
	}
 
	#header {
		position:absolute;
		top:50px;
		left:100px;
		width:50px;
		height:50px;
		background-color: #99CCCC;
	}

Pourquoi la boite header ne bouge pas avec l'autre ?

thx @+

20/07/2006, 15h07
Seth77

ah la la ..pour que personne ne reponde cela doit etre complique ou trop bete .. :roll:
20/07/2006, 19h02
Auteur

bonjour,

Citation:

Envoyé par Seth77

ah la la ..pour que personne ne reponde cela doit etre complique ou trop bete .. :roll:

:lol:
Non pas vraiment...:?

Citation:

Envoyé par Seth77

Pourquoi la boite header ne bouge pas avec l'autre ?

quelle autre boite ??? Conteneur ? Que veux tu dire par "ne bouge pas avec l'autre" ?

Peut-être un début de réponse : Au header tu as spécifié une position absolue et spécifié les paramètres top, left mais rien au niveau du conteneur.
20/07/2006, 19h37
Seth77

Ben quand on met en absolue il prend les reperes par rapport au conteneur parent donc il devrait se deplacer avec la boite parente non ?

je crois que tu as confondu les positions relative (par rapport au conteneur) et absolue (par rapport à la fenêtre)

Dans le code ci-dessous : #header a une postion relative (dans ton code il a la position absolue) et #header2 a une position absolue.

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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
body {
                margin: 0;
                margin-top:10px;
                padding: 0;
                font-family:Verdana, Arial, Helvetica, sans-serif;
                font-size: 0.8em;
                background-color: #fff;
        }
        
        #conteneur, #conteneur2 {
                width: 500px;
                margin-left: auto;
                margin-right: auto;
                background-color: #99C00C;
                height:100px;
        }
        
        #header {
                position:relative;
                top:50px;
                left:100px;
                width:50px;
                height:50px;
                background-color: #99CCCC;
        }
 
        #header2{
        position:absolute;
                top:50px;
                left:100px;
                width:50px;
                height:50px;
                background-color: #0000FF;
 
//-->
</style>
 
</head>
 
<body>
<div id="conteneur">
<div id="header">
 
</div>
</div>
<br><br><br>
<div id="conteneur2">
<div id="header2">
 
</div>
</div>
 
</body>
 
</html>

21/07/2006, 14h23
sedryk

Comme indiquer par Auteur, le fait que ta div header est en position absolute l'a fait sortir du "flot" des éléments de ta page.

Sa position sera donc constante quelque soit les éléments de ta page. Elle peut même arriver à passer dessous ou dessus les autres Div restées dans le "flot"