CSS Body über die ganze Seite ohne Header

Hallo :smile:

Ich versuche seit mehreren Stunden einen CSS Code für mehrere Seiten zu schreiben wo der body + bis zum Seitenende reichen soll. Leider funktioniert dass nicht. Wär jemanden echt verbunden, der mir dabei weiterhelfen könnte.
Das CSS File sollte circa so aufgebaut sein ohne Header.

Danke schon mal im Voraus

#stylesheet {
margin: 0px;
}
#rapper {
background-color: #272727;
width: 800px;
margin-right: auto;
margin-left: auto;
border-right-width: 4px;
border-left-width: 4px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #969696;
border-left-color: #ABABAB;
}
#rapper #bodyArea {
background-color: #6B91CE;
width: 800px;
}

Du musst das auch angeben

Ich versuche seit mehreren Stunden einen CSS Code für mehrere
Seiten zu schreiben wo der body + bis zum Seitenende reichen
soll.

Also, diese CSS-Vorgaben sollen für ALLES gelten. Dann musst du auch einen entsprechenden Selektor angeben, z.B. den Universalselektor „*“.

* {margin: 0px;}

Aber Vorsicht, dann werden ALLE Default-Werte für Abstände auf 0 gesetzt!

Gruß

Stefan

Moin!

Ich versuche seit mehreren Stunden einen CSS Code für mehrere
Seiten zu schreiben wo der body + bis zum Seitenende reichen
soll.

Was meinst DU mit „body +“?
Der body reicht immer bis zum Seitenende, wenn man nicht was anderes angibt.

Leider funktioniert dass nicht.

Gehts genauer? Der CSS-Code alleine macht ja auch nichts. Es gehört immer ein HTML-Code dazu.

Das CSS File sollte circa so aufgebaut sein ohne Header.

Header?

#rapper {

Ist das ne Seite über Musik oder ist Dir nicht bewusst, dass das, was ich vermute, was Du meinst, ein „wrapper“ ist?

Aufgrund der Keywords, die Du angegeben hast, erlaube mir noch einen Hinweis: Layout macht man nicht mit !

Gerne gibts ne bessere Antwort, wenn die Frage klarer ist.

Schönen Abend noch,
-Efchen

Hallo Efchen,

sry nochmal. Hab geglaubt der Thread is geschlossen, dabei hab ich mich beim Link im Email verlesen und es is gestanden wollen Sie für diesen Thread keine AW mehr bekommen (automatisch Annahme = Thread geschlossen).

Könnten Sie mir trotzdem bei dem Problem helfen? Detail dazu stehen ja jetzt schon im anderen Posting.

Liebe Grüße,
Chris
Ps: Entschuldigung für das Missverständnis

Könnten Sie mir trotzdem bei dem Problem helfen?

Ja, wenn meine Fragen beantwortet werden.

Und noch besser, einen Link zur Seite.

Detail dazu
stehen ja jetzt schon im anderen Posting.

Da hab ich nichts gefunden, was mich weiter bringt. Nur unvollständiger Code und kein Link, oder hab ich was übersehen?

Ps: Entschuldigung für das Missverständnis

Kein Thema, dafür wird man hier nicht geköpft :wink:

Hallo :smile:

Also der ganze genannte css code ist so in die HTML Seite eingebunden:

CSS Portal - Layout Generator

This is the Header

This is the Navigation

This is the main content

Also der ganze genannte css code ist so in die HTML Seite
eingebunden:

Ein Link wäre schöner gewesen…

Kleine Anmerkung zum Thema HTML:

This is the Header

Das ist KEIN Header. Das ist nur eine Gruppe (die nur aus einem Element besteht - wie komisch). Um einen Header daraus zu machen, sollte man auch ein Tag für Header ( bis ) benutzen, natürlich noch logisch sortiert.

This is the Navigation

Auch ist das keine Navigation, sondern eine Gruppe. Nur weil etwas „navigation“ heißt, wird daraus noch keine Navigation. Zugegeben, HTML4 hat kein Tag für Navigation, aber ein Menü ist semantisch sinnvoll als Liste ausgezeichnet.

Ich denk mir das könnte so stimmen.

Naja, halt nur nicht von der Semantik - also dem eigentlichen Sinn von HTML - her.

Allerdings zieht sich
der Rahmen von wrapper sowie der content nicht bis zum
Seitenende

