@peter vazed: je hebt in ieder geval 'n dappere poging gewaagd. Voor 't zelfde geld was 't wel gelukt. Maar ik werd gelijk al wat moedeloos bij 't zien van die tabel.
Wat ik me afvraag. Als ik 't goed zie, kan die pagina wat achtergrond-afbeeldingen betreft in drie stukken (ik ben wat kleurenzwak, dus misschien heb ik t' mis...):
1) De header. Dus 't deel met het blauw en achter de thumbnails, inclusief de bovenste horizontale rand en schaduw. En inclusief brede lichte rand boven, links en rechts. Dat zou 'n echte afbeelding moeten zijn. Die verandert ook niet van grootte bij 'n andere resolutie/lettergrootte, dus dat zou kunnen.
2) Het middendeel. Het deel gelijk onder de header (dus onder de bovenste rand) tot boven de onderste schaduw en rand. Dat zou kunnen bestaan uit 'n horizontale afbeelding van 1 px hoog, die gewoon verticaal. wordt herhaald. Bij 'n hoger scherm krijg je gewoon meer afbeeldingen.
Van links naar rechts staat daar dus op:
brede rand - grijs - schaduw- lijntje - breed grijs vlak - lijntje - schaduw - grijs - brede rand
3) De footer, inclusief de onderste horizontale schaduw en onderste horizontale randje en inclusief brede lichte rand links, onder en rechts.
Dan zou je kunnen volstaan met drie divs met elk 'n achtergrond-afbeelding. Horizontaal gewoon centreren, net als nu. Verticaal groeit de middelste div met de 1px hoge afbeelding mee met de hoogte van de inhoud.
Boven die afbeeldingen zet je dan gewoon de inhoud neer, maar niet met 'n tabel, maar met divs. Dat is ongelooflijk veel makkelijker. Dat wil zeggen: als je 't eenmaal kunt, 't leren is even lastig.
't Opzet voor die drie divs zou zijn:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hier de title van de pagina</title>
<style type="text/css">
body {background: #1a1a1a;}
div#header {width: 900px; height: 400px; margin: 0 auto; background: url(header.jpg);}
div#content {width: 900px; margin: 0 auto; background: url(content.jpg);}
div#content {width: 900px; height: 130px; margin: 0 auto; backgroudn: url(footer.jpg);}
</style>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
De margin: 0 auto zorgt er, in combinatie met de breedte, voor dat het horizontaal is gecentreerd. De maten zullen niet helemaal goed zijn.
Dit geeft, volgens mij, hetzelfde resultaat, maar nu met drie afbeeldingen. Binnen de drie divs kun je nu gewoon de rest neer gaan zetten.
