Wie weet raad?
Heb eerder vandaag vraag gesteld m.b.t. een html code voor een nieuwe website. Vond op internet op http://www.css-voorbeelden.nl/ een mogelijke code die als basis kan dienen voor mijn nieuwe website i.p.v. de oude frames site. Heb het bestand gedownload en vervolgens de code in dreamweaver opgeslagen. Vervolgens bestand op IE 6 en FF met goed resultaat getest. Toen ik de pagina in het designscherm wilde bekijken bleek slechts een gedeelte van de pagina zichtbaar te zijn alsof het ontwerp te groot is voor het scherm. Hoop dat iemand een oplossing weet
De code die ik in DW heb gezet is alsvolgt;
Heb eerder vandaag vraag gesteld m.b.t. een html code voor een nieuwe website. Vond op internet op http://www.css-voorbeelden.nl/ een mogelijke code die als basis kan dienen voor mijn nieuwe website i.p.v. de oude frames site. Heb het bestand gedownload en vervolgens de code in dreamweaver opgeslagen. Vervolgens bestand op IE 6 en FF met goed resultaat getest. Toen ik de pagina in het designscherm wilde bekijken bleek slechts een gedeelte van de pagina zichtbaar te zijn alsof het ontwerp te groot is voor het scherm. Hoop dat iemand een oplossing weet
De code die ik in DW heb gezet is alsvolgt;
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../../css/naam-van-stylesheet.css" />
<!-- Instellingen voor Internet Explorer -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="../../css/naam-van-ie-stylesheet.css">
<![endif]-->
<meta name="description" content="Horizontaal gecentreerde lay-out met vaste header en twee kolommen - voorbeeld. Gebruikt alleen xhtml en css." />
<title>Horizontaal gecentreerde lay-out met vaste header en twee kolommen - voorbeeld</title>
<style type="text/css">
body {margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 110%; color: black;}
div#header {position: fixed; left: 50%; height: 8.5em; width: 760px; margin-left: -380px; border: solid black 1px; background: yellow; text-align: center;}
h1 {margin: 0.5em 0 0; font-size: 1.8em;}
div#links {position: fixed; top: 8.5em; left: 50%; bottom: 0; width: 12em; margin-left: -380px; border: black solid 1px; border-bottom: 0; background: #0f0; z-index: 40;}
div#links p {padding: 0 5px;}
div#links h2 {text-align: center;}
div#content {position: fixed; left: 50%; top: 8.5em; bottom: 0; width: 760px; margin-left: -380px; border: black solid 1px; border-bottom: 0; background: orange; overflow: auto;}
div#rechts {padding: 0 20px 0 13em;}
div#rechts p {text-indent: 20px;}
.tussenkop {font-weight: bold; font-size: 1.2em; }
h2 {font-size: 1.2em;}
</style>
<!--[if IE 6]>
<style type="text/css">
html {overflow: hidden;}
body {height: 100%; overflow: auto;}
div#header {position: absolute; margin-left: -389px;}
div#content {padding-top: 8.5em; margin: 0 auto;}
div#rechts {padding: 5px 20px 500px 20px; border-left: #0f0 solid 13em;}
div#links {position: absolute; margin-top: 25px; border: 0; }
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
html {overflow: hidden;}
div#links {padding-bottom: 1200px;}
</style>
<![endif]-->
</head>
<body>
<div id="header">
<h1>Tweekoloms lay-out</h1>
<h2 lang="en">Header</h2>
<p>Vast bovenaan scherm. Vaste breedte. Hoogte afhankelijk van lettergrootte.</p>
</div>
<div id="links">
<!-- div#links is buiten div#content geplaatst, omdat div#links anders bij in- en uitzoomen in Internet Explorer 7 niet van grootte veranderd. -->
<h2>Linkerkolom</h2>
<p>Vaste positie aan de linkerkant van het scherm, gelijk onder de <span lang="en">header</span>. Hoogte past zich aan aan de hoogte van het scherm. Breedte past zich aan aan lettergrootte. Geschikt voor bijvoorbeeld links, knoppen of 'n menu.</p>
</div>
<div id="content">
<div id="rechts">
<h2>Rechterkolom</h2>
<p>Vaste positie gelijk onder de <span lang="en">header</span>. Breedte: vult ruimte tussen linkerkolom en rechterkant van venster. Hoogte past zich aan aan de hoogte van het scherm. Bij voldoende inhoud verschijnt een verticale scrollbar, waarmee de inhoud van de rechterkolom gescrolld kan worden.</p>
<h3>Opmerkingen:</h3>
<p>Deze lay-out staat horizontaal gecentreerd op het scherm, ongeacht de grootte van het scherm.</p>
<p><strong>Lees vooral ook de bijgesloten uitleg.</strong></p>
<span class="tussenkop">Begin van de opvultekst</span>
<p lang="la">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec adipiscing quam non elit. Curabitur suscipit, lacus nec interdum sodales, nisl justo sodales risus, in porta metus felis condimentum sapien. Nulla facilisi. Integer congue. Nunc ut turpis in est fringilla rutrum. Nulla bibendum, lectus sed sagittis euismod, metus ligula ultricies risus, nec vehicula augue eros vel mi. Duis vehicula. Sed accumsan aliquet eros. Suspendisse potenti. Vivamus eget libero. Nunc semper, erat sit amet commodo vestibulum, est mauris pharetra purus, nec consectetuer neque tortor a urna. Aliquam erat volutpat. Sed vestibulum ullamcorper nisl. Donec et turpis. Nunc eros. Phasellus elementum, turpis eu consequat aliquet, tortor urna mattis arcu, ac semper nisi ligula id velit. Fusce ipsum. Suspendisse libero arcu, sollicitudin non, varius in, placerat eu, leo. Phasellus egestas leo ac pede. Donec felis.</p>
<p lang="la">Phasellus et quam. Donec semper arcu in ante. Cras non erat in nunc molestie eleifend. Suspendisse potenti. Maecenas posuere dictum metus. Nulla et quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec leo nunc, facilisis lacinia, tempus et, elementum vel, neque. Nulla in neque. Phasellus gravida ligula quis leo. Phasellus lacus. Sed fringilla orci eu erat. Vivamus sit amet pede et felis faucibus dictum. Cras malesuada metus eu enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque elementum interdum neque. Vestibulum eu sapien. Nunc hendrerit ipsum non nibh hendrerit dictum. Morbi ultrices dolor quis lorem.</p>
<p lang="la">Suspendisse augue magna, mollis non, elementum sit amet, pretium ac, arcu. Nullam sagittis. Maecenas mattis odio vitae orci. Fusce et justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum tristique fermentum felis. Fusce feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc leo dolor, lacinia ac, tempor fermentum, sodales vel, purus. Proin at odio ac elit volutpat pretium. Fusce aliquam sem at mauris. Ut enim turpis, vulputate quis, tempus id, placerat et, ligula. Suspendisse pede.</p>
<p lang="la">Nam fringilla dolor vel risus. Fusce et nunc porttitor lectus vestibulum blandit. Vestibulum scelerisque ullamcorper mauris. Nulla dapibus ipsum mattis neque. In imperdiet suscipit elit. Mauris a tortor eget nulla interdum vestibulum. Nullam sit amet metus. Donec viverra. Ut sapien. Duis tincidunt posuere tellus. Donec eleifend magna fermentum felis. Integer quis turpis ut enim cursus faucibus. Nam elit tellus, sagittis vitae, porta et, venenatis non, turpis. Morbi facilisis lacus nec purus porta sodales. Cras placerat ipsum vel neque. Integer sagittis.</p>
<p lang="la">Suspendisse mollis rhoncus sem. Vivamus lectus felis, aliquet eu, elementum vel, aliquam at, dui. Proin fringilla ultricies libero. Ut vehicula eros et ipsum. Proin metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse tristique convallis arcu. Curabitur fringilla pede eu arcu. Aenean tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent at ante sit amet tellus accumsan dictum. Maecenas pulvinar, ligula sit amet ullamcorper sodales, ante nulla facilisis justo, eu vestibulum tellus ante sed leo. Donec a est. In vitae mi. Pellentesque ac enim. Pellentesque enim diam, pretium eget, fermentum non, lobortis eget, ipsum. Proin nec orci. Fusce odio. Nam nisi eros, mollis ut, placerat nonummy, porttitor a, lorem. Etiam quis nibh sed sem pharetra auctor.</p>
<p lang="la">Nulla mollis. In nonummy mi eget tellus. Praesent pulvinar urna sed felis. Nunc hendrerit. Maecenas in diam in nibh eleifend feugiat. Nam blandit nunc eget lacus. Suspendisse venenatis. Pellentesque blandit placerat pede. Integer eu odio at metus lobortis commodo. Proin vulputate. Cras lorem purus, lacinia a, convallis ac, scelerisque at, felis. Nulla scelerisque, magna nec iaculis semper, est ante tempor enim, sit amet pulvinar augue nisi eu sem.</p>
<p lang="la">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec adipiscing quam non elit. Curabitur suscipit, lacus nec interdum sodales, nisl justo sodales risus, in porta metus felis condimentum sapien. Nulla facilisi. Integer congue. Nunc ut turpis in est fringilla rutrum. Nulla bibendum, lectus sed sagittis euismod, metus ligula ultricies risus, nec vehicula augue eros vel mi. Duis vehicula. Sed accumsan aliquet eros. Suspendisse potenti. Vivamus eget libero. Nunc semper, erat sit amet commodo vestibulum, est mauris pharetra purus, nec consectetuer neque tortor a urna. Aliquam erat volutpat. Sed vestibulum ullamcorper nisl. Donec et turpis. Nunc eros. Phasellus elementum, turpis eu consequat aliquet, tortor urna mattis arcu, ac semper nisi ligula id velit. Fusce ipsum. Suspendisse libero arcu, sollicitudin non, varius in, placerat eu, leo. Phasellus egestas leo ac pede. Donec felis.</p>
<p lang="la">Phasellus et quam. Donec semper arcu in ante. Cras non erat in nunc molestie eleifend. Suspendisse potenti. Maecenas posuere dictum metus. Nulla et quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec leo nunc, facilisis lacinia, tempus et, elementum vel, neque. Nulla in neque. Phasellus gravida ligula quis leo. Phasellus lacus. Sed fringilla orci eu erat. Vivamus sit amet pede et felis faucibus dictum. Cras malesuada metus eu enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque elementum interdum neque. Vestibulum eu sapien. Nunc hendrerit ipsum non nibh hendrerit dictum. Morbi ultrices dolor quis lorem.</p>
<span class="tussenkop">Einde van de opvultekst</span>
</div>
</div>
</body>
</html>
Laatst bewerkt door een moderator:
