probleme de overflow:auto;

**stars333** · 22/03/2007, 15h52

Bonjour,

je suis en train de dévelloper une page en php que j'ai diviser en plusieurs blocs.
La zone centrale est composé d'une <div id="centrale">.....</div>.
Si la longeur du texte dépasse la hauteur fixé je voulais qu'il apparraisse automatiquement une "barre ascenceur" pour que l'intégralité de la page et du menu soit toujours visible.

Cela a marché :'intégralité de la page et du menu soit toujours visible ; mais la
"barre ascenceur" n'apparrait pas.

Cepandant on a le même effet que si elle était là : on peut faire défiler la zone centrale avec la molette de la souris.

Est-ce que quelqu'un pourrait m'aider à la faire apparaitre car ce n'est pas pratique de ne pas la voir. Je le remercie d'avance.

Voici mon code :

Code php :

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
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
131
132
133
134
135
136
137
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
if (!empty($HTTP_GET_VARS["lien"])) //
	{
		$lien=$HTTP_GET_VARS["lien"]; //la variable lien est récupéré dans $lien
	}
		else {
		$lien=1;} //sinon $lien vaut 1 ce qui correspond à la page service
 
	switch ($lien){
		case 100:	echo"<title>inscription</title>";
				break;
		case 1:	echo"<title>ExcelArts&amp;Metiers</title>";
				break;		
				}
	?>
 
 
	<link type="text/css" rel="stylesheet" href="index.css" />
	<link type="text/css" rel="stylesheet" href="menuderoulant.css" />
 
<script type="text/javascript">
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
</script>
<?php 
if ($lien != 100)
{
include("fctjs.php");
}
?>
 
 
</head>
<body>
<div id="bandeau">
<table id="sep" >
<tr>
    <td width="10%"><img src="1c_MemorialDay_t11.jpg" width="100%" align="left"></td>
	<td width="50%">
 
	<h1 id="titreassoc">A.I.D.E.R<h1>
	</td>
	<td class="point">•&nbsp;•&nbsp;•&nbsp;•&nbsp;•&nbsp;•&nbsp;•&nbsp;•&nbsp;•&nbsp;•&nbsp;•&nbsp;•</td>
</tr>
</table>
 
</div>
 
<div id="principale" >
<div id="menu1" >
<?php
include("menu.php");
?>
</div>
 
<div id="centrale" >
<?php
 
if (!empty($HTTP_GET_VARS["lien"]))
	{
		$lien=$HTTP_GET_VARS["lien"];
	}
		else {
		$lien=1;}
		//test pour savoir quel est la valeur de lien qui est passé en get dans l'url
		//la page choisi est inclus par un include()
 
		//
//include("salon.php");
//
//include("diapo.php");
//
//
//
//
//
//
//
 
	switch ($lien){
		case 1:	include("acceuil.php");
				break;
		case 2: include("associntgen.php");
				break;
		case 3: include("teleenseign.php");
				break;
		case 4: include("teleenseign.php");
				break;	
		case 5: include("qui sommes nous.php");
				break;
		case 8:	include("art et metier.php");
				break;
		case 9: include("origine.php");
				break;
		case 10: include("objectif.php");
				break;
		case 11: include("metiers.php");
				break;	
		case 12: include("originalité.php");
				break;
		case 13: include("identite.php");
				break;
		case 15: include("evenements.php");
				break;
		case 23: include("partenaires.php");
				break;
		case 14: include("formation.php");
				break;
		case 16: include("supportcom.php");
				break;
		case 22: include("contactez-nous.php");
				break;
		case 18: include("diapo.php");
				break;
		case 100: include("inscription.php");
				break;
				}			
 
 
?>
 
 
</div>
 
<div id="pied" >Tous droits réservés</div>
 
</body>
</html>

et voici mon 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
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
html{
   height:90%;
}
 
body
{
	//text-align:Center;
	background:#6699CC;
	font-family:Verdana,Geneva,sans-serif;
	font-size:10pt;
	color:#000000;
	height:96%;
}
 
table
{
width: 100%
 
}
 
#menu1
{
background: #CCCC99;
width:20%;
float: left;
height: 100%;
}
 
#centrale
{
float: right;
width: 80%;
background: white;
overflow:auto;
height: 100%;
}
 
 
 
#bandeau
{
position:center;
background: #CCCC99;
width: 70%;
padding: 0px;
text-align: left;
padding:0px;
margin:0px;
height:18%;
}
 
#principale
{
position:center;
background: #CCCC99;
width: 70%;
padding: 0px;
text-align: left;
padding:0px;
margin:0px;
height: 79%;
}

**heyax** · 22/03/2007, 16h16

Si la longeur du texte dépasse la hauteur fixé je voulais qu'il apparraisse automatiquement une "barre ascenceur" pour que l'intégralité de la page et du menu soit toujours visible.

d'apres ta class centrale le height n'est pas fixe.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
#centrale
{
float: right;
width: 80%;
background: white;
overflow:auto;
height: 100%; 
}

dans ce cas tu doit fixer le height de ton div et ça va marcher ( normalement )

**stars333** · 22/03/2007, 17h06

Salut,

Je n'ai pas très bien compris : "le height de la class centrale n'est pas fixe".

Je l'ai fixé à 100% du conteneur supérieur qui est la <div id="principale" >

Est-ce que tu peux me réexpliquer.

merci d'avance

Mon probléme c'est que ma scrollbar n'est paq apparente même si elle fonctionne. Les visiteurs de ma page web ne verrons jamais à part si une ligne est coupé par la moitié qu'ils peuvent faire descendre la page dans la zone centrale.

J'aimerais donc la faire apparaitre.

merci de votre aide

**heyax** · 23/03/2007, 16h19

Bonjour,

Pour ton cas y a aucune valeure fixe ( dans les class parent ) sur laquel ton div va se referer pour se mettre a 100%.
100% par rapport a quoi !!

comme ça avec ton height:100% ton div va s'etendre en fonction de son contenu ce qui va empecher ton scrool d'apparaitre, par contre si tu donne une taille fixe a ton div ton scrool va appraitre quand le contenu depessera cette taille

et pour fixier sa taille :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
#centrale
{
float: right;
width: 80%;
background: white;
overflow:auto;
height: 400px; /* a titre d'exemple */
}

j'espere que c'est un peu plus clair

probleme de overflow:auto;

CSS

Discussions similaires

Partager

Partager