Text meescrollend met hele pagina
Ik heb een div met tekst in een andere div staan, zoals hier te zien is:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fareno redesign</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="wrapper">
<div id="top-balk"> </div>
<div id="logo"> </div>
<div id="content">
<div id="tekstvak"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ullamcorper eros. Maecenas facilisis, neque nec faucibus interdum, lacus enim venenatis ante, eget aliquam nulla neque vehicula lectus. Mauris et metus eget arcu sodales pretium. Nulla sodales sapien et nunc molestie placerat. In hac habitasse platea dictumst. Aenean fringilla neque vitae nibh hendrerit sed vulputate nisi feugiat. Donec cursus viverra lectus non semper. Etiam posuere tempus leo id mollis. Aenean accumsan purus vitae eros euismod eget rutrum dui lacinia. Suspendisse potenti. Etiam suscipit scelerisque sem, in tempus turpis eleifend vel. Aenean at condimentum enim. Sed pharetra libero non elit ornare quis lobortis massa commodo</p></div>
</div>
<div id="menu"> </div>
</div>
<div id="footer"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fareno redesign</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="wrapper">
<div id="top-balk"> </div>
<div id="logo"> </div>
<div id="content">
<div id="tekstvak"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim ullamcorper eros. Maecenas facilisis, neque nec faucibus interdum, lacus enim venenatis ante, eget aliquam nulla neque vehicula lectus. Mauris et metus eget arcu sodales pretium. Nulla sodales sapien et nunc molestie placerat. In hac habitasse platea dictumst. Aenean fringilla neque vitae nibh hendrerit sed vulputate nisi feugiat. Donec cursus viverra lectus non semper. Etiam posuere tempus leo id mollis. Aenean accumsan purus vitae eros euismod eget rutrum dui lacinia. Suspendisse potenti. Etiam suscipit scelerisque sem, in tempus turpis eleifend vel. Aenean at condimentum enim. Sed pharetra libero non elit ornare quis lobortis massa commodo</p></div>
</div>
<div id="menu"> </div>
</div>
<div id="footer"></div>
</body>
</html>
Nu is mijn vraag, de tekst die in "tekstvak" staan. Als je dan naar beneden scrolt moet alleen de tekst naar beneden scrollen als er meer tekst staat dan de maximale hoogte en dat zonder scrollbalk. Hoe doe ik dit?.
*dit is alleen de opzet, dus fouten in de css mogen genegeerd worden*
CSS:
Code (php)
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
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
#wrapper{
margin: 0 auto;
}
#top-balk{
width:100%;
background-color:#333333;
height:50px;
position:absolute;
}
#logo{
background-color:#FF0000;
width:100%;
height:150px;
margin-bottom:10px;
}
#content{
position:relative;
width:95%%;
min-height:550px;
background-color:#99CC00;
padding-left:100px;
padding-top:20px;
padding-bottom:10px;
}
#tekstvak{
width:50%;
min-height:300px;
max-height:550px;
min-width:500px;
max-width:500px;
background-color:#FFFF00;
position:relative;
padding:5px;
overflow: auto;
}
#menu{
margin-top:10px;
width:100%;
height:100px;
background-color:#0066CC;
}
#footer{
width:100%;
height:50px;
background-color:#CCFF00;
}
margin: 0 auto;
}
#top-balk{
width:100%;
background-color:#333333;
height:50px;
position:absolute;
}
#logo{
background-color:#FF0000;
width:100%;
height:150px;
margin-bottom:10px;
}
#content{
position:relative;
width:95%%;
min-height:550px;
background-color:#99CC00;
padding-left:100px;
padding-top:20px;
padding-bottom:10px;
}
#tekstvak{
width:50%;
min-height:300px;
max-height:550px;
min-width:500px;
max-width:500px;
background-color:#FFFF00;
position:relative;
padding:5px;
overflow: auto;
}
#menu{
margin-top:10px;
width:100%;
height:100px;
background-color:#0066CC;
}
#footer{
width:100%;
height:50px;
background-color:#CCFF00;
}
Gewijzigd op 26/08/2011 14:57:12 door John Acid
"Als je dan naar beneden scrolt moet alleen de tekst naar beneden scrollen als er meer tekst staat dan de maximale hoogte en dat zonder scrollbalk. Hoe doe ik dit?."
Als je overflow op scroll zet krijg je een scrollbalk als de inhoud niet meer in het tekstvak past. Is dat wat je bedoelt?
http://www.w3schools.com/cssref/pr_pos_overflow.asp
Je kunt niet scrollen zonder scrolbar, die geeft juist aan dat de inhoud groter is dan de div of website, die moet(en) zich dan aanpassen.
Anyhow, misschien iets met javascript ofzo...
http://www.dyn-web.com/code/scroll/demos.php
Ozzie PHP op 26/08/2011 15:14:07:
Als je geen scrollbar hebt, hoe moet je dan scrollen :-s
Anyhow, misschien iets met javascript ofzo...
http://www.dyn-web.com/code/scroll/demos.php
Anyhow, misschien iets met javascript ofzo...
http://www.dyn-web.com/code/scroll/demos.php
Misschien met een zwengel aan de zijkant van je monitor.lol
Gewijzigd op 26/08/2011 15:46:57 door John Acid