[CSS] grootte van <div> niet zoals ik wil.

[Bart B]

Mijn vraag is als volgt:

Ik ben bezig met het maken van mijn homepage ([url="http://beumer.xs4all.nl"]http://beumer.xs4all.nl[/url]) Hier heb ik grofweg 2 onderdelen:

* Een vaste kop boven de pagina (altijd 100px hoog)
* Een variabel pagina-inhoud gedeelte (hier komt text e.d.)

Het idee is, dat je de kop hebt die altijd 100px hoog is, en dat de rest van de pagina de text e.d. bevat

Het eerste heb ik voor elkaar gekregen. Met CSS heb ik de onderdelen die de bovenkant vormen in de bovenste 100px gezet (98 exact)

Het 2e gedeelte krijg ik niet voor elkaar. Het probleem dat ik heb is namelijk dat de lengte van een venster variabel is (600px, 768px, 1024px). Ik kan dus geen exacte waarde gebruiken. Ook kan ik geen percentage gebruiken, omdat het bovenste gedeelte exact gedefineerd is (dit kan wel met precentages, maar is niet mooi).

Ik vraag daarom, hoe kan ik het onderdeel met de inhoud van de pagina zo defineren, dat deze de resterende ruimte opvult, op een dusdanige manier dat je ook mooi kunt scrollen (bij padding gaat de scrollbar over de kop )

Owja... waarschijnlijk vinden jullie het niet zo'n mooie site, maar dat vinnik niet erg (wordt nog beter )

[Malebolgia]

waarom gebruik je niet gewoon frames zonder randen, da's veel makkelijker. Zet scroll op 'auto' voor de frame met content en klaar ben je.

[_-= Erikje =-_]

ehm, 2 oplossingen

1) Frames
2) 1 grote tabel waarvan je 1 rij een vaste waarde geeft en de tabel altijd laat uitvullen naar 100% (zodat de andere rijen altijd volledige scherm vullen)

[Verwijderd]

3) Met JavaScript uitrekenen hoe de DIV moet worden geplaatst adhv de resolutie.

[Bart B]

Bedoel je dit?

code:

<table border="0" cellpadding="0" cellspacing="0">
<tr><td>
    <div> HIER INHOUD KOP</div>
</td></tr>
<tr><td>
    <div> HIER INHOUD CONTENT</div>
</tr></td>
</table>

Ik ga het ff proberen

[RM-rf]

misschien is dit iets

code:

<style type="text/css">
#div1
{
   position: absolute;
   top: 0px; left 0px;
   width: 100%; height: 100%
   padding-top: 200px;
}
#div2
{
  position: relative;
  width: 100%; height: 100%;
}
</style>

[...]

<div id="div1">
   <div id="div2">
    ... blaat ...
   </div>
</div>

mogelijk is het zelfs mogelijk om met 1 div en margin te werken (weet niet of de margin van het percentage afgaat, en je dus height: 100% kunt behouden; maar je kunt het testen)

[Bart B]

Op zaterdag 27 juli 2002 23:01 schreef Malebolgia het volgende:
waarom gebruik je niet gewoon frames zonder randen, da's veel makkelijker. Zet scroll op 'auto' voor de frame met content en klaar ben je.

Met frames heb ik 3 HTML bestanden. En dat wil ik niet. Verder is het met frames niet mogelijk om het menu over beide onderdelen te laten vallen. (kan wel met IE op een of andere manier, maar niet met andere)

[_-= Erikje =-_]

Op zaterdag 27 juli 2002 23:04 schreef Bart B het volgende:
Bedoel je dit?

code:

<table border="0" cellpadding="0" cellspacing="0">
<tr><td>
    <div> HIER INHOUD KOP</div>
</td></tr>
<tr><td>
    <div> HIER INHOUD CONTENT</div>
</tr></td>
</table>

Ik ga het ff proberen

ja maar dan zo:

code:

<table height="100%" border="0" cellpadding="0" cellspacing="0">
<tr height="100"><td>
    <div> HIER INHOUD KOP</div>
</td></tr>
<tr><td>
    <div> HIER INHOUD CONTENT</div>
</tr></td>
</table>

tabel is zo altijd 100% hoog en de bovenste rij is 100 px

[Verwijderd]

Op zaterdag 27 juli 2002 23:39 schreef _-= Erikje =-_ het volgende:

ja maar dan zo:
[..]
tabel is zo altijd 100% hoog en de bovenste rij is 100 px

Als je het alleen in IE bekijkt wel ja Moz en NS hebben terecht moeite met de height attribute. Die bestaat namelijk niet voor tabellen.

[Bart B]

Ik ben een beetje aan het werken met z-index en padding. Mogelijk kom ik er dan uit

[Bart B]

Het is gelukt, d.m.v. padding en z-index heb ik de kop boven de inhoud geplaats, zonder de menubalk te verbergen.

BEDANKT ALLEMAAL!
enne... als je wilt weten hoe ik het gedaan heb, moet je mijn site maar eens bekijken