CSS-Problem mit Hintergundfarbe

Meister Lampe Gast 18.09.2011 15:31 #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:

<html style="height:100%; min-height:100%;">
<body style="height:100%; min-height:100%; background-color:#00ff00;">
<div style="height:100%; margin-top:50px; margin-left: auto; margin-right: auto; width:600px; min-height:100%; background-color:#0000ff;">
Test<br><br><br><br><br><br><br><br><br><br>
Test<br><br><br><br><br><br><br><br><br><br>
Test<br><br><br><br><br><br><br><br><br><br>
Test<br><br><br><br><br><br><br><br><br><br>
Test<br><br><br><br><br><br><br><br><br><br>
Test<br><br><br><br><br><br><br><br><br><br>


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 18.09.2011 15:34 #2350599

Lesenswert?

•

▲
▼

Sorry, das Div sollte eigentlich innerhalb von Body stehen, aber das 
ändert leider auch nichts...

Antwort Zitieren Bearbeiten Löschen Beitrag melden

Läubi .. (laeubi) 18.09.2011 16:28 #2350662

Lesenswert?

•

▲
▼

Irgendwie blicke ich nicht ganz durch was du erreichen möchtest. Du 
solltest aber beachten das für bestimmte Elmente eventuell ein 
(browserabhängiger) defaultwert für Paddings und Margins vorgegeben ist 
am besten einfach mal mit Firebug oder Entwicklungskonsole draufschauen 
welche CSS Styles berechnet wurden.

Antwort Zitieren Bearbeiten Löschen Beitrag melden

Meister Lampe Gast 18.09.2011 18:17 #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

GGGGGGGGGGGGGGGGGGGG
GGGGGGGGGGGGGGGGGGGG
GGGGGBBBBBBBBBBGGGGG
GGGGGBBBBBBBBBBGGGGG
GGGGGBBBTextBBBGGGGG
GGGGGBBBTextBBBGGGGG
GGGGGBBBTextBBBGGGGG
GGGGGBBBTextBBBGGGGG
GGGGGBBBTextBBBGGGGG
GGGGGBBBTextBBBGGGGG


Und so sieht es bei mir aus...

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

GGGGGGGGGGGGGGGGGGGG
GGGGGGGGGGGGGGGGGGGG
GGGGGBBBBBBBBBBGGGGG
GGGGGBBBBBBBBBBGGGGG
GGGGGBBBTextBBBGGGGG
GGGGGBBBTextBBBGGGGG
GGGGGGGGTextGGGGGGGG
GGGGGGGGTextGGGGGGGG
GGGGGGGGTextGGGGGGGG
GGGGGGGGTextGGGGGGGG


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


Gruß,
Dennis

Antwort Zitieren Bearbeiten Löschen Beitrag melden

Meister Lampe Gast 18.09.2011 18:19 #2350815

Lesenswert?

•

▲
▼

Sorry, ist wirklich schwer zu beschreiben:

BBBTextBBB = Text mit blauem Hintergrund
GGGTextGGG = Text mit grünem Hintergrund

Gruß,
Dennis

Antwort Zitieren Bearbeiten Löschen Beitrag melden

Chris R. (hownottobeseen) 18.09.2011 18:27 #2350828

Lesenswert?

•

▲
▼

Hi,

das style="" im html-Tag dürfte imo recht wenig bringen, das height: 
100% ist relativ zum Anzeigebereich - wenn du es rausnimmst, passt die 
Anzeige.

Kennst du Firebug? Wenn nein, hol ihn dir (Add-On für Firefox) ;)

Antwort Zitieren Bearbeiten Löschen Beitrag melden

Philip Z. (zudy) 19.09.2011 16:57 #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:

   background-color: #00FF00;
div#content{
   background-color: #0000FF;
   width: 600px;
   margin: 50px 0px 0px 0px;


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. (gaffaman) 19.09.2011 17:32 #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 20.09.2011 00:35 #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

Läubi .. (laeubi) 20.09.2011 13:10 #2352873

Lesenswert?

•

▲
▼

Als alerserste Schritt solltest du deine HTML Seite so aufbauen das sie 
durch den validator geht, das behebt schonmal viele Probleme...
http://validator.w3.org/

Antwort Zitieren Bearbeiten Löschen Beitrag melden

CSS-Problem mit Hintergundfarbe

Antwort schreiben