Ga naar inhoud

Height niet relatief?


Aanbevolen berichten

Hallo, Ik wil het volgende maken: * een divje met daarin mijn website. (deze heeft absolute afmetingen) * daaromheen 2 divs (1tje links en 1tje eronder) om het scherm op te vullen wanneer er sprake is van resoluties groter dan 800*600. Het divje met mijn website is geen probleem, omdat ik deze div en alle divs die in deze div genest zijn absolute waarde kan geven. De andere twee divs kan ik geen height: 100%; meegeven. Hoe moet ik dit aanpakken?
Link naar reactie
omdat er nog geen reactie is, denk ik dat ik mijn vraag een beetje onduidelijk heb geformuleerd. Hier volgt een voorbeeldje: [code:1:1f2994dbcc] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>Voorbeeld</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> </HEAD> <style type="text/css"> .body{ margin: 0; } .website { width: 775px; height: 450px; } .uitlooplinks{ height: 450px; width: 100%; } .uitlooponder{ height: 100%; width: 100%; } </style> <BODY> <div class="website"></div> <div class="uitlooplinks"> Deze div zou het gedeelte van het scherm dat links van de website ligt moeten vullen</div> <div class="uitlooponder"> Deze div zou het gedeelte van het scherm onder de website en uitlooplinks moeten vullen </div> </body> </html> [/code:1:1f2994dbcc] ik heb de code uit de losse pols getypt, want ik had even geen editor voorhanden.
Link naar reactie
[quote:3b1872fb3f="BelgiumBoy_007"]Ik zou het doen met tabellen i.p.v. divs.[/quote:3b1872fb3f] Belg. [quote:3b1872fb3f="bierk"]omdat er nog geen reactie is, denk ik dat ik mijn vraag een beetje onduidelijk heb geformuleerd. Hier volgt een voorbeeldje: [code:1:3b1872fb3f] *knip*[/code:1:3b1872fb3f] ik heb de code uit de losse pols getypt, want ik had even geen editor voorhanden.[/quote:3b1872fb3f] Je weet dat die doctype fout is hé? ook moet je dan eerst je site centreren, voordat er rechts ruimte onstaat. Wat komt eigenlijk aan de zijkanten? Een plaatje? Schaduw? Wat?
Link naar reactie
nee, nee, centreren is geen probleem. Het is de bedoeling dat de website links boven wordt geplaatst. De website heeft een afmeting van 775 px * 480px. Bij een schote schermresolutie krijg je nu een grote witte leegte op het scherm. Deze witte leegte wil ik opvangen door verschillende divs te plaatsen en de kleuren v/d website door te laten lopen. Als het ware verticale repen... Het probleem is, dat een height van 100% niet werkt op een div. Hoe los ik dit op? Ik zou graag een grafisch voorbeeld geven of even een file uploaden, maar ik heb mijn eigen pc een paar dagen niet voorhanden. Ik hoop dat jullie weten wat ik bedoel. Ik zal nog een voorbeeldje zoeken van een website waar dit is toegepast. (als ik er 1 kan vinden) Maar de keyquestion is dus: hoe geef ik een div een hoogte van 100%?
Link naar reactie
[quote:6515bfc210="bierk"]nee, nee, Maar de keyquestion is dus: hoe geef ik een div een hoogte van 100%?[/quote:6515bfc210] [code:1:6515bfc210] height: 100%; [/code:1:6515bfc210] ;) Ik denk dat ik weet wat je bedoelt. Je wilt een div helemaal laten doorlopen tot 'onderaan' de site? http://www.alistapart.com/articles/fauxcolumns Waarom wil je trouwens niet centreren? Das toch veel makkelijker? [edit] net wat eerder, wim :)
Link naar reactie
Thnx voor de links WimB, maar het is net niet wat ik zocht. Hier wordt uitgelegd hoe je 2 kollommen even lang kan maken, maar niet hoe je ze 100% lenght kan meegeven. Wat ik graag wil zal ik aan de hand van een vorbeeldje proberen te schetsen: [url=http://www.web-core.nl/tests/gj/voorbeeldje.gif]klik[/url] m vr gr.
Link naar reactie
[quote:0b82ce5304] Ik denk dat ik weet wat je bedoelt. Je wilt een div helemaal laten doorlopen tot 'onderaan' de site? http://www.alistapart.com/articles/fauxcolumns Waarom wil je trouwens niet centreren? Das toch veel makkelijker? [edit] net wat eerder, wim [/quote:0b82ce5304] Sorry, door jullie bijna simultane reply's had ik over die van jou heen gelezen. Maar hetzelfde antwoord geld dus als dat tegen wimB :) .
Link naar reactie
Zoiets? [code:1:e446bdfc96] <HTML> <HEAD> <TITLE>Voorbeeld</TITLE> </HEAD> <style type="text/css"> .body{ margin: 0; } .website { width: 775px; right:0px; top:0px; position:absolute;height: 450px; background-color:blue; } .uitlooplinks{ margin-right:775px; height: 450px; background-color:yellow; } .uitlooponder{ width: 100%; background-color:red; position:absolute; bottom:0px; top:450px; height:expression(this.parentNode.offsetHeight-this.previousSibling.offsetHeight); } .beide{ width:100%; height:100%; background-color:green; position:relative; } </style> <BODY> <div class="beide"> <div class="uitlooplinks"> Deze div zou het gedeelte van het scherm dat links van de website ligt moeten vullen</div> <div class="website"></div> <div class="uitlooponder"> Deze div zou het gedeelte van het scherm onder de website en uitlooplinks moeten vullen </div> </div> </body> </html> [/code:1:e446bdfc96] Ik moet wel toegeven, het is een behoorlijke hack. Misschien kun je toch beter met tabellen werken.
Link naar reactie
[quote:52719d1971="Demonaz"]Maar ik vroeg mij iets anders af. Waarom wil je je site perse in 800x600 maken? Ik als surfer met een 17" en werkend op een resolutie van 1152x864 heb dus een hoop loze ruimte rechts en onder aan de pagina? Waarom zorg je er niet voor dat da pagina automatisch oprekt mt de grote van de browser?[/quote:52719d1971] Dat vind ik juist weer niet fijn, dan wordt alles zo uitgerekt. (tenminste dat zou het worden als ik zo'n grote monitor had, maar ik heb het wel eens gezien op zo'n grote monitor en ik vind het niet zo mooi, 1152x864 is misschien net de grens waarop je de boel kunt oprekken misschien.)
Link naar reactie
[quote:4ae3947fc9="mw22"][quote:4ae3947fc9="Demonaz"]Maar ik vroeg mij iets anders af. Waarom wil je je site perse in 800x600 maken? Ik als surfer met een 17" en werkend op een resolutie van 1152x864 heb dus een hoop loze ruimte rechts en onder aan de pagina? Waarom zorg je er niet voor dat da pagina automatisch oprekt mt de grote van de browser?[/quote:4ae3947fc9] Dat vind ik juist weer niet fijn, dan wordt alles zo uitgerekt. (tenminste dat zou het worden als ik zo'n grote monitor had, maar ik heb het wel eens gezien op zo'n grote monitor en ik vind het niet zo mooi, 1152x864 is misschien net de grens waarop je de boel kunt oprekken misschien.)[/quote:4ae3947fc9] hmm, misschien op een breedbeeld monitor gaat het er gek uitzien. je kan natuurlijk ook per resolutie de lettergrote bepalen. Zo blijft alles goed in takt. Als je een vaste resolutie gebruikt en dan met je browser het lettertype vergroot dan krijg je echt een rommeltje. Alles gaat overelkaar schuiven. ik doe dit af en toe omdat ik soms een site moeilijk te lezen vind. Maar volgens mij is de meest gebruikte resolutie tegenwoordig 1024x768?
Link naar reactie
[quote:b87d6f4efd="Demonaz"] hmm, misschien op een breedbeeld monitor gaat het er gek uitzien. je kan natuurlijk ook per resolutie de lettergrote bepalen. Zo blijft alles goed in takt. Als je een vaste resolutie gebruikt en dan met je browser het lettertype vergroot dan krijg je echt een rommeltje. Alles gaat overelkaar schuiven. ik doe dit af en toe omdat ik soms een site moeilijk te lezen vind. [/quote:b87d6f4efd] Ja, maar dat is volgens mij niet door de webdesigner te regelen (tenminste niet zonder javascript), alleen door de gebruiker. (de font-grootte afhankelijk van de resolutie). Ik pas het eigenlijk zelf nooit aan. [quote:b87d6f4efd="Demonaz"] Maar volgens mij is de meest gebruikte resolutie tegenwoordig 1024x768?[/quote:b87d6f4efd] Volgens mij ook.
Link naar reactie
[quote:7afcf0dfdd] Maar ik vroeg mij iets anders af. Waarom wil je je site perse in 800x600 maken? Ik als surfer met een 17" en werkend op een resolutie van 1152x864 heb dus een hoop loze ruimte rechts en onder aan de pagina? Waarom zorg je er niet voor dat da pagina automatisch oprekt mt de grote van de browser? [/quote:7afcf0dfdd] Deze loze ruimte wil ik dus opvangen door het beeld variabel te vullen. @mw22. Ik denk dat dit gaat werken thnx. Nog ff 1 ding: wat doet [code:1:7afcf0dfdd] height:expression(this.parentNode.offsetHeight-this.previousSibling.offsetHeight); [/code:1:7afcf0dfdd] ? Gert-Jan
Link naar reactie

Om een reactie te plaatsen, moet je eerst inloggen

Gast
Reageer op dit topic

×   Geplakt als verrijkte tekst.   Herstel opmaak

  Er zijn maximaal 75 emoji toegestaan.

×   Je link werd automatisch ingevoegd.   Tonen als normale link

×   Je vorige inhoud werd hersteld.   Leeg de tekstverwerker

×   Je kunt afbeeldingen niet direct plakken. Upload of voeg afbeeldingen vanaf een URL in

×
×
  • Nieuwe aanmaken...