CSS-Layout

Avalon · 12.06.2010

Ich habe versucht ein CSS-Layout ohne Vorlage zu erstellen, weil ich leider bisher keine passende gefunden habe. Bedauerlicherweise bisher nur mit sehr mäßigen Erfolg:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Test</title>

<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
}

#header{
width: 100%;
height: 100px;
background: #EAEAEA;
text-align: center;
}

#contentwrapper{
width: 100%;
background: #D2691E;
}

#conten{
width: 800px;
height: 100%;
background: #FFFFFF;
text-align: justify;
}

#footer{
width: 100%;
height: 50px;
background: #EAEAEA;
text-align: center;
}

</style>

</head>

<body>

<div id="maincontainer">

<div id="header">Header</div>

<div id="contentwrapper">
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
</div>
</div>

<div id="footer">Footer</div>

</div>

</body>

</html>

Oben soll der "Header" sein über die komplette Breite und mit einer festen Höhe, ganz unten der "Footer" mit gleichen Eigenschaften. Dazwischen soll sich zentriert der "Contet" befinden mit einer fester Breite. Wichtig wäre es: Das "Header" und "Footer" immer an dergleichen Positionen bleiben, egal wie das Browser-Fenster verändert wird und wie viel Inhalt sich im "content" befindet. Irgendwie kriege ich das leider nicht mit der Positionierung hin und ich versuche das jetzt schon seit Stunden. Ich wäre sehr dankbar über konkrete Vorschläge, die mich irgendwie weiter bringen.

Chriko · 12.06.2010

AW: CSS-Layout

Meinst du so?

Code:

<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<title>CSS-Layout</title>
<style type="text/css">

div#header {
	background-color: lightgreen;
	width: 100%;
	height: 150px;
	text-align: center;
	}
div#content  {
	background-color: yellow;
	width: 400px;
	height: 300px;
	margin: 0 auto;
	text-align: center;
	}
div#footer  {
	background-color: lightblue;
	width: 100%;
	height: 80px;
	text-align: center;
	}
</style>
</head>

<body>
	<div id="header"> HEADER </div>
	<div id="content"> CONTENT </div>
	<div id="footer"> FOOTER </div>
</body>
</html>

Momo22m · 12.06.2010

AW: CSS-Layout

guck dir den seine tuts mal an

da zeigt er dir wie man eine seite so codet wie du es brauchst

mfg Momo

Avalon · 12.06.2010

AW: CSS-Layout

Danke Chriko, der mittlere Bereich "content" ist jetzt zentriert. Das Ganze sieht nunmehr so aus bei mir:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">

body {
margin: 0;
padding: 0;
border: 0;
}

#header {
background-color: lightblue;
width: 100%;
height: 100px;
text-align: center;
}

#contentwrapper{
width: 100%;
height: 100%;
}

#content {
background-color: yellow;
width: 800px;
height: 100%;
margin: 0 auto;
text-align: justify;
}

#footer {
background-color: lightblue;
width: 100%;
height: 50px;
text-align: center;
position:absolute; bottom:0px;
}

</style>

</head>
<body>

<div id="header">HEADER</div>

<div id="contentwrapper">
<div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</div>
</div>

<div id="footer">FOOTER</div>

</body>
</html>

Müsste jetzt irgendwie noch klappen das der "Footer" unten bleibt und der "content" bündig mit diesen abschließt. Mit "position:absolute; bottom:0px;" bleibt der "Footer" zwar unten, aber der "content" läuft darunter her leider.

Chriko · 12.06.2010

AW: CSS-Layout

1. Warum um den Content noch nen Contentwrapper?
2. Google mal nach "faux columns"

edit: "height: 100%" bringt dir nur etwas wenn du folgendes machst:
html, body {height: 100%}

schau dir das mal an
http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

Avalon · 12.06.2010

AW: CSS-Layout

@ Chriko

Der "Footer" bleibt leider nicht fest am unter Browser-Fensterrand in deinem Beispiel. Ist "faux-column" nicht dazu da um gleich lange Spalten zu erzeugen, ich glaub das hilft mir weniger bei meinen Problem?

Chriko · 12.06.2010

AW: CSS-Layout

mit faux columns hast du recht.
der footer soll also grundsätzlich am unteren bildschirmrand zu sehen sein und dann lediglich der content bereich gescrollt werden? Wobei er das doch in dem Beispiel macht?!

Avalon · 12.06.2010

AW: CSS-Layout

Chriko schrieb:
der footer soll also grundsätzlich am unteren bildschirmrand zu sehen sein und dann lediglich der content bereich gescrollt werden?

Exakt, genauso habe ich mir das gedacht...

Chriko · 12.06.2010

AW: CSS-Layout

dann müsste es doch das sein? oder nicht? ich weiß nicht ob du den link 2beiträge weiter oben gesehen hast, da ich 2-3 mal editiert habe.

AlexanderBo · 12.06.2010

AW: CSS-Layout

@Avalon
verfolge deinen neuen thread die ganze zeit mit spannung ;-)
die tipps+ hinweise in deinem anderen thread hast du weder ansatzweise angenommen noch versucht die gegebenen links zu lesen.
das einzige was du richtig erkannt hast ist das es weniger sinn macht an einer kopierten source herumzudoktorn und es besser wäre es selbst zu schreiben.
und (sorry2say) hier wird das au nich bessa.
die zeit die du allein heute damit hier verbracht hast wäre für lediglich header_content_footer besser investiert gewesen.
uuund zu guter letzt: braucht die seite nicht auch einxlich eine navi¿
denn das wäre wohl dein nächstes prob.

