Einzelnen Beitrag anzeigen
  #2 (permalink)  
Alt 14.10.2012, 10:49
MrMurphy MrMurphy ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.099
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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

Geändert von MrMurphy (14.10.2012 um 11:26 Uhr)
Mit Zitat antworten
Sponsored Links