CSS: Header, Content, Footer - Frage

[xero]

Hi!

Ich möchte mein Design diesmal mit CSS realisieren. Ich hab mich auch schon ein wenig über das layouten mit CSS informiert. Trotzdem komm ich an einer relativ einfachen Stelle nicht weiter:



Wie auf den Bild zu erkennen, verwende ich drei Grafiken. Der graue Bereich stellt den Header dar. Die Grafik hat eine Breite von 888px und eine Höhe von 28px und sie soll zentriert oben ausgerichtet werden. Der schwarze Bereich ist für den Content gedacht. Die Grafik hat eine Breite von 888px und eine Höhe von 1px und soll zentriert ausgerichtet werden und sich entlang der y-Achse wiederholen und dabei 100% der sichtbaren Höhe einnehmen. Der rote Bereich stellt letztendlich den Footer dar. Die Grafik hat eine Breite von 888px und eine Höhe von 20px und soll zentriert unten ausgerichtet werden.

Nun zur eigentlichen Frage: Wie kann ich das realisieren?

Ich hab schon einige Versuche gemacht, kam aber nie zum gewünschten Ergebnis (Verschiebungen etc...).

Wäre schön, wenn mir jemand helfen könnte.

[Manuel]

Hi xero!

Wieso nimmst du denn so viele Grafiken für dein Design? Ich weiss, dass das dort nur Platzhalter sind, aber zu viel Grafik ist auch nicht gut...

Also zum einen: 100% Höhe gibt es nach den neusten W3C-Standards nicht mehr. Die Höhe passt sich aber automatisch an deinen Content an.

Wie genau das gemacht wird steht eigentlich alles in meinem Tutorial. Hast du dir dieses mal durchgelesen? Wo genau liegt das Problem und was hast du bisher versucht?

Lg,
Manuel

[xero]

Oh, die Tutorials hier hab ich schon ewig nicht mehr eingesehen, liegt wohl daran, dass ich meinen Bookmark direkt hier auf das Forum gelegt habe.

Bisher hab ich das so:

HTML (nur div-layer):

Code: Alles auswählen

<div id="page">
  <div id="header">Header
  </div>
  <div id="content">Content
  </div>
  <div id="footer">Footer
  </div>
</div>

CSS (nur Ausrichtungen):

Code: Alles auswählen

body {
  background: #484848 url("../images/layout/main/main_middle.png") repeat-y top center;
}
#page {
  position: relative;
  margin: 0px auto;
  background-position: top;
  width: 888px;
}

#header {
  position: relative;
  margin: 0px;
  width: 888px;
  height: 28px;
  background: url("../images/layout/main/main_top.png") no-repeat top center;
}

#content {
  position: relative;
  margin: 0px;
  padding: 0px;
}

#footer {
  position: relative;
  margin: 0px;
  width: 888px;
  height: 20px;
  background: url("../images/layout/main/main_bottom.png") no-repeat bottom center;
}

EDIT

Dank deines Tutorials habe ich es schon so ausgerichtet bekommen, dass alle Elemente richtig in der Mitte zentriert sind. Nun soll noch der Footer unten ausgerichtet dargestellt werden. Das Attribut "bottom" bei der Grafik-URL hat jedoch anscheinend nichts bewirkt.
Dann werd ich mir mal dein Tutorial zu Gemüte führen

[Rene]

Tja Css ist glaube ich noch nicht so ganz ausgereift.
nunja aber Manu was sind an 3 Grafiken so viel? *g*
Ich kenne Designs da sind es weit aus mehr

[Manuel]

Ich meinte nicht viel von der Anzahl, sondern vom Ausmaß der Grafiken.

Okay, ich weiss nicht ob ich dich jetzt richtig verstehe. Du willst, dass der Footer immer unten im Browser ist, stimmts? Ich denke da werde ich dich enttäuschen müssen, denn das ist meines Erachtens nicht so einfach machbar. Bestimmt indem man Maße berechnet und danach dann ausrichtet, aber ich denke das ist nicht Sinn und Zweck der Sache. Aber was stört dich daran, wenn der Fußbereich wie auch hier auf der Seite immer unten anhängt?

Lg,
Manuel

[xero]

Hm, schade eigentlich, aber damit werd ich mich dann wohl einfach mal abfinden müssen ... Hoffe mal, dass die Weiterentwicklung von CSS in diesem Punkt noch Fortschritte in nacher Zukunft macht, aber trotzdem danke für die Antworten