CSS 2-spaltiges, 2-zeiliges Layout

te one · 14. Oktober 2011

Da ich wieder mal kurz vor dem verzweifeln bin, wende ich mich an euch:

Und zwar möchte ich ein Seiten-Layout mit CSS welches 4 Teile beinhaltet.
Aussehen soll es so: (leider zerstört es meine Grafik sobald ich abschicke. Aber es sind eigentlich halt oben 2 Spalten (linke ist 250px, rechte soll den Rest bekommen) mit der Höhe von (Gesamthöhe-250px). Unten sind dann wieder 2 Spalten von denen die linke wieder 250px breit ist und die rechte den Rest bekommen soll. Die Höhe des unteren Teils soll 250px betragen.

Code:

    Menü                |     Main
    Breite: 250px    |    Breite: Rest
    Höhe: Rest        |    Höhe: Rest
                             |
                             |
                             |
                             |
                             |
                             |
                             |
                             |
                             |
                             |
                             |
-----------------------|---------------------------------------------------------------------
    Karte                |     Chat
    Breite: 250px    |    Breite: Rest
    Höhe: 250px     |    Höhe: 250px
                             |
                             |
                             |

Karte soll nicht scrollbar sein.
Menü, Main und Chat sollen jeweils einen eigenen Scrollbalken besitzen.

Mein jetziges Layout funktioniert auf den ersten Blick ganz gut. Sobald ein Inhalt aber mal länger wird macht es sachen, die es nicht soll.

Aktuelles CSS:

Code:

#wrapper {
width:100%;
height:100%;
background-color:white;
}
#menu {
border-right:1px dotted black;
position:absolute;
/*background-color:black;*/
width:206px;
height:100%;
margin-bottom:216px;
padding-left:10px;
padding-right:10px;
top:0px;
float:left;
}
#map { /*Hier Karte genannt*/
position:absolute;
/*background-color:yellow;*/
width:206px;
height:206px;
bottom:0px;
padding:10px;
}
#main {
position:absolute;
/*background-color:red;*/
margin-left:226px;
margin-bottom:226px;
padding:10px;
}
#chat {
position:absolute;
/*background-color:blue;*/
height:206px;
margin-left:226px;
padding:10px;
bottom:0px;
}

Wie um Himmels Willen bekomm ich das gebacken?
Würde nur ungern zu einer HTML-Tabelle als Layout greifen. Aber damit würde es wahrscheinlich ohne Probleme klappen.

seluce · 14. Oktober 2011

Arbeite doch mit relativen Positionen bzw. noch besser mit float (und ggf. padding).

Das einfachste ist ein großen Container und anschließend in diesem mehrere Kleine einzufügen und diese via float zu positionieren. Dann haste auch keine Probleme mit Auflösungen und px-Angaben.

Flup · 14. Oktober 2011

Hm, kann doch noch was beitragen, vlt hilft dir das hier: http://960.gs/demo.html
Natürlich brauchst du kein 12er Grid, aber wie man sowas grundsätzlich aufbaut sollte klar werden.

racer320kmh · 14. Oktober 2011

Positioniere das übergreifende Div wrapper relativ, die anderen absolut. Dann ohne margin, nur mit top, left, usw.
Scrollbars bekommst du mit overflow: auto oder scroll - aber nur wenn der Inhalt zu lang ist - verhindern kannst du sie per overflow: hidden.

te one · 14. Oktober 2011

@seluce: Da fängt es dann aber schon wieder an. Wenn ich nen div links floate mit ner Breite von 250px, und dann rechts daneben einen haben möchte, der den Rest der Seite füllt wird dieser durch width:100% so breit wie der bildschirm und dann nach rechts verschoben.
Oder klappt das durch den Wrapper? (glaube aber das habe ich schon probiert)

@Flup: Danke guck ich mir mal an

@racer: Wenn ich nun aber den Main-Div auf absolut setze und left:250px mache (bei einer Breite von 100%) schiebt er es ja theoretisch wieder rechts raus (eben um diese 250px).
Durch den relativen Wrapper könnte man das wahrscheinlich nicht sehen, aber trotzdem geht dann doch der Text am rechten Rand einfach ausm Bildschirm raus? Oder nicht?!

racer320kmh · 15. Oktober 2011

Ich habe es jetzt mit floaten für dich erstellt. Variable Höhe habe ich nicht hinbekommen.

Code:

#wrapper {
width:100%;
height:100%;
background-color:white;
}
#menu {
border-right:1px dotted black;
background-color: #808080;
width:250px;
height:400px;
float:left;
overflow: auto;
}
#map { /*Hier Karte genannt*/
background-color:yellow;
width:250px;
height:250px;
float: left;
}
#main {
background-color:red;
height: 400px;
min-width: 400px;
overflow: auto;
}
#chat {
background-color: blue;
height: 250px;
min-width: 400px;
overflow: auto;
}
#oben {

}
#unten {

}

HTML:

<div id="wrapper">
<div id="oben">
<div id="menu">

</div>
<div id="main">

</div>

</div>
<div id="unten">
<div id="map">

</div>
<div id="chat">

</div>

</div>
</div>

te one · 16. Oktober 2011

Irgendwie meinen alle, dass CSS alles möglich macht und man das nutzen soll, aber effektiv scheitert es an solche Kleinigkeiten

Gäbe es die Möglichkeit Angabe wie "100%-250px" zu benutzen, würde alles klappen...

Entweder stell ich mich nur zu blöd an, oder das geht einfach nicht (anscheinend hats bei dir ja auch net so geklappt, scheint also nicht nur mir so zu gehen)

mercsen · 16. Oktober 2011

in CSS 3 ist es möglich zu rechnen, alternativ über JavaScript. Ich nutze CSS mittlerweile auch nur noch um klassen zu erstellen und styles fest zu legen, positionieren etc. erledige ich mit JS.
Wenn man das allerdinsg nicht nutzen will wirds schwieig ^^

killray · 16. Oktober 2011

Und was machst du wenn jemand ohne JS surft, gibt ja nun doch schon einige ^^.

te one · 16. Oktober 2011

Ab wann/welche Browser wird CSS3 unterstützt?

Hm ohne JS wäre es natürlich schöner. Bräuchte in meinem ganzen Projekt nur an einem kleinen Stückchen ein bisschen JS wobei ich das für nicht-JS-ler ersetze, ohne dass die große Nachteile haben.

Jetzt wärs natürlich schade wenn ich die ganze Seite JS-abhänging mache...

Suche

CSS 2-spaltiges, 2-zeiliges Layout

te one

Lt. Commander

seluce

Commander

Flup

Gast

racer320kmh

Lieutenant

te one

Lt. Commander

racer320kmh

Lieutenant

te one

Lt. Commander

mercsen

Lt. Commander

killray

Lt. Commander

te one

Lt. Commander

Ähnliche Themen