zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Footer bleibt nicht unten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.11.2013, 18:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.03.2013
Beiträge: 25
Mepich befindet sich auf einem aufstrebenden Ast
Standard Footer bleibt nicht unten

Wenn ich mein FEnster minimier also ein bisschen kleiner ziehe und ich dann runter scrolle, dann bleibt mein footer oben hängen, was habe ich falsch gemacht?

Hier der HTML Code:
HTML-Code:
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="responsive-nav.css">
    <link rel="stylesheet" href="styles.css">
    <script src="responsive-nav.js"></script>
  </head>
  <body>
<div id="wrapper">
    <div id="header">
    	<img src="images/whyc_logo.png">
    </div>

    <nav class="nav-collapse">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Leistungen</a></li>
        <li><a href="#">Referenzen</a></li>
        <li><a id="border-none" href="#">Kontakt</a></li>
      </ul>
    </nav>

    <section>

        <article>
            <h1>Erster Block</h1>
        </article>

        <article>
            <h1>Zweiter Block</h1>
        </article>

        <article>
            <h1>Dritter Block</h1>
        </article>

    </section>

    <footer>
        <p>Hier ist der Footer.</p>
    </footer>

    <script>
      var navigation = responsiveNav(".nav-collapse", {
        animate: true,        // Boolean: Use CSS3 transitions, true or false
        transition: 250,      // Integer: Speed of the transition, in milliseconds
        label: "Menu",        // String: Label for the navigation toggle
        insert: "after",      // String: Insert the toggle before or after the navigation
        customToggle: "",     // Selector: Specify the ID of a custom toggle
        openPos: "relative",  // String: Position of the opened nav, relative or static
        jsClass: "js",        // String: 'JS enabled' class which is added to <html> el
        init: function(){},   // Function: Init callback
        open: function(){},   // Function: Open callback
        close: function(){}   // Function: Close callback
      });
    </script>


</div>
  </body>
</html>
Hier mein css Code:
Code:
/* ------------------------------------------
  DEMO PAGE'S STYLES
--------------------------------------------- */
body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup {
  margin: 0;
  padding: 0;
  border: 0;
}

a:active,
a:hover {
  outline: 0;
}

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: #4d4d4d;
  background: #fff;
  font: normal 100%/1.4 sans-serif;
}

html, body {
    height: 100%;
}

#wrapper {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    min-height: 100%;

}

#header {
    background: #0B173B;
}

#header img {
    padding: 10px;
    max-width:90% ;
}

section {
    padding: 1em;
    width: 90%;
    margin-top: 70px;
}

article {
    width: 28%;
    float: left;
    margin-right: 5%;
}

article p {
    margin-bottom: 10px;
}

article h1 {
    max-width: 80%;
    color: #1183bf;
}

article a {
    color: #fff;
    background-color: #1183bf;
    padding: 3px 10px 2px 10px;
    text-decoration: none;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

article a:hover {
    background-color: #044C72;
}

footer {
    width: 100%;
    height: 150px;
    background: #0B173B;
    clear: both;
    position: absolute;
    bottom: 0;
}

.nav-collapse,
.nav-collapse * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: 100%;
  float: left;
}

.nav-collapse li {
  float: left;
  width: 100%;
}

@media screen and (min-width: 35em) {
  .nav-collapse li {
    width: 25%;
    *width: 24.9%; /* IE7 Hack */
    _width: 19%; /* IE6 Hack */
  }
}

.nav-collapse a {
  color: #fff;
  text-decoration: none;
  width: 100%;
  background:url(images/bg_header.jpg);
  border-bottom: 1px solid white;
  padding: 0.7em 1em;
  float: left;
}

.nav-collapse a:hover {
    font-weight: bold;
}

@media screen and (min-width: 35em) {
  .nav-collapse a {
    margin: 0;
    padding: 1em;
    float: left;
    text-align: center;
    border-bottom: 0;
    border-right: 1px solid white;
  }

  #border-none {
      border-right: none;
  }
}

.nav-collapse ul ul a {
  background: #ca3716;
  padding-left: 2em;
}

@media screen and (min-width: 35em) {
  .nav-collapse ul ul a {
    display: none;
  }

}

.nav-toggle {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 70px;
  height: 55px;
  float: right;
  text-indent: -9999px;
  overflow: hidden;
  background: #0B173B url("hamburger.gif") no-repeat 50% 33%;
}

@media screen and (-webkit-min-device-pixel-ratio: 1.3), screen and (min--moz-device-pixel-ratio: 1.3), screen and (-o-min-device-pixel-ratio: 2 / 1), screen and (min-device-pixel-ratio: 1.3), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
  .nav-toggle {
    background-image: url("hamburger-retina.gif");
    -webkit-background-size: 100px 100px;
    -moz-background-size: 100px 100px;
    -o-background-size: 100px 100px;
    background-size: 100px 100px;
  }
}


@media screen and (max-width: 35em) {
    article {
      width: 90%;
      float: none;
      margin-right: 5%;
      margin-bottom: 5%;
      padding-bottom: 2%;
      border-bottom: 1px solid #4d4d4d;
  }

  section {
      margin-top: 0;
  }
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.11.2013, 19:17
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Der Footer macht doch genau das was er soll. Wie soll er sich denn verhalten? Und hast du vielleicht einfach mal die SuFu genutzt oder mal ein wenig rumgesucht und wenn ja, nach was hast du gesucht?
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
Antwort


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
Problem mit Footer am unteren Seitenrand scar CSS 3 21.04.2013 20:34
Footer container werden untereinander dargestellt... Ntracks CSS 10 07.08.2010 18:24
Layout - footer und layer[links] - Probleme - (CSS-Anfänger) Basti_LRT CSS 1 08.10.2007 22:03
Footer Problem (3 spaltiges Layout, variable Höhe) Lofesto CSS 2 23.07.2007 16:13
Footer Problem blub19 CSS 6 25.01.2005 11:46


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