zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hilfe!!! mein Homepagelayout funktioniert nicht!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.10.2012, 12:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.10.2012
Beiträge: 7
maxx befindet sich auf einem aufstrebenden Ast
Ausrufezeichen Hilfe!!! mein Homepagelayout funktioniert nicht!

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

Geändert von hemfrie (26.11.2012 um 07:46 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.10.2012, 13:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.10.2012
Beiträge: 7
maxx befindet sich auf einem aufstrebenden Ast
Standard

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

Zitat:
Das habe ich jetzt geschafft mit Faux Columns
Nein doch nicht, denn Firefox und Internetexplorer zeigen das nicht an. Wieso nur?
Mit Zitat antworten
  #4 (permalink)  
Alt 13.10.2012, 13:40
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 5.000
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

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.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #5 (permalink)  
Alt 13.10.2012, 13:40
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.789
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

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 14.10.2012, 07:21
html-vollpfosten
neuer user
 
Registriert seit: 25.09.2012
Beiträge: 51
tupamaro befindet sich auf einem aufstrebenden Ast
Standard

@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.
Mit Zitat antworten
Antwort

Stichwörter
background-color, css, div, footer, homepage, layout

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:36 Uhr.