diff farol/static/style.css @ 149:f2f434eafb66

Always push the footer to the bottom of the page
author Benoît Allard <benoit.allard@greenbone.net>
date Fri, 31 Oct 2014 14:19:16 +0100
parents 0f19ece4e7e5
children
line wrap: on
line diff
--- a/farol/static/style.css	Fri Oct 31 14:18:47 2014 +0100
+++ b/farol/static/style.css	Fri Oct 31 14:19:16 2014 +0100
@@ -2,28 +2,50 @@
 .panel-title a, a.a-block {
     display: block;
 }
-/*
-// Try to push the footer to the bottom of the page
+
+/* Try to push the footer to the bottom of the page */
 html, body {
   height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.cover {
+  min-height: 100%;
+  position: relative;
+}
+
+nav.navigation {
+  padding: 10px;
 }
 
 .main.container {
-  min-height: 100%;
-  margin-bottom: -50px;
+  padding: 10px;
+  padding-bottom: 140px; /* height of the footer + 10 */
 }
-*/
 
+.footer {
+  height 130px;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+/* And that works */
+
+/* Display a background image */
 @media (min-width: 768px){
   body {
     background: url('background.png') no-repeat fixed right bottom rgb(255,255,255);
   }
 }
 
+/* attenuate it */
 .cover {
   background: rgba(255,255,255,0.8);
 }
 
+/* For the POST_buttons */
 form.inlined-form {
   display: inline-block;
 }
@@ -33,11 +55,7 @@
   padding: 0;
 }
 
-.footer {
-  height: 130px;
-  margin-top: 20px;
-}
-
+/* Color when hovering, Ouh ... */
 #greenbone.logo_img {
   display: block;
   width: 100px;

http://farol.wald.intevation.org