Text meescrollend met hele pagina

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ruben kok

ruben kok

26/08/2011 11:17:45
Quote Anchor link
Goedenmorgen allen,

Ik heb een div met tekst in een andere div staan, zoals hier te zien is:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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)
PHP script in nieuw venster Selecteer het PHP script
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
#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;
}
 
PHP hulp

PHP hulp

28/01/2021 05:37:33
 
John Acid

John Acid

26/08/2011 14:36:40
Quote Anchor link
Zolang je de hoogte van de text-div mee laat groeien met de inhoud, zul je geen scrolbar in je tekst-div krijgen, maar als daardoor je hele website groter wordt dan de viewport zal je helemaal rechts wel een scrolbar krijgen, dat is nu eenmaal zo.
Gewijzigd op 26/08/2011 14:57:12 door John Acid
 
Ozzie PHP

Ozzie PHP

26/08/2011 14:51:33
Quote Anchor link
Wat bedoel je hiermee?

"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
 
John Acid

John Acid

26/08/2011 14:55:47
Quote Anchor link
Ik begrijp eruit dat hij geen scrolbar wil hebben en toch naar beneden kan 'scrollen' wat niet echt kan, ergens krijg je een scrolbar, of in de tekst-div, of in de hele website.
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.
 
Ozzie PHP

Ozzie PHP

26/08/2011 15:14:07
Quote Anchor link
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
 
John Acid

John Acid

26/08/2011 15:46:03
Quote Anchor link
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





Misschien met een zwengel aan de zijkant van je monitor.lol
Gewijzigd op 26/08/2011 15:46:57 door John Acid
 
Ozzie PHP

Ozzie PHP

26/08/2011 16:06:05
Quote Anchor link
hehehe :-)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.