Height Div Bereiche verschachteln und Höhe defnieren

meddie · 10 Dezember 2014

Hallo Leute,

ich möchte versuchen, ein Joomla Template zu erstellen. Das sollte vom Aufbau rech einfach gehalten werden. Aber irgendwie scheitere ich schon ganz am Anfang.
Das Layout sollte so aussehen:
https://dl.dropboxusercontent.com/u/38957759/screenshots/modulepositions.png

Ich habe einen Container der sich auf die gesamte Seite erstreckt. Diesen Container möchte ich horizontal auf 3 Teile aufteilen Oben, Mitte und Fußzeile.
In dem Bereich oben wollte ich auf 5 Teile aufteilen.
Dazu habe ich jetzt den body auf Height 100% gesetzt. Den Container auf min-height 100% gesetzt. Nun wenn wollte ich dass der Bereich oben 15% von der Höhe desConaines hat. Und ich wollte 2 DIVs im Bereich oben setzen die jeweils 80 und 20 % vom DIV oben haben.
Aber irgendwie übernimmt das DIV oben keine Höhneangeben in Prozenz sondern nur lediglich in px. Da die Seite ja variabel sein soll, will ich nicht mit px arbeiten.
Könnt Ihr mir helfen.
index.html

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" xml:lang="de-de" lang="de-de" dir="ltr">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Willkommen im Hotel Bergknappenhof</title>
        <link rel="stylesheet" type="text/css" href="css/template.css" />
    </head>
    <body>
        <div id="container">
            <div id="oben">
                <div id="wetter">
                    wetter
                </div>
          
              
            </div>
            <div id="logo">
                    logo
                </div>
          
                <div id="suche">  
                    suche
                </div>
                <div id="menu_links">
                    menu links
                </div>
                <div id="menu_rechts">  
                    menu rechts
                </div>
            <div id="mitte">
                <div id="beitrag">
                    Hier folgt der Beitrag.
                </div>
              
                <div id="unten">
                    Button
                </div>
            </div>
          
            <div id="fusszeile">
                Fußzeile
            </div>
        </div>
    </body>
</html>

und die css

Code:

html,body {
    font-size: 12px;
    font-family: Helvetica, Arial, sans-serif;
    height: 100%;
}
#container {
    margin:0;
    padding:0;
    height: 100%; /* braucht es für die min-height des Containers */
    background-color: black;
    min-height: 100%;
}
#oben {
    width: 100%;
    min-height: 15%;
    background-color: red;
}

#wetter {
    width: 35%;
    height: 80%;
    background-color: blue;
    float: left;
}

vielen Dank im Voraus
Gruß Eddie

MrMurphy · 11 Dezember 2014

Hallo

Da die Seite ja variabel sein soll

Da hast du wohl etwas falsch verstanden. %-Angaben machen eine Seite keineswegs von sich aus variabel.

Da bei einem variablem Layout rauf und runter gescrollt werden soll ist es unsinnig, die Höhe vorzugeben. Die soll der Browser selbst aus der Höhe der einzelnen Container und damit dem gesamten Inhalt bestimmen. Du gibst jedoch die Fensterhöhe als Gesamthöhe vor. Wie soll denn die Seite auf Smartphones und Tablets aussehen? Dabei mit Hoch- und Querformat? Wer Joomla benutzt hat in der Regel ja viel Inhalt der entsprechend Platz benötigt.

Bei einem variablen Layout könnte man sinnvoll höchstens dafür sorgen, das bei wenig Inhalt und großem Fenster der Footer am unteren Fensterrand bleibt, Stichwort "Sticky Footer".

Gruss

MrMurphy

Height Div Bereiche verschachteln und Höhe defnieren

meddie

Neues Mitglied

MrMurphy

Senior HTML'ler

Neueste Beiträge