Frame

Status
Niet open voor verdere reacties.
Oke alleen wil ik een rechthoek zie mijn plaatje eerste bericht :thumb:

Bedankt voor je uitleg;)
 
En daarvoor is 't dus handig om zelf html/css te leren, anders zitten ik of anderen hier jouw site te maken :D (Dat wil ik trouwens best doen, maar ik ben echt heel erg duur als je me moet betalen...)

In die regel met css voor die nieuwe div staat width: 100px;
Als je dat verandert, verandert de breedte.
Als je in die regel erbij zet:
Code: 
height: 200px;
dan wordt de div 200 px hoog. (Let op de ; aan het eind, daarmee sluit je elke opdracht in css af.)
Als je geen height (hoogte) opgeeft, wordt de div automatisch precies zo hoog als nodig is.
 
Ja alleen is hij nog doorzichtig en scrollt hij mee en ik wil alleen midden scroll-able:D

Ik was al bezig op andere site met css :o
 
Laatst bewerkt:
Dat kun je aanpassen in de css met background voor 'n kleur (of background-color)
En met position: fixed kun je 'm stilzetten. Toevoegen aan de regel voor div#bovenin
Alleen in Internet Explorer 6 blijft hij meescrollen. Daar moet je 'm position: absolute geven, want IE 6 kent 'fixed' gewoon niet. Dus in de css die begint met <!--[if IE 6]> moet je 'n nieuwe regel zetten:
Code: 
div#bovenin {position: absolute;}
Hoewel dit niet zou moeten mogen, heeft dit in deze verzameling bugs en afwijkingen die ten onrechte de naam 'browser' heeft gekregen tot gevolg, dat ook in dit onding de div nu blijft stilstaan. (En dan druk ik me nog heel genuanceerd uit over IE 6...)
O ja, om onduidelijke redenen werkt dit in IE 6 98 van de 100 keer. De andere 2 keer werkt 't gewoon niet. Dan is er niets aan te doen.
 
Nou, werkt nog niet volledig....

Heb het nu zo wat is er fout?

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" />
    <title>Schermvullende lay-out met 3 kolommen waarvan middelste scrollt</title>
    <style type="text/css">
        body {margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 100%; color: black;}
        div#links {position: fixed; top: 0; bottom: 0; width: 12em; height: 100%; background: green; z-index: 10;}
        div#linksboven {height: 30%; background: yellow;}
div#bovenin {margin: 0 auto; border: green solid 20px; height: 100px; width: 850px; background: black; color: white ;} 
        h2 {margin: 0;}
        div#rechts {position: fixed; top: 0; right: 0; bottom: 0; width: 12em; height: 100%; background: red; z-index: 10;}
        div#rechtsboven {height: 30%; background: white;}
        div#midden {position: fixed; top: 0; bottom: 0; width: 100%; background: orange;}
        div#content {position: absolute; top: 0; right: 0; bottom: 0; left: 13em; right: 12em; padding: 0 20px; overflow: auto;}
    </style>
    <!--[if IE 6]>
        <style type="text/css">
            html {overflow: hidden;}
            body {height: 100%; overflow: auto;}
            div#bovenin {position: absolute;}
            div#links {position: absolute;}
            div#rechts {position: absolute; right: 18px;}
            div#midden {position: absolute; top: 0; height: 100%; overflow: auto;}
            div#content {position: static; padding: 0 13em;}
        </style>
    <![endif]-->
    <!--[if IE 7]>
        <style type="text/css">
            html {overflow: hidden;}
        </style>
    <![endif]-->
</head>
<body>
    <div id="links">
    
  
        <div id="linksboven">
            <h2>Linksboven</h2>
        </div>
        <div id="linksonder">
            <h2>Linksonder</h2>
 
        </div>
    </div>
    <div id="rechts">
        <div id="rechtsboven">
            <h2>Rechtsboven</h2>
        </div>
        <div id="rechtsonder">
            <h2>Rechtsonder</h2>
        </div>
    </div>
    <div id="midden">
<div id="bovenin">Joechei ik ben het hokje bovenin en heb 't dus hoog in m'n bol</div>
        <div id="content">
            <h1>Content</h1>
            

            <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>
            <h2>Einde van de opvultekst</h2>
        </div>   
    </div>