Klar. Die Begründung lieferst Du ja selbst:

(hängt von Inhalt ab)

Einen Link kann ich leider nicht hergeben da es noch nicht
online ist.

Ich liiieeeebe diese Begründung…ist natürlich keine Begründung. Die Antwort darauf lautet eigentlich immer „dann stell es online“ :smile:

Gibt´s da vielleicht eine Lsg?
Wer echt super. :smile:

html, body { height:100%; }
Damit nimmt der Body den gesamten Viewport ein, die Größe von Kindelementen bezieht sich immer auf die Größe von Elternelementen. Wenn die also height:100% bekommen, dann sind sie auch so groß, wie die Elternelemente (body,html) und damit so groß wie der Viewport.

Aber der Sinn erschließt sich mir aus dem Code heraus noch nicht. Es sei denn, Du machst das wegen eines Hintergrundbildes oder Hintergrundfarben. Dann brauchst Du aber - wie schon geschrieben! - Faux Columns!

Hallo efchen,

body { height:100%; }

könntest Du mir einen Browser nennen, wo das einen Sinn macht!!
Versuche mal body auf 50% zu setzten :smile:)

Der Hinweis auf 100% für die Höhe war schon die Richtung … und für den Haupt-Container wird wohl das den gewünschten Erfolg bringen.

h♥rzlichen Gruß
Nitya

body { height:100%; }

könntest Du mir einen Browser nennen, wo das einen Sinn
macht!!

Nur einen? Firefox.

Versuche mal body auf 50% zu setzten :smile:)

Wozu? Es ging doch darum, dass sich der Inhalt über den gesamten Viewport erstrecken soll und nicht um den halben.

Der Hinweis auf 100% für die Höhe war schon die Richtung …
und für den Haupt-Container wird wohl das den gewünschten
Erfolg bringen.

Jede Größe bezieht sich aber immer auf die Größe des Elternelements. Wenn Du die (body, html) aber nicht auch auf 100% setzt, wird das keinen Effekt haben. Die Größe von body/html bezieht sich nämlich als einzige auf den Viewport. Wenn Du irgendein Tag auf height:100% setzt, wird es *nicht* die gesamte Viewport-Höhe einnehmen, wenn das bei body/html nicht gesetzt ist.

Kannst es ja ausprobieren.

Hey wow,

es funktioniert, du bist grenzgenial. Echt voll cool.

Hätte nicht geglaubt dass ich des noch erlebe. :smile:

Du bist echt voll super.

Hmm is meine erste Webseite was ich mach aber sobald ich fertig bin schick ich dir den link.

Danke nochmal.

Wünsch dir noch einen schönen Abend,
Chris

Wenn Du irgendein Tag auf height:100% setzt, wird es *nicht*
die gesamte Viewport-Höhe einnehmen, wenn das bei body/html
nicht gesetzt ist.

genau … und ich habe kein height:100% im geposteten style für den container gesehen … Du?
Darum reicht das mit dem height im body alleine nicht … aber die Richtung stimmte.

html, body { height:100%; }
Damit nimmt der Body den gesamten Viewport ein

was aber auf jeden Fall auch ohne diese Style-Angabe sowieso der Fall ist!!

Das ist nur dafür da, dass Eltern-body einen Wert ans div-Kind abgeben kann!

genau … und ich habe kein height:100% im geposteten style für
den container gesehen … Du?

Nein, deswegen hab ich das ja geschrieben, dass er das so machen soll!

html, body { height:100%; }
Damit nimmt der Body den gesamten Viewport ein

was aber auf jeden Fall auch ohne diese Style-Angabe sowieso
der Fall ist!!

Sicher nicht. Das kannst Du ja einfach ausprobieren mit den geeigneten Entwickler-Tools, z.B. Firebug.
html/body sind nur so groß, wie sie Inhalt haben, so wie eben alle Block-Elemente.

Das ist nur dafür da, dass Eltern-body einen Wert ans div-Kind
abgeben kann!

Ja, und darum gehts doch hier, oder nicht? Dass die Seite bis zum unteren Rand des Viewports geht, auch wenn nicht genug Inhalt da ist.

Hallo!

es funktioniert, du bist grenzgenial.

Das erzähl mal Nitya, die weiter unten im Thread mir immer noch zu verklickern versucht, dass meine Antwort falsch ist :smile:

Liebe Grüße,
-Efchen