Probleme d'une boite dans une boite

**Seth77** · 20/07/2006, 11h19

Salut

voici mon code HTMl :

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

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

**Seth77** · 20/07/2006, 15h07

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

**Auteur** · 20/07/2006, 19h02

bonjour,

Envoyé par Seth77

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

Non pas vraiment...

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.

**Seth77** · 20/07/2006, 19h37

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 ?

**Auteur** · 20/07/2006, 21h38

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 :

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

**sedryk** · 21/07/2006, 14h23

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"

Probleme d'une boite dans une boite

HTML

Vue hybride

Discussions similaires

Partager

Partager