CSS: zonder frames

Kan iemand mij helpen met het volgende:

Ik probeer een site te maken in CSS die het volgende doet:

[img:5e59b821ab]http://forum.macosx.nl/album_pic.php?pic_id=11916[/img:5e59b821ab]

-Groen staat altijd bovenaan en de maten zijn ‘fixed’ (ook bij scrollen)
-Paars is flexibel en hangt af van de hoogte van de browser maar heeft wel een minimale hoogte.
-Rood staat altijd onderaan in beeld zonder te hoeven scrollen.
-Blauw kan scrollen (zonder andere kleuren mee te nemen) wanneer er meer tekst is dan er in past.

In gewone HTML met frames is dit enorm simpel. Maar met CSS lukt het me niet.

Iemand hulp?

Heb je Zen Garden al geprobeerd? Misschien is dit iets: http://www.456bereastreet.com/lab/cssframes/ Echt praktische hulp gaat me nog niet lukken, ik zit zelf nog te worstelen nl.

http://intensivstation.ch/templates/

[quote:d96a92ed16="tennapel"]http://intensivstation.ch/templates/[/quote:d96a92ed16]

Die staat bij mijn favorieten maar daar staat geen oplossing bij…

Bij alistapart is er een javascriptje die footers kan maken... Voor zo ver ik weet is deze ook te gebruiken om headers fixed mee te zetten.

http://www.alistapart.com/articles/footers/

http://www.alistapart.com/articles/holygrail

http://www.google.com/search?q=css%20three%20column%20header%20and%20footer

Het gaat er dus om dat groen,paars en rood altijd te zien zijn (ook als er gescrolled wordt). En het blauwe vlak mag alleen maar bewegen.

dus: groen altijd boven in het browser venster, rood altijd onderaan in het browservenster en paars is flexibel omdat het de ruimte die overblijft opvult. Maar nu nog 1 moeilijk ding: paars heeft wel een minimale hoogte.

Als ik teveel vraag dat moet je het ook zeggen maar kan dit echt nergens vinden…

Heb je [url=http://limpid.nl/lab/css/fixed/header-and-footer]hier[/url] al gekeken? Er staan verschillende voorbeelden van 'gefixte' elementen.. Misschien kan je wat van combineren

Is het een website of een webapplicatie? Als het een applicatie is, dan zijn frames zo gek nog niet (een van de weinige toepassingen waar frames toegevoegde waarde hebben).

Het gaat om een website. Heb de hele dag zitten prutsen met de sites die jullie gegeven hebben maar het is tot nu toe nog niet helemaal gelukt

Maar ik blijf proberen…

[quote:5cb8d1e1e2="MarcelK"]Het gaat om een website. Heb de hele dag zitten prutsen met de sites die jullie gegeven hebben maar het is tot nu toe nog niet helemaal gelukt [/quote:5cb8d1e1e2]

Ik denk dat het wel mogelijk is, maar ik ga geen energie stoppen in het in elkaar prutsen van een website die niet van mij is.

Ik zou in bovenliggend geval zelf denk ik toch maar overwegen om alles in een simpele tabelstrcutuur te zetten (OEI! wat doet ’ ie nu? Vloeken in de kerk?), omdat ik denk dat je met de huidige stand van zaken in een aantal browsers flink in de knoop kan komen, of je eindeloze breien div’s moet gaan nesten.

De middelste tabelcel zou ik dan vullen met een div met een overflow:scroll property.

Alles overziende zou de volgende div structuur de meeste kans op succes bieden:

[code:1:5cb8d1e1e2]
<div id="header"> … </div>

<div id="wrapper">
<div id="content"> … </div>
<div id="sidebar1"> … </div>
<div id="sidebar2"> … </div>
</div>

<div id="footer"> … </div>
[/code:1:5cb8d1e1e2]

#header gewoon laten staan en een height geven.
#footer absoluut positioneren met bottom : 0 en een width van 100% geven en een height.
#wrapper relatief positioneren, een width van 100% geven en een marge boven en onder ter grootte van de hoogte van footer en header.
#sidebar1 en #sidebar2 absoluut positioneren en een width geven en een height van 100%.
#content een marge geven ter grootte van de width van de sidebars en een overflow : auto.

Als je de body de achtergrondkleur van de #content geeft hoef je de content geen vaste hoogte te geven.

Vervolgens moet je binnen de #divs de elementen met paddings en margins op hun plek zetten, want als je paddings en margins aan de div’s toevoegt dan wordt het een zoekplaatje…

Vandaar mijn opmerking dat een simple tabelstructuur in dit geval wellicht een betere keus is.