Taille des div en fonction du contenu

Version imprimable

22/05/2007, 19h50
frog43

Taille des div en fonction du contenu

Bonjour,

voila j'ai un div qui contient tout mon site et le contenu du site est dans une base de donée ...
J'affiche le tout avec du php et la mise en page avec du css ...

Mon problême est que je souhaite avoir la taille de mon dic qui s'agrandi avec le contenu ( de cette façon quand j'ajoute des truk dans ma base la taille du div s'agrandi) sa m'éviterait de la réglé à chaque fois et puis ce n'est pas la même sur toutes mas pages ...

Alors une taille adaptable serait plus judicieus mais voilà je ne sais pas comment faire ....

http://mine-auvergne.fr/ouvrage.php

Par exemple pour ce site quand je rajoute un produit dans la base, il est bien afficher mais le div ne s'agrandi pas et il faut donc que je le fasse moi même ...
22/05/2007, 21h41
Dan_A

L'utilisation de position:absolute; est responsable de ce problème.
Si on change la taille du texte, tout est à revoir.
Si on réduit la taille de la fenêtre, il se passe des choses étranges.

Il faut utiliser le flux soit avec la position par défaut, soit avec float (suivi d'un clear) pour que tout s'ajuste sans intervention...

L'image en bas ne passe pas avec IE 6.
23/05/2007, 09h16
1407.

Copier le code aiderais a voir ou se situe le probleme.

Ceci dit il ya de fortes chances que le probleme vienne simplement du fait que tu aie donné une valeur absolue a ton height (ex : 100, 200, 500, ex) ce qui fait que peu importe ce que tu ajoute, ca ne dépassera pas cette valeur la...

essaye plutot de ne pas mettre de valeur pour ton height, ou si pour des raisons esthétiques tu veux que ton site utilise toute la longueur de ta page, ya toujours le min-height:100% que tu pourrais utiliser.

Voila, peux difficilement en dire plus sans voir le code, meme possible que je sois dans le champ gauche... 8O

Bon voilà,

la page concernée est ici :

http://www.designcreation.fr/ta/acceuil.php

La précédente n'était qu'un exemple.

Mon problême est comme vous pouvez le voir que lorsque le div qui contient les texte s'agrandi, le div qui contient tout s'agrandi aussi mais pas jusqu'au fond ...

Si sa peut aider, voici 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
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
body{
	background-color:#c2e9f4;
}
 
#site{
	margin-left : auto;
	margin-right : auto;
	border : 0px;
	width:975px;
	z-index:1;
}
 
#contenu{
	position:absolute;
	top:0px;
	width:975px;
	min-height:100%;
	background-color:#4771ab;
	z-index: 2;
	overflow: visible;
}
 
#banniere{
	position:absolute;
	background-image:url(../img/banniere.jpg);
	background-repeat:no-repeat;
	width:975px;
	height:184px;
	z-index: 4;
}
 
#drapeaufr{
	position:absolute;
	width:31px;
	height:23px;
	z-index: 6;
	top:158px;
	left:890px;
}
 
#drapeaugb{
	position:absolute;
	width:31px;
	height:23px;
	z-index: 7;
	top:158px;
	left:935px;
}
 
#logo{
	position:absolute;
	top:-8px;
	left:0px;
	z-index: 5;
}
 
.titre{
	font-weight:bold;
	color:#FFFFFF;
	font-size:20px;
}
/*------MENU------*/
#menu{
	position:absolute;
	background-color:#243188;
	z-index:1;
	top:0px;
	width: 200px;
}
 
dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
 
#menu dt {
	cursor: pointer;
	margin: 2px 0;
	height: 20px;
	line-height: 20px;
	font-weight: bold;
	color:#FFFFFF;
	border-bottom: 1px solid white;
	background:#243188;
}
 
#menu dd {
	border-bottom: 1px solid white;
	border-top:1px solid white;
}
 
#menu li {
	text-align: center;
}
 
#menu li a, #menu dt a {
	color: #ffffff;
	text-decoration: none;
	display: block;
	border: 0 none;
}
 
#menu li a:hover, #menu dt a:hover {
	background:#bf070e;
}
 
#fondmenu{
	position:absolute;
	top:0px;
	left:0px;
	min-height:100%;
	background-color:#243188;
	width:200px;
	z-index: 3;
}
 
#conteneurmenu{
	position:absolute;
	top:186px;
	width:200px;
	z-index: 1;
}
 
#logodesign{
	position:absolute;
	z-index: 5;
	top:400px;
	left:71px;
}

Cordialement,
Frog43.

30/05/2007, 21h15
marcha

c'est normal:

Code:

<div style="position:relative; top:200px; left:220px; width:755px;">

Tu demandes à ton contenu de se décaler de 200px vers le bas; c'est donc ce décalage que tu retrouves en bas.

Autrement tu devrais suivre les consils donnés par Dan_A et revoir ton montage en supprimant les positions absolute. Tu dois aussi pouvoir supprimer le div #contenu qui fait double emploi avec le #site.
12/06/2008, 14h52
frog43

Montage revu et corrigé mais pour un autre site ...

Merci de votre aide. ;)