Frage stellen
ich bin CSS-Anfänger, jedoch lernfähig.
Mithilfe von CSS möchte ich das Layout einer Website gestalten und zwar mit Header, Content-Bereich, Footer und links und rechts Bereiche, die optisch "mitlaufen" sollen (siehe angehängte Skizze).
Dabei soll der Footer immer dem Content folgen, und zwar auch, wenn der Content viel weniger als die Bildschirmhöhe einnimmt (also nicht wie oft gewünscht am unteren Rand des Browserfensters kleben).
Ich weiß, dass ist bestimmt ein sehr häufig behandeltes Anliegen, das ich hier vorbringe, ich kann nur sagen, dass ich wirklich sehr vieles versucht habe und jetzt bin ich langsam so verwirrt, dass ich einfach nicht mehr weiterkomme.
Der Content soll also oben und unten, links und rechts eingerahmt werden, wobei der Rahmen nach unten hin flexibel sein soll (je nach Content). Außerdem soll der ganze Rahmen zentriert sein.
Hier mein bisheriger CSS-Ansatz:
- Code: Alles auswählen
body
{
padding: 0;
margin: 0;
}
#frame_oben
{
position: absolute;
left: 50%;
margin-left: -440px;
top: 0px;
height: 278px;
width: 880px;
background-color: #FFFFB9;
background-image: url(../abc.gif);
}
#container
{
position: relative;
}
#frame_links
{
/*position: absolute;*/
/*top: 278px;*/
left: 50%;
margin-left: -440px;
/*bottom: 156px;*/
width: 200px;
background-image: url(../abc.gif);
}
#content
{
position: absolute;
top: 278px;
left: 50%;
margin-left: -240px;
width: 480px;
background-color: #FFCBFF;
}
#frame_rechts
{
position: absolute;
/*top: 278px;*/
right: 50%;
margin-right: -440px;
/*bottom: 156px;*/
width: 200px;
background-image: url(../abc.gif);
}
#frame_unten
{
position: absolute;
bottom: 0;
left: 50%;
margin-left: -440px;
width: 880px;
height: 156px;
background-image: url(../abc.gif);
background-color: #00FFFF;
}
und HTML:
- Code: Alles auswählen
<div id="frame_oben"></div>
<div id="frame_links"></div>
<div id="container">
<div id="content">
-- CONTENT --
</div>
<div id="frame_unten"></div>
</div>
<div id="frame_rechts"></div>
Ich bin für jede Hilfe sehr dankbar.
Gruß,
treelo
