CSS en 100% height - Softwareontwikkeling

zaterdag 20 augustus 2005 23:01

Acties:

Verwijderd

Topicstarter

Hallo allemaal,

Ben al een tijdje aan het stoeien met CSS en DIV'jes maar wat ik nog steeds niet klaar krijg is het volgende:

Wil graag een 100% vullende opzet met een header en een footer.
Zonder footer gaat het perfect met bijgevoegde code in zowel IE, Opera en Firefox.

Maar hoe zorg ik er nu voor dat de footer netjes onderaan de site komt te staan en de gehele pagine schermvullend is verticaal?

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>
<style type="text/css">
<!--
html{height: 100%;
}
body {
    text-align: center;
    height: 100%;
    margin: 0px;
    padding: 0px;   
}
#container {
    width: 780px;
    margin-right: auto;
    margin-left: auto;
    height: 100%;
    background: url(images/slice.jpg) repeat-y;
}
.top {
    background: url(images/header.jpg) no-repeat;
    height: 222px;
}
.footer {
    background: url(images/footer.jpg) no-repeat;
    height: 44px;
}

-->
</style>
</head>

<body>
<div id="container">

<div class="top"></div>

</div>

</body>
</html>

Waar plaats ik de code voor de footer zodat de hoogte niet bij de container wordt opgeteld?
Ongetwijfeld is m'n code te minimalistisch maar heb al heel wat gezocht vind wel voorbeelden maar niet schermvullend (verticaal).

[ Voor 28% gewijzigd door Verwijderd op 20-08-2005 23:16 ]

zondag 21 augustus 2005 15:17

Acties:

Verwijderd

Meer info vind je in de discussie [CSS] 3 rows waarvan 2 vast.
Houd bij de oplossing in de gaten of het gaat om quirks/strict mode.

[ Voor 4% gewijzigd door Verwijderd op 21-08-2005 15:18 ]

zondag 21 augustus 2005 16:13

Acties:

Zoefff

❤ 

Toevallig was er gisteren in #fotografie een discussie over het onderwerp. Ben er toen achter gekomen dat het behoorlijk pittig is, maar imho niet onmogelijk. Heb toen snel een opzetje gemaakt, maar moet er wel gebruik maken van een css-hack om nog wat extra aan FF te geven.

Zie http://zoefff.gotdns.com/got/miekd.htm

De footer is overigens gebaseerd op de footer beschreven in dit artikel van A List Apart.

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

zondag 21 augustus 2005 22:23

Acties:

Verwijderd

Topicstarter

Ziet er goed uit hoor, in FF en Opera heb ik een scrollbalk met een kleine marge onderaan de pagina.

Op A-list zag ik alleen een oplossing mbv van javascript voor de footer anders kon je geen doctype declareren.

Maar dat is in deze opzet dus geen probleem.

Zou die minimale marge in FF en Opera nog weg te werken zijn?

zondag 21 augustus 2005 22:26

Acties:

Zoefff

❤ 

Welke minimale marge bedoel je?

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

zondag 21 augustus 2005 23:08

Acties:

Verwijderd

Topicstarter

Ach ik zie het ik kijk op 19Inch en de viewport was precies gevuld bij IE maar bij FF te vol ahw waardoor er (gelukkig) een scrollbalk ontstaat.

Ik heb even wat tekst weg gehaald (pagina minder hoog dus) en nu is het goed in FF en ook in Opera klasse dus.