Fixing the footer. Fix #29

nnmon/static/css/style.css

@@ -72,9 +72,16 @@ p label { width: 7em; display: inline-block; }
 .confirm_popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; opacity: 30%; }
 .confirm_popup > div { background: #F7F7F7; border: 2px solid #454545; height: 133px; left: 50%; margin-left: -130px; margin-top: -66px; padding: 10px; position: absolute; top: 50%; width: 260px; }
 .confirm_thanks { width: 17.2em; height: 6.7em; }
-#footer { text-align: center; }
 .hidden { display: none; }
 
+#footer {
+	text-align: center;
+	max-width: 960px;
+	clear: both;
+	margin: auto;
+	background-color: #f9f9f9;
+	}
+
 .errorlist { font-size: .8em; color: red; }
 
 table.listing div.confirm_popup { right: 0; text-align: right; }
@@ -229,10 +236,9 @@ blockquote {
   background: url('../img/background.png') repeat-x bottom #f9f9f9;
 }
 #header {
-  max-width: 960px;
-  margin: 0 auto;
   background: #f9f9f9;
 }
+
 #header a {
 	color: #222;
 	text-decoration: none;
@@ -491,7 +497,6 @@ input[type=submit]:hover, input[type=button]:hover, .button:hover {
 /* Infrigement form */
 
 #addForm.index {
-  position: absolute;
   top: -62px; right: 0;
   width: 300px;
   padding: 1em;
@@ -687,10 +692,10 @@ ul.messages {
 #legend li { padding: .1em; display: inline; }
 #map { float: right; }
 
-.logo-org { display: inline-block; width: 114px; text-align: center; vertical-align: top; }
-.logo-org img { width: 100px; }
+.logo-org { display: inline-block; margin: 15px; text-align: center; vertical-align: top; background-color: #f9f9f9; }
+.logo-org img { height: 80px; }
+.dark { background-color: #212121; }
 
-/*tr.new-status td { background: green !important; }*/
 tr.duplicate-status td { background: #aaa !important; }
 tr.closed-status td { background: #999 !important; }
 tr.ooscope-status td { background: #bbb !important; }
@@ -713,3 +718,10 @@ input[type="text"], input[type="textarea"] {
   box-shadow: 0 1px 2px rgba(0, 0, 0, .15) inset;
   padding: 0.5em;
 }
+
+#push { clear: both; }
+
+#wrapper { 
+  max-width: 960px;
+  margin: auto;
+}

nnmon/templates/base.html

@@ -54,22 +54,23 @@
   </ul>
 </div>
 </div>
-</div>
 
 {% block content %}
 {% endblock %}
 {% block other_content %}
 {% endblock %}
+<div id="push"></div>
+</div>
 <div id='footer'>
 {% block footer %}
   <p>{% trans "RespectMyNet.eu is an online platform enabling citizens to become the watchmen of the Internet by reporting Net Neutrality violations. Everyone is invited to report undue blocking or throttling of their Internet access, and help  name and shame operators' harmful practices." %}</p>
   <ul>
-    <li class="logo-org"><img alt="BoF logo" src="/static/img/bof.png" /><a href="https://www.bof.nl">Bits of Freedom</a></li>
-    <li class="logo-org"><img alt="LQDN logo" src="/static/img/lqdn.png" /><a href="https://www.laquadrature.net/">La Quadrature du Net</a></li>
-    <li class="logo-org"><img alt="ORG logo" src="/static/img/org.png" /><a href="https://www.openrightsgroup.org/">Open Rights Group</a></li>
-    <li class="logo-org"><img alt="NURPA logo" src="/static/img/nurpa.png" width="80" style="text-align: center; background:#446688"/><br /><a href="http://nurpa.be"><small>Net Users' Rights Protection Association</small></a></li>
-    <li class="logo-org"><img alt="XNet logo" src="/static/img/xnet.png" /><a href="https://xnet-x.net/">X&nbsp;Net</a></li>
-    <li class="logo-org"><img alt="EDRI logo" src="/static/img/edri.png" /><a href="https://edri.org/">EDRI</a></li>
+    <li class="logo-org"><a href="https://www.bof.nl"><img alt="BoF logo" src="/static/img/bof.png" /></a></li>
+    <li class="logo-org"><a href="https://www.laquadrature.net/"><img alt="LQDN logo" src="/static/img/lqdn.png" /></a></li>
+    <li class="logo-org dark"><a href="https://www.openrightsgroup.org/"><img alt="ORG logo" src="/static/img/org.png" /></a></li>
+    <li class="logo-org dark"><br /><a href="http://nurpa.be"><img alt="NURPA logo" src="/static/img/nurpa.png"/></a></li>
+    <li class="logo-org"><a href="https://xnet-x.net/"><img alt="XNet logo" src="/static/img/xnet.png" /></a></li>
+    <li class="logo-org"><a href="https://edri.org/"><img alt="EDRI logo" src="/static/img/edri.png" /></a></li>
   </ul>
 {% endblock %}
 </div>