-
Q:
[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.
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.
Misschien is dit iets voor je?
Google zoektermen ‘fill browser 100% css’
Probeer anders:
100% div full screen
o.i.d.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?
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]
Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.