Hintergrund wird nicht angezeigt

maxx · #1 (**permalink**) 14.10.2012, 09:15

Hallo, ich habe 2 Divs in ein anderes gepackt um dieses anschließend zu zentrieren. In das "hintergrund-Div" habe ich einen Hintergrund gepackt. Aber der wird mir nicht angezeigt. Warum das nicht?
Wo liegt mein Fehler?

Danke für eure Hilfe!

HTML-Code:

    <div class="page">
      <div class="content">
        <p align="right">Platzhalter für Text</p>
      </div>
      <div class="sidebar">
        <p class="headline">Überschrift</p>
        <p align="right">Platzhalter für Text</p>
      </div>
    </div>

Code:

.page {       width: 900px;
                 margin-left: auto;
                 margin-right: auto;
                 background:url(bilder/back-content.png) repeat-y left top;
}
.content {   position: relative;
                 float: left;
                 left: 0px;
                 width: 590px;
}

.sidebar {    position: relative;
                 float: right;
                 right: 0px;
                 width: 300px;
}

MrMurphy · #2 (**permalink**) 14.10.2012, 10:49

Hallo,

solche Quellcodeschnipsel sind eher nervig. Wenn man bezogen auf die antwortet erhält man leider immer wieder als Antwort, das der restliche (nicht gezeigte) Quellcode den Lösungsansatz verhindere. Besser ist deshalb immer ein Link zur kompletten Seite.

Ich habe mal eine komplette Seite mit ein paar zusätzlichen Einträgen und Änderungen erstellt, die die Auswirkungen verdeutlichen, also knallige eindeutige Hintergrundfarben zu allen Elementen hinzugefügt und den Text so gestaltet, das eindeutiger ist, zu welchem übergeordneten Element er gehört.

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hintergrundbild Problem</title>
<style type="text/css">
   .page {
      width: 900px;
      margin-left: auto;
      margin-right: auto;
      background:url(bilder/back-content.png) repeat-y left top;
      background-color: red;
   }
   .content {
      position: relative;
      float: left;
      left: 0px;
      width: 590px;
      background-color: green;
   }
   .sidebar {
      position: relative;
      float: right;
      right: 0px;
      width: 300px;
      background-color: yellow;
   }
   p.headline {
      background-color: gold;
   }
   p {
      background-color: aqua;
   }
</style>
</head>
<body>
   <div class="page">
      <div class="content">
         <p align="right">Text content</p>
      </div>
      <div class="sidebar">
         <p class="headline">Text sidebar headline</p>
         <p align="right">Text sidebar</p>
      </div>
   </div>
</body>
</html>

Auf die Art kann das Problem sinnvoll eingekreist werden. So ist zu sehen, das beim div "page" nicht nur das Hintergrundbild nicht angezeigt wird, sondern es (rote Hintergrundfarbe) komplett nicht angezeigt wird.

Das Problem liegt also nicht beim Hintergrundbild.

Jetzt kannst du mal wahlweise entweder

-> dem div "page" eine Höhe (height) mit auf den Weg geben, z. B. 300px

oder (nicht gleichzeitig, sondern nacheinander)

-> bei dem div "sidebar" das "float: right" entfernen

und danach beide Änderungen gleichzeitig ausprobieren

und schauen, ob und wie das div "page" (rote Hintergrundfarbe) dann angezeigt wird.

Gruss

MrMurphy

maxx · #3 (**permalink**) 14.10.2012, 11:03

Danke für die Hilfe, aber leider ist das Problem noch nicht behoben. Ich habe den Quelltext von dir genommen und in einer extra HTML abgespeichert um es zu testen - und da funktioniert es auch schon nicht. (FireFox und InternetExplorer)

ich habe im Internet gelesen, dass es wohl daran liegt, dass das "page" div "leer" ist.
Setze ich Manuell eine Höhe, wird der Hintergrund angezeigt, aber die Divs "content" und "sidebar" schieben sich dann in dem div "page" (um die eingestellte Höhe) nach unten.

Hier nochmal der gesamte Quelltext:

HTML-Code:

<!DOCTYPE html>

<html>
 <head>
  <link rel="stylesheet" type="text/css" href="main.css">
 </head>
 <body>



<!-- HEADER -->
  <div class="header-wrapper">
   <div class="page-head">
    <div class="logo"> <a href="#"><img src="bilder/logo.png" alt="" border="0"></a></div>
    <div class="title"> <img src="bilder/title.png" alt="" border="0"></div>
    <div class="social"><div class="content-unten-rechts">

    <a href=""><img src="bilder/icons/facebook.png"    alt="" border="0" width="25"></a>
    <a href=""><img src="bilder/icons/youtube.png"     alt="" border="0" width="25"></a>
    </div></div>
   </div>
  </div>
