zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit Footer am unteren Seitenrand

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.04.2013, 14:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.04.2013
Beiträge: 5
scar befindet sich auf einem aufstrebenden Ast
Standard Problem mit Footer am unteren Seitenrand

Hallo zusammen,

ich bin so langsam am verzweifeln mit einem Seitenaufbau:
- Header: ganz oben über die volle Breite, Position ist fixed
- Contentbereich: zentriert auf 990px. Links ist der Content, rechts eine Sidebar - die Sidebar ist fixed.
- Footer: über die volle Breite. Wenn nicht genügend Inhalt auf der Seite ist, soll der Footer nach ganz unten geschoben werden, wenn jedoch mehr Inhalt vorhanden ist, soll er nach unten verdrängt werden. Ich glaube das bezeichnet man als "sticky footer" ?!

Jedenfalls kriege ich es mit meinem Seitenaufbau so leider nicht so richtig hin.... ich versuche die Height von 100% bis zum eigentlichen Inhalt zu vererben und dann den Footer darunter zu setzen. Aber: entweder der Footer ist zu weit unten oder es ist unten aber unter dem Footer kann noch weiter gescrollt werden.

HTML
HTML-Code:
<body>
<div id="page-wrapper">
  <div id="page">
     <div id="top-wrapper">
        <div id="sidebar">
          <div id="sidebar-transparent"></div>
          <div id="shadow-left"></div>
          <div id="sidebar-right" class="column sidebar">
              .....
          </div>
          <div id="shadow-right"></div>
        </div>

        <header class="wrapper">
          <div id="header-container">
              ......
          </div>
        </header>
      </div>

      <div id="main-wrapper">
        <div id="sidebar-bg"></div>
        <div id="main" class="clearfix">
          .....
        </div>
        </div>
        <div class="footer-push"></div>
      </div>

     <footer class="wrapper">
        <div class="section">
          .... 
        </div>
     </footer>
  </div>
</div>
</body>
CSS
Code:
* {
    margin: 0;
    padding: 0;
}

html,body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: #FEFAE5;
}

a {
    color: #71736B;
}

header.wrapper  {
    position: fixed;
    top: 0;
    left: 0;
    height: 147px;
    width: 100%;
    font-size: 18px;
    background-color: #fff !important;
    z-index: 10;
}

header #header-container {
    width: 977px;
    margin: auto;
    height: 147px;
}

#page-wrapper {
    background: url(../images/background1.jpg) repeat-x;
    background-position: 0 147px;
    height: 100%;
}

#page {
    height: 100%;
    font-family: "Trebuchet ms",Verdana,sans-serif;
    font-size:14px;
    color: #71736B;
}

#main-wrapper {
    min-height: 100%;
    height:auto !important; /*Important Regel für moderne Browser*/
    height:100%; /*Mindesthöhe für den IE*/
    position: relative;
    top:190px;
    z-index: 1;
    width: 960px;
    margin: 0 auto 175px;
    background-color: #FDFCF6;

    /* todo: lösung für IE 7-8 muss her */
    border-left: 15px solid rgba(253, 252, 246, 0.3);
    border-right: 15px solid rgba(253, 252, 246, 0.3);
    border-top: 15px solid rgba(253, 252, 246, 0.3);
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
  
}

#sidebar {
    width: 990px;
    margin: 0 auto;
    position: relative;
}

#sidebar-right {
    position: fixed;
    margin-left: 674px;
    height: 100%;
    width: 286px;
    padding-top: 205px;
    z-index: 5;
}

#sidebar-transparent {
    position: fixed;
    margin-left: 674px;
    top: 147px;
    height: 58px;
    width: 286px;
    background-color: #fff;
    filter: Alpha(opacity=70);
    opacity: 0.2;
    moz-opacity: 0.2;
}

#sidebar-bg {
    position: absolute;
    height: 100%;
    width: 286px;
    margin-left: 657px;
    background-color: #fff;
    z-index: 10;
}

#sidebar-right .section {
    width: 226px;
    padding: 20px 30px 20px 30px;
    position: relative;
    z-index: 11;
}

#shadow-left {
    position: fixed;
    margin-left: 657px;
    margin-bottom: 35px;
    width: 17px;
    height: 100%;
    background: url(../images/leftShadow.png) repeat-y;
    z-index: 20;
}

#shadow-right {
    position: fixed;
    margin-left: 960px;
    width: 17px;
    height: 100%;
    background: url(../images/rightShadow.png) repeat-y;
    z-index: 20;
}


/*
** Styles for the sticky footer: stays at the bottom of the page, but yields the content.
** The footer contains a navigation.
*/
footer.wrapper {
    height: 35px;
    background-color: #FEFDFB;
    border-top: 1px solid #97968A;
    font-size: 12px;
    color: #97968A;
    position: relative;
    z-index: 30;
}

footer .menu a {
    float: right;
    margin-right: 15px;
    text-decoration: none;
    color: #97968A;
}

.footer-push {
    height: 36px;
}
Hat von euch jemand eine Idee was ich am Aufbau des Footers (oder eher am Aufbau der restlichen Seite) falsch gemacht habe? Vielen Dank schonmal vorab für's anschauen.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.04.2013, 18:47
Benutzer
neuer user
 
Registriert seit: 25.07.2006
Ort: Hamburg
Beiträge: 60
Stadtmensch befindet sich auf einem aufstrebenden Ast
Standard

Probier mal, ans Ende der seitlichen Spalten ein <br clear="all" /> einzubauen!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.04.2013, 19:55
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
Zitat von Stadtmensch Beitrag anzeigen
...<br clear="all" />
wo hast du das her? clear: all; gibts nicht.
clear: Umfließen von Elementen beenden: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Mit Zitat antworten
  #4 (permalink)  
Alt 21.04.2013, 21:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.04.2013
Beiträge: 5
scar befindet sich auf einem aufstrebenden Ast
Standard

Danke für die Antwort, aber das hat leider nicht geholfen. Ich hab ja auch von den Hauptelementen nichts gefloatet. Ich denke es liegt daran, dass der Header auf Position: fixed steht und somit irgendwas nicht hin haut... nur was ...
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
Kleines Problem mit dem Footer TheInfection CSS 5 08.04.2012 19:52
Footer CSS problem elanimoso CSS 1 01.08.2011 02:15
Footer am unteren Rand N.A.R. CSS 4 11.06.2011 02:21
Sticky Footer Problem brainspace CSS 4 17.11.2010 19:37
Problem mit Footer ans Ende kvn CSS 7 30.11.2007 00:23


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:53 Uhr.