Hilfe!!! mein Homepagelayout funktioniert nicht!

maxx · #1 (**permalink**) 13.10.2012, 13:50

Hallo, ich möchte eine Homepage erstellen - zum ersten Mal mit DIV's (und CSS lerne ich auch noch

)

Ich bin mit dem Ergebnis des Layouts bisher ziemlich zufrieden, aber ein paar Sachen stören mich bzw. funktionieren nicht wie ich will. Ich bitte um Hilfe!!!

Hier die Website: --
Nicht wundern - die Navigationsleiste hab ich noch nicht begonnen - ich wollte erst, dass der Rest funktioniert.

Die Sidebar soll sich an der Höhe des Content-divs anpassen. Wie schaffe ich das?
Warum wird der Hintergrund vom page-footer nicht angezeigt?
Der footer-wrapper soll mit dem Boden des Browserfensters abschließen - darunter ist aber jeweils noch eine Freizeile. Warum?

Ich möchte zwischenzeilen zwischen den einzelnen divs. Wenn ich mit <br> arbeite, wird eineLeerzeile nicht angezeigt, deswegen habe ich ein "leeres" DIV erstellt (.br) - kann ich das elganter lösen?

Ich danke vielmals für jede Hilfe!!!

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">
    <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">
      <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="body-wrapper">
    <div class="page">
      <div class="content">

      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>
   </div>

<!-- //CONTENT ENDE -->

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


<div class="footer-wrapper">
 <div class="page-footer">
   <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 {          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;
}

.content {       position: relative;
                 float: left;
                 left: 0px;
                 width: 590px;
                 background-color: #C0C0C0;
                 padding-right: 10px;
                 padding-left: 10px
                 padding-top: 10px;
                 padding-bottom: 10px;
}

.sidebar {       position: relative;
                 float: right;
                 right: 0px;
                 width: 300px;
                 background-color:#333333;
}

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

maxx · #2 (**permalink**) 13.10.2012, 14:26

Zitat:

Die Sidebar soll sich an der Höhe des Content-divs anpassen. Wie schaffe ich das?

Das habe ich jetzt geschafft mit Faux Columns

Aber bei dem Rest habe ich immer noch keine Ahnung

maxx · #3 (**permalink**) 13.10.2012, 14:28

Zitat:

Das habe ich jetzt geschafft mit Faux Columns

Nein doch nicht, denn Firefox und Internetexplorer zeigen das nicht an. Wieso nur?

Praktikant · #4 (**permalink**) 13.10.2012, 14:40

Wenn du dich mit dir selbst unterhalten möchtest, dann schreib dir Briefe. Um hier weitere Einzelheiten an deinen Post anzuhängen, nutze bitte die Bearbeiten-Funktion. Du findest sie unter jedem deiner Beiträge.

fricca · #5 (**permalink**) 13.10.2012, 14:40

Deine Floats werden nicht eingeschlossen. Siehe unsere FAQ unter Punkt 2.
Bitte erarbeite dir CSS-Grundlagen, geeignete Lektüre ist Little Boxes.

Du befindest dich hier im Bereich Sitecheck. Aber eigentlich willst du doch keine Beurteilung deines Layouts, sondern nur über CSS-Probleme reden. Dafür haben wir den CSS-Bereich.

tupamaro · #6 (**permalink**) 14.10.2012, 08:21

@Praktikant
>>Wenn du dich mit dir selbst unterhalten möchtest, dann schreib dir Briefe.<<

was soll das ?
lass den jung in ruhe.

wenn es doch für dich wieder mal trivial ist, dann ignoriere es doch einfach.
deine aussage ist respektlos.
hilfesuchende wegmobben kann nicht sinn eines forums sein.

naja, ich gehe mal davon aus, dass ich ab jetzt deine hilfe wohl ausschließen kann.
aber ich musste das los werden.

ich hoffe trotzdem, dass du nicht allzu stinkig auf mich mich bist.

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
Über Methode mit innerHTML Div verändern (funktioniert nicht)	1chris	CSS	6	28.03.2010 16:09
Über Methode mit innerHTML Div verändern (funktioniert nicht)	1chris	Javascript & Ajax	2	26.03.2010 21:59
Warum funktioniert mein Headset nur in CSS nicht??? HILFE!!	Erdnuss	Offtopic	6	09.06.2009 20:56
Hilfe gesucht...!	Indy	CSS	8	28.01.2009 00:34
Hilfe, mein php-Formular funktioniert nicht	linksworld24	Serveradministration und serverseitige Scripte	1	29.11.2006 13:36