<!-- //HEADER ENDE -->


<div class="br">&nbsp;</div>



<!-- NAVI BAR -->
   <div class="body-wrapper">
    <div class="page-navi">
      <div class="navi">

       <ul>
        <li>Home</li>
        <li>Link</li>
        <li>Noch ein Link</li>
        <li>Link</li>
        <li>LINK</li>
        <li>Noch ein Link</li>
        <li>LINK</li>
        <li>Noch ein Link</li>
       </ul>

      </div>
      <div class="image" style="background-image:url('bilder/images/image01.jpg');">&nbsp; </div>
    </div>
   </div>
<!-- //NAVI BAR ENDE-->



   <div class="br">&nbsp;</div>



<!-- CONTENT -->

    <div class="page-content" >
      <div class="content"> &nbsp;

      Hierhin kommt eine ganze Menge Text und Bilder und so... ;) <br> Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;)<br>
      Hierhin kommt eine ganze Menge Text und Bilder und so... ;) <br> Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;)<br>
      Hierhin kommt eine ganze Menge Text und Bilder und so... ;) <br> Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;)<br>
      Hierhin kommt eine ganze Menge Text und Bilder und so... ;) <br> Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;)<br>
      Hierhin kommt eine ganze Menge Text und Bilder und so... ;) <br> Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;)<br>
      Hierhin kommt eine ganze Menge Text und Bilder und so... ;) <br> Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;)<br>
      Hierhin kommt eine ganze Menge Text und Bilder und so... ;) <br> Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;)<br>
      Hierhin kommt eine ganze Menge Text und Bilder und so... ;) <br> Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;)<br>
      Hierhin kommt eine ganze Menge Text und Bilder und so... ;) <br> Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;)<br>
      Hierhin kommt eine ganze Menge Text und Bilder und so... ;) <br> Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;) Hierhin kommt eine ganze Menge Text und Bilder und so... ;)<br>
       </div>

      <!-- SIDEBAR -->
      <div class="sidebar">
        <p class="headline">Videos</p>
        <p align="right">
         <a target="_blank"  href="#"> <img src="bilder/videoicon.jpg" class="videobild"/></a>
         <a target="_blank"  href="#"> <img src="bilder/videoicon.jpg" class="videobild"/></a>
         <a target="_blank"  href="#"> <img src="bilder/videoicon.jpg" class="videobild"/></a>
         <a target="_blank"  href="#"> <img src="bilder/videoicon.jpg" class="videobild"/></a>
         <a target="_blank"  href="#"> <img src="bilder/videoicon.jpg" class="videobild"/></a>
         <a target="_blank"  href="#"> <img src="bilder/videoicon.jpg" class="videobild"/></a>
         <a target="_blank"  href="#"> <img src="bilder/videoicon.jpg" class="videobild"/></a>
         <a target="_blank"  href="#"> <img src="bilder/videoicon.jpg" class="videobild"/></a>
         <a target="_blank"  href="#"> <img src="bilder/videoicon.jpg" class="videobild"/></a>
        </p>
      </div>
      <!-- //SIDEBAR ENDE-->
    </div>


<!-- //CONTENT ENDE -->

<div class="br"></div>


<div class="footer-wrapper">
 <div class="page-footer">   &nbsp;
   <div class="left">Kontakt</div>
   <div class="right">Impressum</div>
 </div>
</div>


</body>
</html>

Code:

.header-wrapper {position: relative;
                 float: left;
                 left: 0px;
                 width: 100%;
                 background:#333333;
}

.body-wrapper {  position: relative;
                 float: left;
                 left: 0px;
                 width: 100%;
}

.page-head {     width: 900px;
                 margin-left: auto;
                 margin-right: auto;
}

.page-navi {          width: 900px;
                 margin-left: auto;
                 margin-right: auto;
}

.logo {          position: relative;
                 float: left;
                 left: 0px;
                 width: 200px;
                 height: 100px;
}

.title {         position: relative;
                 float: left;
                 left: 0px;
                 width: 500px;
                 height: 100px;
                 text-align:center;
}

.social {        position: relative;
                 float: right;
                 right: 0px;
                 width: 200px;
                 height: 100px;
                 text-align: right;
                 bottom: 0;
}

.navi {          position: relative;
                 float: left;
                 left: 0px;
                 width: 300px;
                 height: 300px;
                 background-color: #333333;
}

