Pourquoi j'ai un overflow ?

Version imprimable

06/07/2007, 10h22
kurkaine

Pourquoi j'ai un overflow ?

Bonjour,

Je dois construire une feuille de style pour un CMS. Le menu gauche, le droit et le body du site sont appelé à partir de fonction que je ne maitrise pas. Lorsque j'appelle ces fonctions, le footer ne s'agrandit pas et tout est affiché par dessus le footer. Ces fonctions que je ne maitrise pas construisent des tableaux. Si j'écris dans mon CSS contenant les menus et le body overflow = hidden, évidemment je n'ai plus de débordement mais tout le contenu n'apparait plus, ce qui est pire.

Existe-il une solution pour que mon site s'agrandit automatiquement ? Pour éviter ce problème dois-je recoder mon site en tableau (qui fonctionne puisque les templates que je modifie est construit en tableau)...

Merci de vos réponses.
06/07/2007, 10h47
Strix

Salut

Avec du code ce serait plus facile pour nous de voir ton problème.
Et ce n'est pas hyden mais hidden ;)

Voilà le css qui construit le menu gauche, le bodyet le menu droit. Le menu gauche et le body se trouve dans une div, et le menu droit dans une autre div. Puis le menu gauche et le body sont découpés en 2 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
#main_body
{
	width:100%;
	height:100% !Important;
	height:1%; 
	height:1000px; 
	background-color:#FFFFFF;
}
 
/* Menu Gauche + Centre */
#content_centre
{
	float:left;
	width:80%;	/* Si je n'ai pas de menu droit, je positionne ici à 100% */
	height:100%;
	background-color:#FFFFFF;
}
 
/* Menu Droit */
#content_droit
{
	float:right;
	width:20%;
	height:100%; 
	background-color:#FFFFFF;
}
 
/* Menu gauche */
#content_centre_gauche
{
	float:left;
	width:25%;	/* Si je n'ai pas de menu droit, je positionne ici à 100% */
	height:100%;
	background-color:#FFFFFF;
}
/* Corps */
#content_centre_droit
{
	float:left;
	width:75%;	/* Si je n'ai pas de menu droit, je positionne ici à 100% */
	height:100%; 
	background-color:#FFFFFF;
}

Le code correspondant :

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
					<!-- MAIN BODY  -->
					<div id="main_body">
 
						<!-- MAIN BODY : Centre  -->
						<div id="content_centre">
 
								<!-- CONTENT CENTRE - Menu Gauche  -->
								<div id="content_centre_gauche">
 
												<!-- Affiche le menu de gauche //-->
												<table border="0" width="100%" cellspacing="5">				
												<?php //echo DIR_WS_INCLUDES . FILENAME_COLUMN_LEF;
												require(DIR_WS_INCLUDES . FILENAME_COLUMN_LEFT); ?>
												</table>
												<!-- fin menu de gauche //-->
 
								</div><!-- fin Menu gauche --> 
 
								<!-- CONTENT CENTRE - Body du centre  -->
								<div id="content_centre_droit"> 
								<?php /* */?>
													<table border="0" width="100%" cellspacing="5">			
													<?php  													
													//-- Si un fichier template existe déjà dans le Répertoire /templates/mon_temp/content 
													//   (define dans le fichier /include/configure.php) --//
													if (isset($content_template) && file_exists(DIR_WS_CONTENT . basename($content_template))) 
													{
															//-- Utilise le fichier dans le répertoire  Content --//
															require(DIR_WS_CONTENT . basename($content_template));
													} 
													else 
													{
															//-- Utilise mon fichier .tpl.php => C'est notre cas --//
															//echo  DIR_WS_CONTENT . $content;
															require(DIR_WS_CONTENT . $content . '.tpl.php');
													}													
													?>
													</table>
								<?php /**/ ?>
								</div><!-- fin body --> 
 
						</div><!-- fin centre --> 
						<!----------------------------------------------------------------->
 
						<!-- MAIN BODY : Droit  -->
						<div id="content_droit">
 
										<!-- Affiche le menu de droit //-->
										<table border="0" width="100%" cellspacing="0" cellpadding="5"> 
										<?php 
										 //echo DIR_WS_INCLUDES . FILENAME_COLUMN_RIGHT;
										require(DIR_WS_INCLUDES . FILENAME_COLUMN_RIGHT); ?>
										</table>
										<!-- fin le menu de gauche //-->
						</div><!-- fin droit --> 
 
						<div id="clear_float"></div><!-- enlève les float --> 
					</div><!-- fin body -->

Le contenu des menus et du body sont généré par le CMS.

C'est compréhensible ?

10/07/2007, 10h39
Xann_71
Salut!
Bon alors moi je me pose une question. Dans ton code tu as:
Code:

1 2 3 4 5 6 7 8 9 #main_body { width:100%; height:100% !Important; height:1%; height:1000px; background-color:#FFFFFF; }
D'abord tu déclare ton height à 100%, puis à 1% :?, puis à 1000px 8O ??!
La j'avoue je comprend pas trop comment sa marche?
10/07/2007, 13h02
kurkaine

Heu... Oublie le dernier Hight:1000px, c'était pour un test : et si je fixais la hauteur.

En fait, les deux high à 1% et 100%... C'est un hack que j'ai pu lire afin que la zone s'adapte sur IE et FF.

Je n'ai pas su faire en pure CSS, j'ai du utiliser un tableau qui englobe les menus droit et gauche ainsi que le centre. De cette façon, mes zones s'adaptent bien.
10/07/2007, 13h52
Xann_71

Bon j'ai peut etre une solution:
Crée un div qui englobe les deux menus et le body.
ensuite dans ton css, tu mettra "overflow: hidden;" dans la partie qui correspond à ce div.

Explication:
Grâce au "overflow: hidden;", le div qui englobe les trois autres s'adaptera à la taille du plus grand des trois. Vu qu'il n'est pas flottant, le footer s'affichera en dessous.

Si j'ai bien comprit ton problème, essai ça.
Si sa ne fonctionne toujours pas, essai de donner un lien vers ta page et d'afficher ton code source dans un message.

A+
10/07/2007, 13h56
kurkaine

Si je met un overflow : hidden, effectivement mon texte qui déborde ne s'affichera pas. Le problème est que ce texte qui déborde n'est autre que le menu gauche, le menu droit et le content.

Je vais trouver le moyen de faire tourner la livebox au boulot en tant que serveur pour montrer le pb que j'ai.
10/07/2007, 14h24
Xann_71

Ben je ne comprend pas bien,normalement avec le "overflow", les contenu devraient s'afficher en entier et le div englobeur devrai s'étendre jusqu'en dessous du plus grand des div. SI tu peux mettre ton code html et css dans ce sujet sa pourrais nous aider à repérer ton problème.