</body>
</html>
En ik gebruik ie 8....
 
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" />
	<title>Schermvullende lay-out met 3 kolommen waarvan middelste scrollt</title>
	<style type="text/css">
		body {margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 100%; color: black;}
		div#links {position: fixed; top: 0; bottom: 0; width: 12em; height: 100%; background: green; z-index: 10;}
		div#linksboven {height: 30%; background: yellow;}
		div#bovenin {position: fixed; left: 12em; right: 12em; margin-right: 15px; border: green solid 20px; height: 100px; background: black; color: white;} 
		h2 {margin: 0;}
		div#rechts {position: fixed; top: 0; right: 0; bottom: 0; width: 12em; height: 100%; background: red; z-index: 10;}
		div#rechtsboven {height: 30%; background: white;}
		div#midden {position: fixed; top: 0; bottom: 0; width: 100%; background: orange;}
		div#content {position: absolute; top: 0; right: 0; bottom: 0; left: 13em; right: 12em; padding: 0 20px; overflow: auto;}
		div#content h1 {margin-top: 140px;}
	</style>
	<!--[if IE 6]>
		<style type="text/css">
			html {overflow: hidden;}
			body {height: 100%; overflow: auto;}
			div#bovenin {float: right; width: 96.8%; margin-left: 12em;}
			div#links {position: absolute;}
			div#rechts {position: absolute; right: 18px;}
			div#midden {position: absolute; top: 0; height: 100%; overflow: auto;}
			div#content {position: static; padding: 0 13em;}
			div#content h1 {margin-top: 0;}
		</style>
	<![endif]-->
	<!--[if IE 7]>
		<style type="text/css">
			html {overflow: hidden;}
		</style>
	<![endif]-->
</head>
<body>
	<div id="links">
		<div id="linksboven">
			<h2>Linksboven</h2>
		</div>
		<div id="linksonder">
			<h2>Linksonder</h2>
		</div>
	</div>
	<div id="rechts">
		<div id="rechtsboven">
			<h2>Rechtsboven</h2>
		</div>
		<div id="rechtsonder">
			<h2>Rechtsonder</h2>
		</div>
	</div>
	<div id="midden">
		<div id="content">
			<div id="bovenin">Joechei ik ben het hokje bovenin en heb 't dus hoog in m'n bol</div>
			<h1>Content</h1>
			<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>
			<h2>Einde van de opvultekst</h2>
		</div>
	</div>
</body>
</html>

De grootste fout was dat div#bovenin in de html bóven div#content stond. Omdat div#content in de html onder div#bovenin staat, wordt die boven div#bovenin gezet. Het laatste komt in principe bovenaan te staan, over eerdere elementen heen.
Daardoor zie je div#bovenin door div#content heen, alsof div#content doorzichtig is.
Daarnaast had je div#bovenin 'n vaste breedte gegeven. Dat lijkt leuk, maar als je 'n groter of kleiner venster (scherm) hebt, valt daardoor 'n deel van div#bovenin gewoon helemaal weg, of je hebt rechts 'n enorm leeg stuk.
Je had dit ook kunnen oplossen met z-index: dan kun je zeggen dat div#bovenin gewoon bovenaan moet staan, boven div#content.

In IE 6 scrollt div#bovenin gewoon mee.

Als je 'n site maakt, kun je dat 't beste doen in Opera, Firefox, Google Chrome of Safari. Als de site daarin werkt, werkt hij meestal ook wel in Internet Explorer 7 en 8. Het omgekeerde is niet zo.
De meeste mensen kiezen voor Firefox, omdat dat zoveel handige uitbreidingen heeft.
Uiteindelijk zul je ook Safari, Opera en Google Chrome moeten installeren om te testen. En Internet Explorer 6 en 7.
Maar ik zou echt eerst 'ns die cursus bekijken. Deze lay-out is knap ingewikkeld, en als je dingen als z-index en padding en zo nog niet beheerst, dan wordt 't echt heel erg lastig.
 
Hartstikke mooi. 't Werkt echt veel makkelijker als je 'n beetje 'n basis hebt.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan