Supportnet / Forum / Webseiten/HTML

Hallo... Bin gerade dabei meine Website komplett mit Divs und CSS zu gestalten wobei sich mir einige Probleme auftun. Wie in der Überschrift schon angegeben besteht die Seite aus 4 DIVS: Header, Navigation, Content und Footer wobei DIV Nr. 1, 2, 4 feste Höhen und Plätze haben sollen. Die Grösse des Header-DIVS beträgt ungefähr 250px, die Nav.-DIV ungefähr 50px und der Footer ungefähr 30-40px und alle inklusive dem Höhenlosen Content sind 800px breit. Nun möchte ich das der Header ganz oben am Rand "klebt" und die Navigation am Header-Rand. Darunter "klebt" dann der Content und an diesem wiederum der Footer. Der Content-DIV soll sich aber je nach Inhalt in der Höhe verändern und unter ihm der Footer "kleben". Ist das machbar (möglicherweise verschachtelt?) und wenn ja wie? Mfg, Georg Ps.: Etwas unötiger Bild-Link auf dem mein Layout-Wunsch zu sehen ist: [url]http://img75.imageshack.us/img75/7228/testfx4.jpg[/url]

Hmmm, auf die Schnelle:

<style type="text/css">
#header {
	width: 800px;
	height: 250px;
	border: 1px solid #000;
}
#navi {
	width: 800px;
	height: 50px;
	border: 1px solid #F00;
}
#content {
	width: 800px;
	border: 1px solid #0F0;
}
#footer {
	width: 800px;
	height: 40px;
	border: 1px solid #00F;
}
</style>

Das in den Head-Bereich deiner HTML-Datei und das folgende dann in den Body:

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

Über die Angaben im Head-Bereich bekommen die Divs ihre Breite, Höhe (außer "content") und einen Rahmen (zur besseren Veranschaulichung). Wenn du im Body die Reihenfolge einhältst werden die auch so untereinander dargestellt, wie du das möchtest. Und das Div "content" passt sich in der Größe an den Inhalt an. War das so gemeint?
Sollte das aber so gemeint sein, dass
- "header" ganz oben steht
- darunter "navi"
- darunter "content" und dann
- "footer" immer ganz unten im sichtbaren Bereich (sprich immer am untersten Rand des Browserfensters), dann wird die Sache etwas tricky.

Danke erstmal für die Hilfe...

Hab´ meine Wunsch vielleicht etwas falsch formuliert.
Ich möchte tatsächlich dass der Footer immer ganz unten ist, aber nicht fest sondern als "Anhängsel" des verlängerten Content-DIV...

Gruss,
Georg

Btw: Es soll ungefähr so aussehen wie diese Seite hier: http://www.acceptancerock.com/

Gruss,
Georg

wo ist der Unterschied zu MoRe99s Vorschlag?

Das was noch fehlt ist die Ausrichtung deines 800px-Gucklochs auf dem gesamten Fenster sowie Angaben zu overflow.

Na, das, was du da als Beispiel gegeben hast, ist mit dem, was ich oben erstellt habe, problemlos möglich (meine ich zumindest). Der Footer bleibt immer direkt unter dem Content "kleben". Pack einfach mal mehr Inhalt in das Div "content" rein, um zu sehen, was passiert. Die Höhe ist nicht fix vorgegeben und wird sich damit dem Inhalt eigentlich problemlos anpassen. Und da im Quellcode "footer" direkt nach "content" kommt beginnt der Footer immer unmittelbar unterhalb von "content".

Oder verstehen wir uns gerade ziemlich miss?

Ich Dübel!
Natürlich war das das was ich wollte...
Nochmals vielen, vielen Dank!

Gruss,
Georg

Nur eins noch...
Warum habe ich wenn ich den Rahmen weglasse diese Lücken zwischen den DIVS?

Gruss,
Georg

lies dazu am besten diesen Beitrag über das Boxmodell, da wird auch erklärt, welche CSS-Eigenschaften was bewirken und die musst du dann deinen Wünschen anpassen.

Hab´s mir durchgelesen aber ich kann keinen Hinweis darauf finden warum ich zwischen den einzelnen DIVS solch "widerliche" Lücken bekomme wenn ich den Rahmen weglasse... Im IE komischerweise alles kein Problem aber der Feuerfuchs macht Probleme...
Habe margin auf 0px gesetzt aber es bringt nichts...

Gruss,
Georg

Hab´s mittlerweile ganz anders gelöst.
Nämlich nach der Methode von Manuel Bieh... http://www.manuelbieh.de/www/blog/einmal-erdgeschoss-bitte
Trotzdem Danke vielmals an Alle!

Gruss,
Georg

nun ja, der IE hat ja auch diesen im Text erwähnten Fehler, du hättest padding, margin und border beachten müssen.

Wie diese sehr komplizierte und trickige (und entsprechend störanfällige - spätestens bei der nächsten Browsergeneration) Lösung aus Antwort 10 beim Boxmodellbug des IE hilft ist mir aber ein Rätsel.

• schrift unter include positionieren
• Bildergalerie in Content-Bereich einfügen
• Tabellenhöhe angleichen
• Class und str_replace problem