//edit: habe hier fertsch...

Avalon · 13.06.2010

AW: CSS-Layout

@ AlexanderBo
Freud mich, dass meine Beiträge derlei interessant für Sie sind. Es ist natürlich wunderbar so man Zeit und Muße hat, CSS theoretisch von Grund auf lernen zu können. Es ist sicherlich kein Unwillen von mir dieses nicht zu tun. Mir fehlt leider einfach nur die Zeit und Muße dafür, daher sind stetige diesbezügliche Hinweise für mich wenig brauchbar. Derzeit benötige ich einfach nur praktische Hilfe bei diesem Layout, damit ich mein Projekt beenden kann. Ich muss das notgedrungen in der Praxis lernen, bei der direkten Umsetzung. Ihr einziger lapidarer Hinweis "margin: 0 auto;" ohne irgendwelche weiteren Informationen, hat mir zumindest spontan nichts gebracht. Die Navigation habe ich übrigens fertig, dass enttäuscht Sie hoffentlich nicht. Achja, sehr vielen Dank das Sie hier "fertsch" sind...

@ Momo22m
Das Video habe ich mir angeschaut, ist zwar allgemein sehr interessant, aber das dort präsentierte Layout hat leider nur wenig übereinstimmungen mit meinen angedachten. Zumindest kommt es mir so vor...

@ Chriko
Die beiden erwähnten Beispiel-Seiten sind sehr interessant. Ich habe versucht die dort vorgestellte Art der Positionierung zu übernehmen, führt leider nur nicht zu meinen angestrebten Ergebnis. Aber danke für die Hilfe bisher...

Das Problem ist, dass der "content" nicht an der Oberkante des "Footers" endet und das der Footer" nicht ungeachtet das "content" stetig am unteren Ende des Browser-Fensters bleibt. Entweder der "Conten" schiebt den "Footer" weg oder läuft darunter her. Bisher habe ich auch noch keine Seite gefunden, die ein solches Layout hat.

Chriko · 13.06.2010

AW: CSS-Layout

Bei beiden Beispielen bleibt der Footer ja fest am Boden - außer der Text ist länger als der Contentbereich. In diesem Fall wird man wohl nicht um "overflow" des Contentbereichs herumkommen.
d.h. dem Content-div overflow:scroll zuweisen.

Avalon · 13.06.2010

AW: CSS-Layout

Chriko schrieb:
Bei beiden Beispielen bleibt der Footer ja fest am Boden - außer der Text ist länger als der Contentbereich. In diesem Fall wird man wohl nicht um "overflow" des Contentbereichs herumkommen.
d.h. dem Content-div overflow:scroll zuweisen.

Ist ja das grundsätzliche Problem, das der Inhalt größer ist als der Content-Bereich. Hatte schon mal ausprobiert dem Content-Bereich "overflow: scroll" zuzuweisen, aber das funktioniert scheinbar nur so die Höhe des Bereichs fixiert wird und das soll er ja nicht werden.

Nem84 · 13.06.2010

AW: CSS-Layout

@ Avalon

Hast du es schon mal mit "float: clear" versucht?
Ich hab die erfahrung gemacht, dass wenn ich den Container positioniere (left, center, right) ich beim Footer dann erst mal diesen "vorgang" wieder weg machen muss, weil er sich sonst auch an der Positionierung orienttiert...
Und ich sehe grad, du hast zwar einen Contant aber keinen Container...
Naja muss vielleicht nicht sein aber ich hab das so gelernt. Vielleicht hilfts ja weiter?

HTML:

<body>
<div id="container">
  <div id="header"></div>
  <div id="nav"></div>
  <div id="content">
  <div id="spalte_links"></div>
  <div id="spalte_rechts"></div>
<div id="footer"></div>
</div>
</body>

Der Container ist adnn immer so groß wie deine Site groß sein soll und umschließt alle Elemente. =)
Ich hoffe mal, das hilft etwas weiter. ^^

cebito · 13.06.2010

AW: CSS-Layout

Wenn ich das richtig verstehe, willst du einen feststehenden Header und Footer haben und einen Contentbereich der dazwischen variabel ist. Das ist ganz einfach:

HTML:

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

Code:

#header{
position:fixed;
width:100%;
height:200px;
top:0;
}
#content{
margin:0 auto;
padding:200px 0 150px 0;
width:800px;
}
#footer{
position:fixed;
width:100%;
height:150px;
bottom:0;
}

Chriko · 13.06.2010

AW: CSS-Layout

Pelzner · 15.06.2010

AW: CSS-Layout

Hallo Avalon,
ich habe etwas nach Deiner Vorstellung gebastelt. Das ist ein Header oben,
Footer ist unten, in der Mitte ist ein Bereich mit Text, der scrollt, wenn der
Text diesen Bereich überschreitet.
Die Ganze Geschichte hat 820pixel Breite und ist im Browser-Fenster zentriert.
Header und Footer haben je 100px Höhe.
Das alles in XHTML-Transitional und CSS, ohne JavaScript und anderem
Schnickschnack.
Jetzt weiss ich nicht, wie könnte ich Dir dieses Zeug übergeben.
Die Breite kannst Du selbst verändern.