CSS Layout

matwic · 11.03.2008, 23:55

Hallo!

Ich möchte folgendes CSS Layout erstellen:

Alles immer horizontal zentriert und oben und unten fest an den inneren Rändern des Browserfensters "klebend". Der Scrollbalken rechts erscheint erst, wenn kein Platz mehr für den Inhalt da ist.
Es gibt einen linken sowie und einen rechten Bereich. Diese beiden Spalten bleiben jedoch "verborgen" (weiss auf weiss ohne Ränder); es erscheint dort nur gelegentlich Text oder ein Bild, das an den Seiten des mittleren Bereiches "hängt". Um das Grundgerüst zu erstellen, habe ich natürlich alle Bereiche anders eingefärbt.
Der Bereich in der Mitte ist von oben nach unten aufgeteilt in Navigation, Inhalt und Fusszeile.

Da ich ein HTML und CSS Neuling bin, will das natürlich nicht klappen, wie es sollte ode besser gesagt, kenne ich mich mit der Positionierung nicht sehr gut aus und da hat mir bisher auch das Suchen im Internet nicht viel gebracht. Ist nicht so einfach diese Dinge als Anfänger zu verstehen und umzusetzen.

Kann mir da vielleicht jemand behilflich sein?:

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">
<head>
<title>test_layout</title>
<style type="text/css">
html {
height:100%;
}

body {
margin:0;
padding:0;
min-height:100%;
text-align:center;
}

* html body {
height:100%;
}

#container {
width:600px;
text-align:left;
margin:0 auto;
background-color:red;
}

#links {
background-color:green;
float:left;
}

#mitte {
background-color:blue;
}

#mitte_navigation {
background-color:yellow;
}

#mitte_inhalt {
background-color:fuchsia;
}

#rechts {
background-color:orange;
float:right;
}

#unten {
background-color:black;
color:#fff;
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="links">links</div>
<div id="mitte">
<div id="mitte_navigation">navigation</div>
<div id="mitte_inhalt">inhalt</div>
</div>
<div id="rechts">rechts</div>
<div id="unten">unten</div>
</div>
</body>
</html>

Vielen Dank im Voraus für eure Hilfe!

matwic

Rinaldo · 12.03.2008, 00:51

Gibt´s da vielleicht auch eine Grafik, die darstellt, wie es aussehen soll?

matwic · 12.03.2008, 08:09

Ja, stimmt eigentlich...

Werde ich posten. Danke!

matwic

matwic · 12.03.2008, 08:56

So soll es ganz grob ungefähr aussehen. Die Verhältnisse stimmen nicht ganz:

Links und rechts wird es mehr Rand geben und der mittlere Bereich wird wohl nicht ganz so breit sein. Und wie gesagt, das Ganze sollte bei jedem User horizontal zentriert sein und immer die volle Bildschirmhöhe ausfüllen (sich anpassen).

Nachtrag: In den Bereichen links und rechts sollte ich die Möglichkeit haben über die gesamte Höhe des Browswerfensters (an den Seiten des mittleren Bereichs) Objekte und Text zu positionieren.

Beim Verkleinern der Seite sollte diese "zusammengestaucht" werden, sich also der Grösse anpassen und die Scrollbalken erscheinen erst, wenn es für den jeweiligen Inhalt wirklich keinen Platz mehr hat.

Ich hoffe das ist einigermassen verständlich; ist gar nicht so einfach auszuformulieren, was man sich im Kopf zusammendenkt

.

Danke jedenfalls!

matwic

matwic · 13.03.2008, 14:39

Nun bin ich, denke ich, wieder einen Schritt weiter, aber es funktioniert eben immer noch nicht richtig:

test_layout

Die Bereiche "links" und "rechts" sollten immer die Höhe des Bereichs "inhalt" haben (oder als 2. Möglichkeit immer die ganze Bildschirmhöhe ausfüllen). Der Bereich "unten" sollte von den Spalten links und rechts eingeschlossen werden.

Die Seite und der Inhalt sollten sich anpasse und die Scrollbalken sollten erst erscheinen, wenn ein Mindestwert unterschritten wird.

Der Bereich "unten" sollte wie gesagt immer am unteren Rand kleben. Footer stick alt klappt wohl nicht, weil ich einen "Container" habe, der alles umschliesst. Wie kann ich das hier lösen?:

HTML-Code:

<!-- saved from url=(0022)[url]http://internet.e-mail[/url] -->
<!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">
<html>
<head>
<title>test_layout</title>
<style type="text/css">
html {
height:100%;
}

body {
margin:0;
padding:0;
min-height:100%;
text-align:center;
}

*html body {
height:100%;
}

#container {
width: 600px;
text-align:left;
margin:0 auto;
}

#links {
background-color:green;
height:570px;
float:left;
}

#mitte {
background-color:#fff;
}

#mitte_kopf {
background-color:pink;
}

#mitte_navigation {
background-color:yellow;
}

#mitte_inhalt {
padding:0 0 50px 5px 0;

}

#rechts {
background-color:orange;
float:right;
height:570px;
}

#unten {
background-color:black;
bottom:0;            
color:#fff;
height:50px;
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="links">links</div>
<div id="rechts">rechts</div>
<div id="mitte">

<div id="mitte_kopf">kopf</div>
<div id="mitte_navigation">navigation</div>
<div id="mitte_inhalt">inhalt</div>
</div>
<div id="unten">unten</div>
</div>
</body>
</html>

Ich wäre euch wirklich sehr dankbar für eine Hilfestellung.

Besten Dank!

matwic