Frame

Status
Niet open voor verdere reacties.
L

lord4163

Banned
Lid geworden
17 dec 2007
Berichten
3.155
Hallo,

Hoe krijg ik dit voor elkaar in html?

Ik wil de zijkanten volledig opgevuld met een achtergrond en het midden alleen scroll-able.

Kan iemand me code hier voor geven?

En tips om deze site te maken?

zie afbeelding


Bedankt alvast


Groetjes!
 

Bijlagen

  • website.jpg
    website.jpg
    8,2 KB · Weergaven: 37
HTML: 
<html>
<frameset cols="25%,50%,25%">
 <frame src="left.htm">
 <frameset rows="25%,75%">
  <frame src="top.htm">
  <frame src="center.htm">
 </frameset>
 <frame src="right.htm">
</frameset>
</html>
 
Werkt :P alleen ik kan deze niet opvullen van zijn de maten ?

in pixels ?
 
Laatst bewerkt:
ik heb hem nog aangepast naar 15,70,15 dus wat is de maat van de hokjes in pixels?
 
dat is de truck van procenten nou juist,
als je het scherm kleiner maakt worden de frames ook kleiner en dus ook het aantal pixels.
Er is dus geen vast aantal pixels voor een procentage
 
ik denk dat je de borders bedoelt, volgens mij kun je die op 2 manieren oplossen:

1. met css
voorbeeld:
PHP: 
<html>
<head>
<style>
frame {border:0;}
</style>
</head>
<frameset>
<!--- hier de frameset --->
</frameset>
</html>

2. met frameborder, border en framespacing
je moet dan bij elk frame de frameborder, border en framespacing op 0 (of no) zetten.
voorbeeld:
PHP: 
<frame frameborder='no' border='0px' framespacing='0px' src='******.html'>
 
Nee dat gaat niet,geen verschil.

Ik wil dus gewoon een pattern als dat zo heet :D links rechts opgevuld en niet met witte randen en ook niet met scroll.
 
In jouw html-cursus zou ik het wel aanraden om met procenten te werken! En ik zou de W3-cursus volgen voor validatie!
 
Op dat voorbeeld word het fame verkleint alleen wil ik de foto verkleint en het frame op oorsprongkelijke maat behouden?Hoe?
 
Ik word daar niets wijzer van....

wat heb ik nu fout het werkt in ie?

HTML: 
<!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">

<frameset cols="15%,70%,15%" frameborder="no">
 <frame src= "achtergrond.jpg" marginwidth="1" marginheight="1" scrolling="no">
 <frameset rows= "21%,80%" cols= "*" frameborder="no">
  <frame src="top.htm">
  <frame src="center.htm">
 </frameset>
 <frame src="right.htm">
</frameset><noframes></noframes>
</html>
 
Als ik het goed begrijp, maar misschien vergis ik me, is het de bedoeling dat er links twee blokken moeten komen die altijd zichtbaar blijven.
Rechts moet 'n groot blok komen dat gescrolld kan worden.
Is er 'n reden waarom je dat niet gewoon doet met css en html in plaats van frames? Frames worden al zo'n tien jaar afgeraden voor dit soort dingen, omdat ze bergen problemen opleveren.
En zoals jouw code nu in elkaar zit, kan ik je min of meer garanderen dat je (grote) verschillen in weergave krijgt in verschillende browsers. Een van de fouten die de validator geeft is ongetwijfeld 'n missend/verkeerd doctype. 'n Missend/verkeerd doctype garandeert min of meer verschillen tussen browsers.

Weet je iets van html/css? Of wil je beslist frames gebruiken?
 
ja mini basis html maar geen css kan dit niet gewoon gemaakt ?

Ik wil precies de linkerkant ook aan de rechterkant boven foto met adres naam etc en midden me tekst.

Maar ik wil dit dus hoe je het nu zie in ie :) dus script klopt niet.
 
Zoiets?

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;}
		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#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="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>

