[HTML/CSS] Layout

martin · 20 Februar 2013

Hi

mal wieder lässt mich ein Layout verzweifeln. Ich bastle jetzt schon seit Stunden rum, ohne Erfolg. Ich bräuchte ein Layout, welches aus vier Bereichen besteht: Kopfzeile, Menüfenster, Hauptfenster, Fußzeile.
Das Ganze soll so angeordnet sein und vor allem bei Ändern der Größe des Browserfensters sich so verhalten wie beim Roundcube Webmail (im Anhang ist ein Screenshot).
Ich versuche es kurz in Worte zu fassen. Die Kopf- und Fußzeile sollten "fixed" sein, sich also bei der Änderung der Größe des Browserfensters mitbewegen (das habe ich sogar hinbekommen).
Alles weitere funktioniert leider nicht so wie ich es gerne hätte. Die Bereiche Menü (linker Seitenrand) und Hauptfenster sollten sich in der Höhe an die Höhe des Browserfensters anpassen und sich ebenfalls mitändern bei Änderung der selben.

Hier mal meine kläglichen Versuche:
css:

PHP:

html, body { 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
    color: black;
    background-color: #333333;
    margin: 0;
    padding: 0;
    height: 100%; /* WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */
}

#content{
    position: relative;
    border: 1px solid orange;
    background-color: #FFFFFF; 
    width: 80%; 
    margin: auto; /* Div soll zentriert werden */
    min-height: 100%; /* Mindesthöhe für moderne Browser */
    height:auto !important; /* Important Regel für moderne Browser */ 
    height:100%; /* Mindesthöhe für den IE */ 
    overflow: hidden !important; /* FF Scroll-leiste */ 
}

#Kopf{
    position:fixed;
    height: 20px;
    width: 1000px;
    border: 2px solid orange;
    top: 20px;
}

#Liste{
    position: absolute;
    top: 40px;
    left: 0px;
    width: 195px;
    min-height: 90%;
    height: auto !important;
    height: 90%;
        border: 2px solid orange;
}

#Details{
    position: absolute;
    top: 40px;
    left: 200px;
    width: 800px;
    min-height: 300px;
        border: 2px solid orange;
}

#Fuss{
    position:fixed;
    height: 20px;
    width: 1000px;
    border: 2px solid orange;
    bottom: 20px;
}

test.html

<body>

<div id='content'>
<div id='Kopf'>K O P F Z E I L E</div>
<div id='Liste'>L I S T E</div>
<div id='Details'>D E T A I L S</div>
<div id="Fuss">F U S S Z E I L E</div>
</div>
</body>

Kamikaze · 20 Februar 2013

Also bei mir funktioniert dein Beispiel, zumindest die Liste skaliert vertikal mit.

Natürlich passen dann irgendwann die 90% nicht mehr (ich vermisse schon länger die Option in CSS zu rechnen um Dinge wie 100% - 120pt oder noch besser 100% - #header.height - #footer.height zu sagen.

martin · 20 Februar 2013

hi

genau so eine Berechnung bräuchte ich auch, ja!

Irgendwie scheint das nicht ganz so trivial zu sein wie ich dachte, aber nichts desto trotz muss es ja fast mit reinem css und html gehen, ich habe nämlich versucht Javascript zu deaktiveren und dann die Seite von Roundcube aufzurufen. Das Programm funktionert dann zwar nicht mehr wie es soll, aber der Seitenaufbau bleibt erhalten. Also irgendwie muss das auch ohne Javascript zu machen sein, denn wie du schon sagtest, das mit den 90% ist nicht zielführend! :rolleyes:

juedan · 20 Februar 2013

Hallo martin,

wenn Du es so machst, dann funktioniert es so, wie Du es haben möchtest:

Code:

#Liste{ 
    position: absolute; 
    top: 40px; 
    left: 0px; 
    width: 195px; 
    [COLOR="Red"]min-height: 90%;  /* raus */[/COLOR]
    height: auto !important; 
    [COLOR="red"]bottom: 40px; /* dazuschreiben */[/COLOR]
    border: 2px solid orange; 
    [COLOR="red"]height: 90%; /* rausschmeissen */[/COLOR]
} 

#Details{ 
    position: absolute; 
    top: 40px; 
    left: 200px; 
    width: 800px; 
    [COLOR="red"]min-height: 90%; /* rausschmeissen */[/COLOR]
    border: 2px solid orange; 
    height: auto !important; 
    [COLOR="red"]bottom:40px; /* eintragen */[/COLOR]
}

Viele Grüße

jueDan

martin · 20 Februar 2013

Wow! Danke JueDan, genau so wollte ich das haben.

martin · 15 November 2013

Neues Problem, das Thema ist das Selbe. Ich komme mit der Anordung der DIVs einfach nicht klar. Hier mal etwas Code:

HTML:

<div id='container' style='margin:auto;width:1000px;'>
<div id='head' style='background-color: #ffffcc;height:100px;'>KOPF</div>
<div id='content' style='background-color: #ccffcc;'>
    <div id='mnu' style='width:200px;border:1px solid red;left:0px;float:left;'>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
        <div><p>Punkt1</p></div>
       
        <div style='height:100px;border:2px dashed blue;'>&nbsp;</div>
    </div>
   
    <div id='subcontent' style='left:200px;widht:800px;border:2px solid black;'>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
        BLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXTBLINDTEXT<br>
       
    </div>

</div>
</div>

Soweit klappt alles wie ich es gerne haben möchte, mit einem kleinen - aber für mich sehr störenden - Schönheitsfehler.
Was ich haben möchte, ist ein Layout mit einem "head" welcher 150px hoch und 1000px breit ist. darunter einen Container namens "content" der unterteilt werden soll in 2 Spalten, links das "mnu" und rechts "subcontent". Soweit klappt das auch, was mich aber stört, bzw. was ich gerne anders haben möchte, ist, dass in meinem Beispiel der div "content" anscheinend nicht die beiden divs "mnu" und "subcontent" komplett umschließt, sondern sich in der Höhe nach dem div "subcontent" zu richten scheint.
Mir geht es darum, dass ich es so haben möchte, dass sich die Höhe von "content" immer daran richtet, dass beide der erwähnten divs umschlossen werden.

Sickboy · 15 November 2013

Ich habe zwar nicht ganz verstanden, was du genau machen willst, aber vielleicht hilft das:

Code:

<div id='content' style='background-color: #ccffcc; overflow: auto;'>

martin · 15 November 2013

Hi Sickboy

danke für die Antwort, aber ich habe mich wohl falsch ausgedrückt. Mit overflow:auto werden die Scrollbalken des DIVs benutzt, genau das möchte ich nicht. Im Prinzip möchte ich es so haben, wie hier im Forum jeder einzelne Beitrag dargestellt wird. Es gibt links eine Spalte z.B. "Menü" welches eine minimale Höhe nicht unterschreiten darf (hier im Forum wäre das die Spalte wo der Name und das Bild der User ist). Falls der Inhalt der rechten Spalte größer bzw. höher ist, als die linke Spalte, soll sich die Höhe der linken Spalte automatisch anpassen.
Ich hoffe jetzt versteht man was ich möchte. :rolleyes:

[HTML/CSS] Layout

martin

Well-Known Member

Anhänge

Kamikaze

Warrior of Sunlight

martin

Well-Known Member

juedan

FreeBSDler

martin

Well-Known Member

martin

Well-Known Member

Sickboy

Müßiggänger

martin

Well-Known Member

Wir schützen deine Privatsphäre