Seitenlayout mit CSS

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Seitenlayout mit CSS

    Guten Abend.

    Ich versuche mich schon seit mehreren Stunden an einem Layout per CSS und habe mich nun nach ewigem Durchforsten des Interents dazu entschlossen mich hier auszuheulen.

    Das Layout besteht aus einem Header, einer Navigation (links) und einem Content-Bereich (rechts neben der Navigation).

    Hier zu sehen: klick mich

    PHP-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>Untitled Document</title>
    </
    head>

    <
    body style="min-height: 100%; margin: 0px;">

    <
    div id="body" style="position: absolute; height: 100%; width: 100%; border: none;">
    <
    div id="header" style="position: absolut; height: 197px; width: 100%; border: none; 
    background-color:#333333; border: none;"
    >HEADER</div>
    <
    div id="navigation" style="position: relative; height: 100%; width: 210px; border: none; 
    background-color: #2C363F; float: left; border: none;"
    >NAVIGATION</div>
    <
    div id="content" style="position: absolute; left: 210px; height: 100%; width: 100%; border: none; 
    float: right; border: none; background-color: #CCCCCC;"
    >CONTENT</div>
    </
    div>

    </
    body>
    </
    html
    Der Header hat eine feste Höhe. Die darunter liegende Navigation (feste Breite) und der Content Bereich sollten die restliche verfügbare Höhe bis zu Unterkante (Browser) einnehmen.
    Weiterhin soll der Content die restliche zur Verfügung stehende Breite einnehmen.

    Meine Annahme war, dass wenn ich die Höhe mit 100% angebe der zur Verfüfung stehende Rest ausgefüllt wird. Leider bezieht sich diese Angabe wohl auf maximale Browserhöhe und ich schieße voll über mein Ziel hinaus.

    Hat hierzu jemand einen Tipp?

  • #2
    ...und der Content Bereich sollten die restliche verfügbare Höhe bis zu Unterkante (Browser) einnehmen.
    Dann suche mal nach 'faux columns' in der SuMa deiner Wahl

    Gruss

    tobi
    Gutes Tutorial | PHP Manual | MySql Manual | PHP FAQ | Apache | Suchfunktion für eigene Seiten

    [color=red]"An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it."[/color]
    Mohandas Karamchand Gandhi (Mahatma Gandhi) (Source)

    Kommentar

    Lädt...
    X