MrBlue: DIV & CSS

Sorry für den Beitrag, ich habe aber schon etliche Tutorials etc. durchgearbeitet, und immer noch nicht wircklich eine Lösung für mein Problem.
Die folgende Seite sollte eine Kopf und Fuszeile haben. Links eine Navigationsleitse und rechts davon eine Textfeld. Die beiden Elemene in der mite (Text und Navi) sollten sich immer so anpassen, das die ganze Seite Ausgefüllt ist. Jedoch schaffe ich das nicht. Das ganze wird weinfach immer zu gross. Bin für jede Hilfe dankbar!

Hier noch der "Code":
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html style="margin:0;padding:0;height:100%">
<head>
<title>Unbenanntes Dokument</title>
</head>

<body style="margin:0;padding:0;height:100%">
<div style="background:#000000; height:100%">
<div style="background:#FFFFFF; height:100px">Banner</div>
<div style="background:#FFFFFF; height:100%; float:left">Navi</div>
<div style="background:#FFFFFF; height:100%">TEXT</div>
<div style="background:#FFFFFF; height:100px">Footer</div>
</div>
</body>
</html>

  1. Hallo,

    Sorry für den Beitrag, ich habe aber schon etliche Tutorials etc. durchgearbeitet, und immer noch nicht wircklich eine Lösung für mein Problem.
    Die folgende Seite sollte eine Kopf und Fuszeile haben. Links eine Navigationsleitse und rechts davon eine Textfeld. Die beiden Elemene in der mite (Text und Navi) sollten sich immer so anpassen, das die ganze Seite Ausgefüllt ist. Jedoch schaffe ich das nicht. Das ganze wird weinfach immer zu gross. Bin für jede Hilfe dankbar!

    Hast du dir schon [linkhttp://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss] durchgelesen?
    Dort wird auf diese Problematik genau eingegangen. Wenn danach noch was unklar ist, kannst du hier rückfragen.

    Grüße
    Thomas

  2. Hallo,

    Die folgende Seite sollte eine Kopf und Fuszeile haben. Links eine Navigationsleitse und rechts davon eine Textfeld. Die beiden Elemene in der mite (Text und Navi) sollten sich immer so anpassen, das die ganze Seite Ausgefüllt ist.

    ergänzend noch ein Beispiel für ein CSS Drei Spalten Layout mit Kopf und Fuss.

    Problematisch ist halt die Vererbung der 100% auf die inneren Elemente ohne einfach die je
    100px für Kopf und Fussleiste abziehen zu können.
    Eine Möglichkeit doch abzuziehen sähe entspr. deinem Code so aus:

    <body style="margin:0;padding:0;max-height:100%;height:100%;margin-top:-100px;">
    <div style="padding-top:100px;height:100px;width:100%;">Banner</div>
    <div style="float:left">Navi</div>
    <div style="margin-top:-200px;height:100%;"><div style="padding-top:200px">TEXT</div></div>
    <div style="height:100px;width:100%;clear:both">Footer</div>

    Allerdings könnte das bei einigen Browsern so nicht klappen bzw. für den IE 6 mag es noch
    mit richtigem Rendermodus, also wohl nicht "quirks", gehen.

    Grüsse
    Cyx23