.image {         position: relative;
                 float: right;
                 right: 0px;
                 width: 600px;
                 height: 300px;
                 background-color:#000000;
}

.footer-wrapper {position: relative;
                 float: left;
                 bottom:0px;
                 left: 0px;
                 width: 100%;
}

.page-footer {   width: 900px;
                 margin-left: auto;
                 margin-right: auto;
                 background-color:#333333;
}

.left {          position: relative;
                 float: left;
                 left: 0px;
                 width: 100px;
}

.right {         position: relative;
                 float: right;
                 right: 0px;
                 width: 445px;
                 height: 30px;
                 text-align: right;
}


.page-content {  width: 900px;
                 margin-left: auto;
                 margin-right: auto;
                 background:url(bilder/back-content.png) repeat-y left top;

}

.content {       position: relative;
                 float: left;
                 left: 0px;
                 width: 590px;
}

.sidebar {       position: relative;
                 float: right;
                 right: 0px;
                 width: 300px;
}

.br {            position: relative;
                 float: left;
                 left: 0px;
                 width: 100%;
                 height: 10px;}

img.videobild {  border:2px solid #eee;
                 margin:8px
}

.headline {      text-align:center;
                 font-size:200%;
                 text-decoration: underline;
                 color: #999999;
}

body {           margin:0px;
}

Im Vorschaubrowser meines Editors (phase 5.6) wird der Hintergrund so dargestellt wie ich es möchte

fricca · #4 (**permalink**) 14.10.2012, 11:38

Clear fehlt. FAQ Punkt 2. Siehe dein anderer Thread zum gleichen Thema. http://xhtmlforum.de/68253-hilfe-mei...tml#post521563

maxx · #5 (**permalink**) 14.10.2012, 17:26

Zitat:

Zitat von fricca

Clear fehlt. FAQ Punkt 2. Siehe dein anderer Thread zum gleichen Thema. http://xhtmlforum.de/68253-hilfe-mei...tml#post521563

Ah, sorry, das habe ich nicht gesehen. Dachte der Thread wurde gelöscht, weil er im falschen "Bereich" war.
Ich habe mich jetzt zum Clear belesen - Den Sinn verstehe ich, aber ein wenig suspekt ist mir dieser Befehl immer noch.

Wenn ich das richtig verstehe, muss ich im Div PAGE den clear Befehl eingeben. Ich habe Clear: both gewählt, aber trotzdem wird der Hintergrund immer noch nicht angezeigt.

HTML-Code:

<div class="page" style="clear:both" >
      <div class="content">
        <p align="right">Platzhalter für Text</p>
      </div>
      <div class="sidebar">
        <p class="headline">Überschrift</p>
        <p align="right">Platzhalter für Text</p>
      </div>
    </div>

fricca · #6 (**permalink**) 14.10.2012, 17:31

Du hast es nicht richtig verstanden, lies bitte nochmal genau nach und arbeite die verlinkten Artikel wirklich durch.
Außerdem habe ich dir in dem anderen Thread bereits Little Boxes empfohlen; auch dort gibt es ganz viel zu Float und Clear zu lernen. Das Thema ist alles andere als banal, bitte nimm dir ausreichend Zeit dafür, das alles durchzuarbeiten.

maxx · #7 (**permalink**) 14.10.2012, 18:27

Ah super! ich habs jetzt gecheckt. Und es funktioniert.

Für alle die den gleichen Fehler haben wie ich und auch ein Brett vorm Kopf haben-hier der berichtigte Quelltext:

HTML-Code:

<div class="page">
      <div class="content">
       <p>TEXT</p>
      </div>
      <div class="sidebar">
        <p>TEXT</p>
      </div>
      <div class="clear"></div>
     </div>

Code:

.page {  width: 900px;
                 margin-left: auto;
                 margin-right: auto;
                 background:url(bilder/back-content.png) repeat-y left top;

}

.content {       position: relative;
                 float: left;
                 left: 0px;
                 width: 590px;
}

.sidebar {       position: relative;
                 float: right;
                 right: 0px;
                 width: 300px;
}

.clear          {clear: both;}

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Button Value und Hintergrund wird nicht angezeigt	img	CSS	4	16.01.2009 13:15
ie6 hintergrund wird nicht angezeigt	tanaka	CSS	2	01.08.2008 14:35
Hintergrund wird nicht angezeigt: Verschachtelungsproblem??	trantea	(X)HTML	11	19.03.2008 17:52
Div Orientierung	Leonidus	CSS	22	30.05.2007 17:05
Sehr eigenartiger Fehler: Hintergrund wird nicht angezeigt	heffalump	CSS	8	17.08.2005 12:51