dieuwke1995
Gebruiker
- Lid geworden
- 25 apr 2008
- Berichten
- 49
hallo,
ik heb een website met een aantal verschillende div's, een met logo (links), een met korte info (rechts), een met het menu (onder, tussen logo en info in) en een met tekst (boven, tussen logo en info in).
nou wil ik graag dat ik binnen dit laatst genoemde div kan scrollen, dus dat de andere div's gewoon blijven staan
De volgende code vond ik via google voor css:
.page {
overflow: auto;
}
Dit werkt, maar nu wordt de div ineens heel smal... Ik weet wel hoe ik deze breder kan maken, maar eerst nam de div gewoon aldoor automatisch de goede breedte aan, hoe groot/klein ik het scherm ook maakte... Hoe kan ik ervoor zorgen dat dit weer gebeurt?
Dieuwke
HTML-code:
<html>
<head>
<title>Henk Haagsma Architect</title>
<link rel=StyleSheet href="css.css" type="text/css">
</head>
<body>
<div class="header">
<img src="image_header.jpg" alt="logo">
</div>
<div class="info">
<p> Boerakkerweg 7 <br>
9321 EL Peize </p>
<p> tel: (050) 503 42 39 </p>
<p> fax: (050) 503 55 06 </p>
<p> mobiel: 06 21 243 243 <p>
<p> @: h.t.haagsma@pl.hanze.nl </p>
</div>
<div class="page">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor augue, dictum hendrerit vulputate sit amet, posuere eu magna. Maecenas purus diam, volutpat et tempor vitae, pharetra a justo. Integer ornare tempus sem eget malesuada. Maecenas tristique, nulla ut dictum lobortis, tortor magna suscipit mi, id blandit ipsum elit vitae nisi. Praesent et sem sed sapien tempus pellentesque nec id neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris sit amet est diam. Nulla viverra placerat eros non convallis. Suspendisse at varius neque. Phasellus sit amet felis eros, eu tristique justo. Ut risus nisi, viverra sed mollis eget, tincidunt nec arcu. Aliquam pretium quam quis purus interdum faucibus.
Vestibulum libero ante, pellentesque non auctor ac, faucibus vitae purus. Mauris a dui orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent aliquet, tellus ac fermentum posuere, eros magna blandit tellus, ut sagittis mauris arcu vitae purus. Integer vitae pharetra leo. In vitae orci nunc, sit amet faucibus ante. Nullam posuere auctor elit, quis interdum diam laoreet quis. Integer vehicula sem sed tortor consectetur et aliquam risus elementum. Nunc adipiscing turpis ut orci ultricies vitae auctor nibh vulputate. Nullam vulputate dictum libero, ut pretium nibh adipiscing at. Aliquam tincidunt velit ut augue aliquam posuere sit amet eget risus.
Quisque at nunc vitae dolor sagittis cursus. Donec dictum mollis turpis, at imperdiet tortor vehicula nec. Fusce interdum imperdiet urna at lobortis. Nullam lobortis convallis dolor vitae laoreet. Nunc viverra lacus sit amet lectus lobortis tempus. Donec hendrerit ligula nec velit ullamcorper semper. Praesent magna eros, aliquam vel pretium vitae, placerat sed lectus. Integer nec diam sapien, sit amet molestie mi. Mauris iaculis augue at neque viverra a aliquet dui viverra. Aenean lacinia iaculis venenatis. Mauris lobortis luctus dolor ut bibendum. Nulla facilisi. Maecenas varius elit eu augue mattis vestibulum. Morbi ultrices, sem non pulvinar laoreet, nulla enim suscipit urna, id iaculis metus ligula sit amet magna. Fusce fermentum aliquet magna, ac vehicula lectus elementum molestie. Morbi id blandit arcu. Aenean tincidunt orci velit. In imperdiet varius enim, sit amet ornare dolor aliquam vitae. Quisque faucibus viverra sagittis. Etiam a pharetra justo.
Nunc eleifend, libero eget imperdiet gravida, leo lectus tristique velit, facilisis commodo lectus urna a dui. Nulla luctus eleifend sem. Donec rhoncus diam at risus malesuada eget porta neque placerat. Fusce ligula erat, fermentum a facilisis ut, porta et dolor. Integer rutrum malesuada massa, vel consectetur leo imperdiet sed. Nulla facilisi. Proin hendrerit libero nec tortor vehicula at imperdiet sem fringilla. Nullam aliquam ipsum et dui aliquet a rutrum elit consequat. Pellentesque id nibh ut turpis porta scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris elit magna, tristique sit amet dictum sit amet, imperdiet nec nulla. Nulla turpis purus, vestibulum in hendrerit accumsan, blandit ac tellus. Sed a mi lectus, in aliquet felis. Nulla est metus, viverra vel scelerisque sit amet, posuere nec nisi.
Phasellus placerat ante et urna elementum adipiscing. Nunc venenatis sem sed lorem rhoncus ut imperdiet elit imperdiet. Suspendisse nibh ligula, vestibulum pharetra lobortis id, condimentum eget ipsum. Integer sit amet massa felis. Sed a risus nec ante rhoncus egestas vitae non velit. Vivamus viverra aliquet eros, ut fermentum diam gravida vel. Phasellus orci leo, congue a ornare ornare, fermentum eu mi. Donec commodo arcu est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis metus libero, pulvinar nec consectetur a, aliquet laoreet est. Vivamus eleifend cursus ipsum, sit amet porttitor dui sodales sed. Nunc eget dolor sed neque gravida ullamcorper. Nulla facilisi. Etiam pulvinar facilisis quam sed hendrerit. Sed in eros nec arcu sagittis consequat eu in quam. Suspendisse sit amet ultricies nulla. Sed nec ullamcorper ante. Donec est nibh, consectetur quis porta at, rutrum in tellus. Integer non ipsum vitae dui congue placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="menu">
MENU <br><br>
<a href="http://www.henk-haagsma-architect.nl/">oude website</a>
</div>
</body>
</html>
CSS-code:
body {
font-family: Arial;
}
.header {
float: left;
width: 150px;
height: 100%;
background-color: #FFFFFF;
border-style: outset;
border-width: 0px;
border-color: #000000;
padding: 10px;
text-align: center;
margin-top: 0px;
margin-left: 0px;
}
.menu {
height: 20%;
background-color: #fecc94;
border-bottom-style: outset;
border-bottom-width: 0px;
border-bottom-color: #000000;
margin-left: 170px;
margin-right: 270px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
.page {
height: 80%;
overflow: auto;
background-color: #FFFFFF;
border-top-style: outset;
border-top-width: 0px;
border-top-color: #000000;
border-bottom-style: outset;
border-bottom-width: 0px;
border-bottom-color: #000000;
margin-left: 170px;
margin-right: 270px;
padding: 10px;
}
.info {
font-family: Arial;
font-size: 10px;
float: right;
width: 250px;
height: 100%;
background-color: #fcfdbd;
border-style: outset;
border-width: 0px;
border-color: #000000;
padding: 10px;
}
a:link {
background-color: #fcfdbd;
border-style: outset;
border-width: 3px;
border-color: #fcfdbd;
text-decoration: none;
}
a:hover {
background-color: #fecc94;
border-style: inset;
border-width: 3px;
border-color: #fecc94;
text-decoration: none;
}
a:active{
background-color: #fecc94;
border-style: inset;
border-width: 3px;
border-color: #fecc94;
text-decoration: none;
}
a:visited {
background-color: #fcfdbd;
border-style: outset;
border-width: 3px;
border-color: #fcfdbd;
text-decoration: none;
}
ik heb een website met een aantal verschillende div's, een met logo (links), een met korte info (rechts), een met het menu (onder, tussen logo en info in) en een met tekst (boven, tussen logo en info in).
nou wil ik graag dat ik binnen dit laatst genoemde div kan scrollen, dus dat de andere div's gewoon blijven staan
De volgende code vond ik via google voor css:
.page {
overflow: auto;
}
Dit werkt, maar nu wordt de div ineens heel smal... Ik weet wel hoe ik deze breder kan maken, maar eerst nam de div gewoon aldoor automatisch de goede breedte aan, hoe groot/klein ik het scherm ook maakte... Hoe kan ik ervoor zorgen dat dit weer gebeurt?
Dieuwke
HTML-code:
<html>
<head>
<title>Henk Haagsma Architect</title>
<link rel=StyleSheet href="css.css" type="text/css">
</head>
<body>
<div class="header">
<img src="image_header.jpg" alt="logo">
</div>
<div class="info">
<p> Boerakkerweg 7 <br>
9321 EL Peize </p>
<p> tel: (050) 503 42 39 </p>
<p> fax: (050) 503 55 06 </p>
<p> mobiel: 06 21 243 243 <p>
<p> @: h.t.haagsma@pl.hanze.nl </p>
</div>
<div class="page">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor augue, dictum hendrerit vulputate sit amet, posuere eu magna. Maecenas purus diam, volutpat et tempor vitae, pharetra a justo. Integer ornare tempus sem eget malesuada. Maecenas tristique, nulla ut dictum lobortis, tortor magna suscipit mi, id blandit ipsum elit vitae nisi. Praesent et sem sed sapien tempus pellentesque nec id neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris sit amet est diam. Nulla viverra placerat eros non convallis. Suspendisse at varius neque. Phasellus sit amet felis eros, eu tristique justo. Ut risus nisi, viverra sed mollis eget, tincidunt nec arcu. Aliquam pretium quam quis purus interdum faucibus.
Vestibulum libero ante, pellentesque non auctor ac, faucibus vitae purus. Mauris a dui orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent aliquet, tellus ac fermentum posuere, eros magna blandit tellus, ut sagittis mauris arcu vitae purus. Integer vitae pharetra leo. In vitae orci nunc, sit amet faucibus ante. Nullam posuere auctor elit, quis interdum diam laoreet quis. Integer vehicula sem sed tortor consectetur et aliquam risus elementum. Nunc adipiscing turpis ut orci ultricies vitae auctor nibh vulputate. Nullam vulputate dictum libero, ut pretium nibh adipiscing at. Aliquam tincidunt velit ut augue aliquam posuere sit amet eget risus.
Quisque at nunc vitae dolor sagittis cursus. Donec dictum mollis turpis, at imperdiet tortor vehicula nec. Fusce interdum imperdiet urna at lobortis. Nullam lobortis convallis dolor vitae laoreet. Nunc viverra lacus sit amet lectus lobortis tempus. Donec hendrerit ligula nec velit ullamcorper semper. Praesent magna eros, aliquam vel pretium vitae, placerat sed lectus. Integer nec diam sapien, sit amet molestie mi. Mauris iaculis augue at neque viverra a aliquet dui viverra. Aenean lacinia iaculis venenatis. Mauris lobortis luctus dolor ut bibendum. Nulla facilisi. Maecenas varius elit eu augue mattis vestibulum. Morbi ultrices, sem non pulvinar laoreet, nulla enim suscipit urna, id iaculis metus ligula sit amet magna. Fusce fermentum aliquet magna, ac vehicula lectus elementum molestie. Morbi id blandit arcu. Aenean tincidunt orci velit. In imperdiet varius enim, sit amet ornare dolor aliquam vitae. Quisque faucibus viverra sagittis. Etiam a pharetra justo.
Nunc eleifend, libero eget imperdiet gravida, leo lectus tristique velit, facilisis commodo lectus urna a dui. Nulla luctus eleifend sem. Donec rhoncus diam at risus malesuada eget porta neque placerat. Fusce ligula erat, fermentum a facilisis ut, porta et dolor. Integer rutrum malesuada massa, vel consectetur leo imperdiet sed. Nulla facilisi. Proin hendrerit libero nec tortor vehicula at imperdiet sem fringilla. Nullam aliquam ipsum et dui aliquet a rutrum elit consequat. Pellentesque id nibh ut turpis porta scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris elit magna, tristique sit amet dictum sit amet, imperdiet nec nulla. Nulla turpis purus, vestibulum in hendrerit accumsan, blandit ac tellus. Sed a mi lectus, in aliquet felis. Nulla est metus, viverra vel scelerisque sit amet, posuere nec nisi.
Phasellus placerat ante et urna elementum adipiscing. Nunc venenatis sem sed lorem rhoncus ut imperdiet elit imperdiet. Suspendisse nibh ligula, vestibulum pharetra lobortis id, condimentum eget ipsum. Integer sit amet massa felis. Sed a risus nec ante rhoncus egestas vitae non velit. Vivamus viverra aliquet eros, ut fermentum diam gravida vel. Phasellus orci leo, congue a ornare ornare, fermentum eu mi. Donec commodo arcu est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis metus libero, pulvinar nec consectetur a, aliquet laoreet est. Vivamus eleifend cursus ipsum, sit amet porttitor dui sodales sed. Nunc eget dolor sed neque gravida ullamcorper. Nulla facilisi. Etiam pulvinar facilisis quam sed hendrerit. Sed in eros nec arcu sagittis consequat eu in quam. Suspendisse sit amet ultricies nulla. Sed nec ullamcorper ante. Donec est nibh, consectetur quis porta at, rutrum in tellus. Integer non ipsum vitae dui congue placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="menu">
MENU <br><br>
<a href="http://www.henk-haagsma-architect.nl/">oude website</a>
</div>
</body>
</html>
CSS-code:
body {
font-family: Arial;
}
.header {
float: left;
width: 150px;
height: 100%;
background-color: #FFFFFF;
border-style: outset;
border-width: 0px;
border-color: #000000;
padding: 10px;
text-align: center;
margin-top: 0px;
margin-left: 0px;
}
.menu {
height: 20%;
background-color: #fecc94;
border-bottom-style: outset;
border-bottom-width: 0px;
border-bottom-color: #000000;
margin-left: 170px;
margin-right: 270px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
.page {
height: 80%;
overflow: auto;
background-color: #FFFFFF;
border-top-style: outset;
border-top-width: 0px;
border-top-color: #000000;
border-bottom-style: outset;
border-bottom-width: 0px;
border-bottom-color: #000000;
margin-left: 170px;
margin-right: 270px;
padding: 10px;
}
.info {
font-family: Arial;
font-size: 10px;
float: right;
width: 250px;
height: 100%;
background-color: #fcfdbd;
border-style: outset;
border-width: 0px;
border-color: #000000;
padding: 10px;
}
a:link {
background-color: #fcfdbd;
border-style: outset;
border-width: 3px;
border-color: #fcfdbd;
text-decoration: none;
}
a:hover {
background-color: #fecc94;
border-style: inset;
border-width: 3px;
border-color: #fecc94;
text-decoration: none;
}
a:active{
background-color: #fecc94;
border-style: inset;
border-width: 3px;
border-color: #fecc94;
text-decoration: none;
}
a:visited {
background-color: #fcfdbd;
border-style: outset;
border-width: 3px;
border-color: #fcfdbd;
text-decoration: none;
}
Laatst bewerkt:
