CSS-Problem mit Hintergundfarbe

Meister Lampe Gast #2350596
Lesenswert?
• ▲
▼ 
Hallo,

ich habe eine HTML-Seite mit grünem Hintergrund. Der Inhalt ist blau, 
hat eine feste Breite, einen kleine Abstand nach oben hin und ist 
zentriert. Das blau vom Inhalt soll jetzt immer bis zum unteren Rand der 
Seite reichen, ganz egal wie viel oder wie wenig Inhalt dort steht. Mein 
Problem ist nun, dass sich das Blau zwar bis zum unteren Bildschirmrand 
des sichtbaren Bereiches nach unten erstreckt, aber leider nicht ganz 
bis zum Ende des Inhalts bzw. dem Ende der Seite. Sobald ich nach unten 
scrolle, ist da dann leider wieder das grün vom body zu sehen, was ich 
dort nicht haben möchte. So sieht mein Beispiel-Code aus:

1
<html style="height:100%; min-height:100%;">

2
<head>

3
</head>

4
<body style="height:100%; min-height:100%; background-color:#00ff00;">

5
</body>

6
<div style="height:100%; margin-top:50px; margin-left: auto; margin-right: auto; width:600px; min-height:100%; background-color:#0000ff;">

7
Test<br><br><br><br><br><br><br><br><br><br>

8
Test<br><br><br><br><br><br><br><br><br><br>

9
Test<br><br><br><br><br><br><br><br><br><br>

10
Test<br><br><br><br><br><br><br><br><br><br>

11
Test<br><br><br><br><br><br><br><br><br><br>

12
Test<br><br><br><br><br><br><br><br><br><br>

13
</div>

14
</html>


Weiß jemand, was ich falsch mache?
Gruß,
Dennis
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
Meister Lampe Gast #2350811
Lesenswert?
• ▲
▼ 
Hallo Läubi,

ich möchte einfach, dass der Inhaltsbereich nach oben, rechts und links 
einen Abstand hat, immer bis nach ganz unten reicht und einen blauen 
Hintergrund bekommt. Solange der Text noch auf den Bildschirm passt, ist 
ja auch alles in Ordnung. Wenn aber mehr Text dargestellt wird als ohne 
Scrollbalken angezeigt werden kann, sehe ich beim runterscrollen 
plötzlich keine blaue Hintergrundfarbe mehr, sondern grüne! Da die grüne 
Farbe ja vom body-Bereich kommt, scheint dieser die Hintergrundfarbe aus 
dem DIV außerhalb des Viewports zu überlagern, jedoch nicht den Text 
selbst.

So sollte es eigentlich aussehen...

G=Grün
B=Blau
Text=Text mit blauem Hintergrund
1
GGGGGGGGGGGGGGGGGGGG

2
GGGGGGGGGGGGGGGGGGGG

3
GGGGGBBBBBBBBBBGGGGG

4
GGGGGBBBBBBBBBBGGGGG

5
GGGGGBBBTextBBBGGGGG

6
GGGGGBBBTextBBBGGGGG

7
GGGGGBBBTextBBBGGGGG

8
GGGGGBBBTextBBBGGGGG

9
GGGGGBBBTextBBBGGGGG

10
GGGGGBBBTextBBBGGGGG


Und so sieht es bei mir aus...

G=Grün
B=Blau
Text=Text mit GRÜNEM Hintergrund
1
GGGGGGGGGGGGGGGGGGGG

2
GGGGGGGGGGGGGGGGGGGG

3
GGGGGBBBBBBBBBBGGGGG

4
GGGGGBBBBBBBBBBGGGGG

5
GGGGGBBBTextBBBGGGGG

6
GGGGGBBBTextBBBGGGGG

7
GGGGGGGGTextGGGGGGGG

8
GGGGGGGGTextGGGGGGGG

9
GGGGGGGGTextGGGGGGGG

10
GGGGGGGGTextGGGGGGGG


Hast Du meinen Beispielcode mal in einer HTML-Datei gespeichert und im 
Browser angezeigt?


Gruß,
Dennis
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Philip Z. #2351868
Lesenswert?
• ▲
▼ 
Kleiner Tipp von mir: Mach das CSS immer in ein externes CSS-File. Ist 
viel übersichtlicher und noch dazu weniger Schreibarbeit.

Dein CSS müsste so aussehen:

1
body {

2
   background-color: #00FF00;

3
}

4


5
div#content{

6
   background-color: #0000FF;

7
   width: 600px;

8
   margin: 50px 0px 0px 0px;

9
}


Das File musst du nur im Header einbinden....

Im HTML Code muss du das DIV so öffnen: <div id="content">...</div>

mfg
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Leonard D. #2351899
Lesenswert?
• ▲
▼ 
Der HTML Tag kann gar keine größe haben, er wird genauso wie der header 
niemals angezeigt.
Der Body kann streng genommen auch keine Größe haben, da er immer die 
komplette Seite füllt (außer du machst was falsch, aber das is dann 
nicht HTML-konform).

Somit musst du dem nur eine Farbe zuordnen.
DIVs und alles musst du grundsätzlich in den BODY machen wie du richtig 
erkannt hast. Und dann müssten eigentlich die Style-Angaben von zudy 
passen.
Die kannst du zum Testen natürlich weiterhin direkt ins HTML schreiben, 
aber ich schätze mal das wird noch wesentlich mehr werden daher empfehle 
ich auch ne extra Datei.

Außerdem kann ich noch sagen, dass ich mal ein Problem hatte als ich
<...>
<div>
  <p>Text</p>
</div>
gemacht hatte, da dann das Default Margin vom <p> den ganzen div 
verschoben hat und ich mich geärgert habe wieso der <div> nicht bei 
y=0px anfängt. Also achte auch mal auf solche Störeffekte wenns nach den 
anderen Tips noch net geht.

Außerdem: http://de.selfhtml.org/ ist die beste Adresse für alle solceh 
Probleme und überhaupt zum HTML lernen.

LG
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Meister Lampe Gast #2352377
Lesenswert?
• ▲
▼ 
Hallo,

vielen Dank für die zahlreichen Tipps...ich merke dadurch, dass ich wohl 
noch etwas mehr Zeit in das Studium von HTML/CSS investieren sollte. 
Fehlende Grundladen scheinen einem hier recht schnell die Suppe zu 
versalzen...
FireBug habe ich auch installiert, eine wirklich feine Erweiterung ist 
das! Besonders gefällt mir, dass man "live" die CSS-Parameter verändern 
kann und so direkt einen Eindruck davon bekommt, welche Auswirkungen 
eine bestimmte Änderung hat.

Gruß,
Dennis
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Thread beobachten

Antwort schreiben

Hinweis: der ursprüngliche Beitrag ist mehr als 6 Monate alt. Bitte hier nur auf die ursprüngliche Frage antworten, für neue Fragen einen neuen Beitrag erstellen.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Dein Name und deine E-Mail-Adresse

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.