Forum: PC-Programmierung CSS-Problem mit Hintergundfarbe


CSS-Problem mit Hintergundfarbe
von Meister Lampe (Gast)

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

Beitrag melden Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Markierten Text zitieren Antwort Antwort mit Zitat
Re: CSS-Problem mit Hintergundfarbe
von Meister Lampe (Gast)

Lesenswert?
• ▲
▼ 
Sorry, das Div sollte eigentlich innerhalb von Body stehen, aber das 
ändert leider auch nichts...

Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
Re: CSS-Problem mit Hintergundfarbe
von Läubi .. (laeubi) Benutzerseite

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.

Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
Re: CSS-Problem mit Hintergundfarbe
von Meister Lampe (Gast)

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

Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
Re: CSS-Problem mit Hintergundfarbe
von Meister Lampe (Gast)

Lesenswert?
• ▲
▼ 
Sorry, ist wirklich schwer zu beschreiben:

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

Gruß,
Dennis

Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
Re: CSS-Problem mit Hintergundfarbe
von Chris R. (hownottobeseen)

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) ;)

Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
Re: CSS-Problem mit Hintergundfarbe
von Philip Z. (zudy)

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

  


  




  

    Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
  







      

      



  

    Re: CSS-Problem mit Hintergundfarbe
  


  

    

      von
      
        Leonard D.
        (gaffaman)
        
      
      


      
    


    

      
    

    

    

  
  


  

  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

  


  




  

    Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
  







      

      



  

    Re: CSS-Problem mit Hintergundfarbe
  


  

    

      von
      
        Meister Lampe (Gast)
      
      


      
    


    

      
    

    

    

  
  


  

  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

  


  




  

    Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
  







      

      



  

    Re: CSS-Problem mit Hintergundfarbe
  


  

    

      von
      
        Läubi ..
        (laeubi)
        
      
      Benutzerseite


      
    


    

      
    

    

    

  
  


  

  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/

  


  




  

    Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
  








    

    

       Thread beobachten

      |
         Seitenaufteilung abschalten

    

        


Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.



  Bestehender Account

  


  
  

  
    

      

        
          
        
        
          
        
      

      

        
          
        
        
          
        
      

    


    
    
    





  Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!

  Mit Google-Account einloggen
  





  Noch kein Account? Hier anmelden.