XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Hintergrund wird nicht angezeigt (http://xhtmlforum.de/showthread.php?t=68259)

maxx 14.10.2012 10:15

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


MrMurphy 14.10.2012 11: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 14.10.2012 12: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

http://mattin.bplaced.de/bilder/screenshot.jpg

fricca 14.10.2012 12:38

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

maxx 14.10.2012 18:26

Zitat:

Zitat von fricca (Beitrag 521599)
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 14.10.2012 18: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 14.10.2012 19: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;}



Alle Zeitangaben in WEZ +2. Es ist jetzt 20:30 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023