probleme de overflow:auto;
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:
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&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">• • • • • • • • • • • •</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:
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%;
} |
