Einzelnen Beitrag anzeigen
  #3 (permalink)  
Alt 14.10.2012, 12:03
maxx maxx ist offline
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 08:46 Uhr)
Mit Zitat antworten