9 berichten aan het bekijken - 1 tot 9 (van in totaal 9)
  • Q:
    Bijdrager
    pvdheijden

    [div] 100% x 100% div

    Ik wil een site maken van 100% bij 100%, bestaande uit:
    (uiteraard in CSS maar dit leest gemakkelijk)

    <div id=”navigation” width=”100%” height=”40px”>
    menu
    </div>
    <div id=”image” width=”100%”>
    <img>
    </div>
    <div id=”footer” width=”100%” height=”40px”>
    copyright
    </div>

    Zoals je ziet is voor div.image geen hoogte ingesteld. Ik wil graag dat deze div de pagina opvult, met andere woorden, deze moet ( 100% – 80px ) worden.

    Uiteindelijk wil ik de foto in die div.image zo groot maken dat deze er precies gecentreerd en uitgevuld in komt.

    Hoe doe ik dit? Kan niets vinden, denk dat ik niet met de juiste sleutelwoorden zoek.

    Bijdrager
    Jakko Westerbeke

    Mijn idee is om in plaats van de div image gewoon de body van het document te gebruiken. Als je daarvan de boven- en ondermarges op 40px zet ben je zo goed als klaar …

    Bijdrager
    inactiveaccount

    Ik ben het met Jakkie eens. Je kunt in ieder geval niet rekenen, dus 100%-80px kun je niet zeggen.

    Als je echter op die 40px boven en 40px onder ook iets wilt zetten, kun je ook gewoon de padding-top en padding-bottom op 40px zetten. En dan met bv. position: absolute boven en onder een div over de body.

    Bijdrager
    wout3r

    Misschien is dit iets voor je?

    Google zoektermen ‘fill browser 100% css’
    Probeer anders:
    100% div full screen
    o.i.d.

    Bijdrager
    pvdheijden

    Ik wil niet zoiets als:

    http://www.laforetvisuals.com/main.php

    Dit is in Flash gemaakt, maar zeer goed schaalbaar. Alleen het plaatje schaalt mee.

    En nu in HTML + CSS…

    Het kan natuurlijk met een table, maar kan het ook met een div?

    Bijdrager
    inactiveaccount

    Ja, zoals al verteld. Ik kan wel meteen een voorbeeld voor je maken maar is het niet leuker / leerzamer om met de hints die hier gegeven werden eerst zelf nog wat te proberen?

    Als iedereen de hele tijd alles moet voorkauwen leer je t nooit…

    Bijdrager
    pvdheijden

    Ik had dat met de margin en padding al geprobeerd. Als ik dat toepas, krijg ik meteen een scrollbar, de pagina is in dit geval 40px groter dan het scherm.

    Weer geprobeerd, maar krijg het nog niet aan de praat zonder de scrollbar in Safari.

    Bijdrager
    inactiveaccount

    Weet je wat, ik geef je een kleine tip. Als je hiermee niet eruit komt vind ik t genoeg;)
    [code:1:858c95c993]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
    <html xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Jippie ka jee</title>
    <style type="text/css">
    html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    }

    div#Container{
    position: relative;
    width: 100%;
    background: lightgray;
    height:auto !important; /* normale browser */
    height:100%; /* stomme IE browser*/
    min-height:100%; /* normale browser */
    }

    div#Container div#Header{
    height: 40px;
    background-color: black;
    }

    div#Container div#Content{
    padding: 10px;
    font-family: Sans-serif;
    }

    div#Container div#Footer{
    height: 40px;
    background-color: black;
    position: absolute;
    width: 100%;
    bottom: 0;
    }
    </style>
    </head>
    <body>

    <div id="Container">
    <div id="Header"></div>

    <div id="Content">
    rest van je site
    </div>

    <div id="Footer"></div>
    </div>

    </body>
    </html>[/code:1:858c95c993]

    Bijdrager
    danielpunt

    Ik heb wel een JavaScript oplossing voor je, die moet ik nog even zoeken.

9 berichten aan het bekijken - 1 tot 9 (van in totaal 9)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.