pb positionnement en bas d'une div

Version imprimable

bonjour,

Après de multiples manips et de recherches, je n'est toujours pas résolu mon problème.

En fait ce que je voudrais c'est faire afficher une balise div en bas d'une autre balise div.

voici le code du fichier index.php :

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
 
 
<div id="conteneur">
	<div id="banniere">BIONORMA</div>
	<div id="contenu">
		<div id="menu">
			<div id="titre_menu">Accueil</div><br><br>
			<p align="center">
				<a href="index.php">Accueil</a><br>
				<a href="index.php?page=horaire">Horaires</a><br>
	  		</p>
			<div id="titre_menu">Menu</div><br><br>
			<p align="center">
				<a href="">Lien</a><br>
				<a href="">Lien</a><br><br><br>
	  		</p>
			<div id="titre_menu">Menu</div><br><br>
			<p align="center">
				<a href="">Lien</a><br>
				<a href="">Lien</a><br><br><br><br>
	 		</p>
		</div>
		<div id="centre">
			<?php
                                if(isset($_GET['page']) AND file_exists($_GET['page'].'.php'))
                                {
                                        include $_GET['page'].'.php';
                                }
                                else
                                {
                                        //include 'index.php';
                                }
                        ?>
		</div>
	</div>
	<div id="barre_bas"></div>
</div>

et voici le code du fichier style.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
 
 
#conteneur {
	position:relative;
	left:50%;
	margin-top: 16px;
	margin-left: -400px;
	width:800px;
	background-color: #66FF99;
	visibility: visible;
}
 
#contenu {
	position:relative;
	width:800px;
	top:200px;
	min-height:575px;
	background-color:#66FF99;
}
 
#barre_bas {
	height:16px;
	background-image:url(Images/barre_bas.JPG);
	background-repeat:no-repeat;
}

Si quelqu'un pouvais m'aider, il sera le bienvenu.
Je vous remercie d'avance pour vos réponses.

Bonjour,

J'ai eu ce problème moi aussi. Après beaucoup d'essais j'en suis arrivé aux conclusions suivantes:
- La hauteur du conteneur doit être spécifiée,
- La position du contenu doit être Absolute (bizarre),
- Le contenu doit être positionné avec Bottom (ça c'est logique).

Ce qui implique les modifs suivantes sur ta feuille de styles:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 #conteneur { position:relative; left:50%; Height:100px; margin-top: 16px; margin-left: -400px; width:800px; background-color: #66FF99; visibility: visible; } #contenu { position:Absolute; width:800px; Bottom:0px; min-height:575px; background-color:#66FF99; }
Bonne continuation!

27/07/2006, 09h34
kardock

Tu est sur d'absolute :

Citation:

- La position du contenu doit être Absolute

Ca me parait vraiment bizarre, pas logique, ce serait plutor float et, et la hauteur pas forcée ...
27/07/2006, 09h36
bogsy15

C'est vrai que c'est bizarre.
La solution que tu m'a donné ne marche pas. C'est bizarre de mettre une hauteur fixe pour le conteneur.
Moi je voudrais que la hauteur du conteur soit fonction de la hauteur de son contenu.
27/07/2006, 10h17
bogsy15

j'ai réussi a la placer a peu près la où je voulais. Mais quand j'inclue une page, mon div=barre_bas passe par dessus lla page incluse.

Je voudrais qu'elle descende en fonction de la hauteur de la page incluse.

J'ai remodifié le code comme ceci :

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
 
<div id="conteneur">
	<div id="banniere">BIONORMA</div>
	<div id="contenu">
		<div id="menu">
			<div id="titre_menu">Accueil</div><br><br>
			<p align="center">
				<a href="index.php">Accueil</a><br>
				<a href="index.php?page=horaire">Horaires</a><br>
				<a href="index.php?page=prive">test</a><br>
				<a href="index.php?page=prive/prive">test</a><br>
				<a href="index.php?page=chemin">Lien</a><br><br><br>
	  		</p>
			<div id="titre_menu">Menu</div><br><br>
			<p align="center">
				<a href="">Lien</a><br>
				<a href="">Lien</a><br>
				<a href="">Lien</a><br>
				<a href="">Lien</a><br><br><br>
	  		</p>
			<div id="titre_menu">Menu</div><br><br>
			<p align="center">
				<a href="">Lien</a><br>
				<a href="">Lien</a><br>
				<a href="">Lien</a><br>
				<a href="">Lien</a><br><br><br><br>
	 		</p>
		</div>
		<div id="centre">
			<?php
                                if(isset($_GET['page']) AND file_exists($_GET['page'].'.php'))
                                {
                                        include $_GET['page'].'.php';
                                }
                                else
                                {
                                        //include 'index.php';
                                }
                        ?>
		</div>
		<div id="barre_bas"></div>
	</div>
 
</div>

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
 
#conteneur {
	position:absolute;
	left:50%;
	margin-top: 16px;
	margin-left: -400px;
	width:800px;
	background-color: #66FF99;
	visibility: visible;
}
#banniere {
	position:absolute;
	width:800px;
	height:167px;
	background-color: #6699FF;
	background-image:url(Images/fond_banniere.jpg);
	text-align: right;
	font-size: 20px;
	font-style: italic;
	font-weight: bold;
	letter-spacing: 5px;
	line-height : 40px;
}
 
#contenu {
	position:absolute;
	top:200px;
	background-color:#9900CC;
}
 
#menu {
	background-color:#66FF99;
	position:absolute;
	width:150px;
 
}
#titre_menu {
	position:absolute;
	background-image:url(Images/BOUTON-2.jpg);
	width:150px;
	height:24px;	
	text-align: center;
	font-weight: bold;
	line-height : 20px;
 
}
#centre {
	position:absolute;
	background-color:#66FF99;
	left:178px;
	width:587px;
}
 
#barre_bas {
	height:16px;
	background-image:url(Images/barre_bas.JPG);
	width:800px;
 
}

Maintenant mon div barre_bas est positionné en haut de mon div contenu. Je n'arrive pas a le positionner en bas de contenu.
Quelqu'un a une idée ?

Si tu souhaite une hauteur qui se modifie avec le contenu il faut eviter les position:absolute.

Voici ton css modifié

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
62
#conteneur {
	position:absolute;
	left:50%;
	margin-top: 16px;
	margin-left: -400px;
	width:800px;
	background-color: #66FF99;
	visibility: visible;
}
#banniere {
	/*position:absolute;*/
	width:800px;
	height:167px;
	background-color: #6699FF;
	background-image:url(Images/fond_banniere.jpg);
	text-align: right;
	font-size: 20px;
	font-style: italic;
	font-weight: bold;
	letter-spacing: 5px;
	line-height : 40px;
}

#contenu {
	/*position:absolute;
	top:200px;*/
	margin-top: 33px;
	background-color:#9900CC;
}

#menu {
	background-color:#66FF99;
	/*position:absolute;*/
	width:150px;
	float:left;

}
#titre_menu {
	/*position:absolute;*/
	background-image:url(Images/BOUTON-2.jpg);
	width:150px;
	height:24px;	
	text-align: center;
	font-weight: bold;
	line-height : 20px;

}
#centre {
	/*position:absolute;*/
	background-color:#66FF99;
	/*left:178px;*/
	margin-left: 150px;
	/*width:587px;*/
}

#barre_bas {
	height:16px;
	background-image:url(Images/barre_bas.JPG);
	width:800px;
	clear:both;

}

27/07/2006, 14h27
bogsy15

Super ca marche. Merci bcp.

Le résultat est exactemement celui que je voulais.

Merci à tous.