Dit is gemaakt met alleen html en css. Het werkt in Google Chrome, Safari, Opera, Firefox, Internet Explorer 6, 7 en 8. Het blijft ook in de toekomst werken, omdat het alleen gebruik maakt van standaardcode.
Alleen zitten er wel wat problemen aan vast. Je kunt in de html gewoon dingen gaan toevoegen. Maar dit is best wel 'n redelijk lastige lay-out. Als je niks van css weet, kan dat heel erg lastig worden. Voor je het weet maak je 'n fout waardoor het niet meer goed werkt.
Je kunt kiezen voor frames. Maar dat is 'n verouderde techniek, waarvan het eigenlijk niet zo heel veel nut meer heeft om die nog te leren.
Je kunt je ook in css en html gaan verdiepen, dat blijft ook in de toekomst werken. En is trouwens ook veel en veel beter voor zoekmachines en veel toegankelijker voor gehandicapten.

Vergeet ik nog: wat bovenin tussen <style ...> en </style> staat, dat is dus de css. Voor Internet Explorer 6 en 7 staan er wat aparte dingen, want die houden zich niet aan de standaard en moeten dus apart worden getemd.
Als je er vragen over hebt, horen we 't wel. Alleen: om 't echt te begrijpen ben ik bang dat je wel 'n korte cursus of zo zal moeten volgen...
 
Laatst bewerkt:
Dan zal ik me maar wat css gaan leren:thumb: ik heb al eens gekeken en lijkt beetje op html ik vind het ook mooier wat jij maakte alleen wil ik bovenop ook nog een hokje in het middenbovenin:thumb:
 
Dit is 'n gratis Nederlandstalige cursus. Ik vind hem verreweg de beste die ik ken, omdat css en html samen worden behandeld: http://www.web-garden.be/
(Lijkt onderhand wel of ik er aandelen in heb, zo vaak als ik 'm aanbeveel :D )

Dat hokje bovenin is vrij simpel te maken als je eenmaal weet wat 'n div is en hoe je die ergens neerzet.
Vroeger had je als enige mogelijkheid frames en tabellen. Voor zoekmachines zijn beide methoden rampzalig en garanderen min of meer 'n slechte plaats. (En omdat veel gehandicapten programma's gebruiken die ongeveer werken zoals 'n zoekmachine, zijn sites met tabellen en frames vaak ook volstrekt niet te bezoeken voor gehandicapten.)
Tabellen zijn trouwens prima, maar alleen waar ze voor zijn bedoeld: getallen, kalenders, e.d.

Het leuke van css (dus hier wat bovenaan in de <style> staat) is, dat je het in 'n apart bestand kunt zetten. Dat bestand kun je dan aan 500 of 50 of 5000 pagina's koppelen. De css zorgt voor de lay-out, en vanuit dat ene bestand kun je dan de lay-out in ál die pagina's beheren.
Bij frames en tabellen moet je bij 'n wijziging op élke pagina zelf wijzigingen gaan aanbrengen. (Bij tabellen altijd, bij frames meestal.)
Binnen niet al te lange tijd (hopelijk) wordt 't nog allemaal veel simpeler, omdat dan hopelijk IE 6 niet meer ondersteund hoeft te word

Hokje midden bovenin? Zet onder de <h1> in de html:
HTML: 
<div id="bovenin">Joechei ik ben het hokje bovenin en heb 't dus hoog in m'n bol</div>
('n div is dus niets anders dan 'n element wat zelf niets doet, maar wat je wel overal neer kunt zetten en zo met behulp van css. En dus ook wat erin staat.)
Voeg in de bovenste <style> toe achter div#content (het mag overal, maar het handigst is om dezelfde volgorde als in de html aan te houden):
Code: 
div#bovenin {margin: 0 auto; border: green solid 20px; width: 100px; background: black; color: white;}
Zelfs bij zo'n wijziging hoef je op de pagina zelf alleen maar dat <div> met de tekst in te voegen, en de rest regel je helemaal vanuit 1 css-bestand. (Hier staat de css op de pagina zelf, maar 't kan dus in 'n apart bestand.)
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan