|
|||
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> 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; } } |
Sponsored Links |
|
||||
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? |
Sponsored Links |
|
|
Ä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 |