Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Height niet relatief?

Anoniem
None
22 antwoorden
  • 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?
  • 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.
  • Ik zou het doen met tabellen i.p.v. divs.
  • [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?
  • Als je de site-div wilt centreren en eromheen is het leeg, dan is hier een voorbeeld. (Anne is met vacantie)

    wimb
  • 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%?
  • [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 :)
  • Dan is dit het misschien wel.

    wimb
  • thnx voor de link wimB, ik neem het morgen even door, want ik moet er vandoor.

    Ik kom er nog op terug…
  • 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:
    klik

    m vr gr.
  • [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 :) .
  • Als dit het niet is, dan geef ik het op.

    wimb
  • Misschien een <div> onderaan met in de css "bottom:0 " en rechts eentje met "right:0;" en dan laat je de middelste uitvullen over de hoogte en breedte.
  • 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.
  • [code:1:b35d12d5e2]
    .body{ margin: 0; }[/code:1:b35d12d5e2]
    Die . punt voor de body is niet zo handig, heeft me ooit eens een half uur zoeken gekost. Het werk alleen met <body class="body"> en dat lijkt mij niet de bedoeling.

    wimb
  • 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="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.)
  • [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?
  • [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.
  • [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

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.

Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord