zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hintergrund wird nicht angezeigt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.10.2012, 09:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.10.2012
Beiträge: 7
maxx befindet sich auf einem aufstrebenden Ast
Idee Hintergrund wird nicht angezeigt

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;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.10.2012, 10:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.066
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
  #3 (permalink)  
Alt 14.10.2012, 11:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.10.2012
Beiträge: 7
maxx befindet sich auf einem aufstrebenden Ast
Standard

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


Geändert von hemfrie (26.11.2012 um 07:46 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 14.10.2012, 11:38
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.782
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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

Geändert von fricca (14.10.2012 um 11:42 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 14.10.2012, 17:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.10.2012
Beiträge: 7
maxx befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
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>
Mit Zitat antworten
  #6 (permalink)  
Alt 14.10.2012, 17:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.782
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 14.10.2012, 18:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.10.2012
Beiträge: 7
maxx befindet sich auf einem aufstrebenden Ast
Standard

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;}
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:37 Uhr.