Discussion :

[bogsy15]

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 :

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

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

[declique]

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 :

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

[kardock]

Tu est sur d'absolute :

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

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

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

[bogsy15]

J'ai remodifié le code comme ceci :

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

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

[masu]

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

Voici ton css modifié

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

}

[bogsy15]

Super ca marche. Merci bcp.

Le résultat est exactemement celui que je voulais.

Merci à tous.