Mercurial Mercurial > pytask / changeset
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | raw | zip | gz | bz2 | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add additional div tags and use % based values for all properties instead of pixel based.
authorMadhusudan.C.S <madhusudancs@gmail.com>
Thu, 20 Jan 2011 01:36:37 +0530
changeset 479 fdaf0d8ceb53
parent 478 863dba311ba2
child 480 d0325456f266
Add additional div tags and use % based values for all properties instead of pixel based. The core ideas of using multiple containers among other things as commented in the CSS file are taken from http://www.maxdesign.com.au/articles/css-layouts/three-liquid/# giving them the due credits they deserve. Thank you very much guys. I was struggling to get a fully liquid three-column layout. I made some changes as per my ideas.
pytask/static/css/base.css file | annotate | diff | comparison | revisions
pytask/templates/base.html file | annotate | diff | comparison | revisions 
--- a/pytask/static/css/base.css	Thu Jan 20 01:33:41 2011 +0530
+++ b/pytask/static/css/base.css	Thu Jan 20 01:36:37 2011 +0530
@@ -28,7 +28,14 @@
   box-shadow: 0 0 1em darkslategray;
 }
 
-#container {
+/* Taken from http://www.maxdesign.com.au/articles/css-layouts/three-liquid/# */
+#container1 {
+  float: left;
+  width: 100%;
+}
+
+/* Taken from http://www.maxdesign.com.au/articles/css-layouts/three-liquid/# */
+#container2 {
   padding: 0px;
   margin: 10px 0px 0px 0px;
   background-attachment: scroll;
@@ -36,15 +43,17 @@
   background-repeat: repeat-y;
   background-position: 0px 0px;
   height: auto; #default was 1%
-  width: auto;
+  float: left;
+  width: 100%;
 }
 
 #left {
-  margin: 0px;
+  margin: 0;
   width: 15%;
-  padding: 10px 20px 10px 20px;
+  padding: 1% 1% 1% 1%;
   float: left;
   border: 1px solid #ddd;
+  display: inline;
 }
 
 div #navheader {
@@ -106,11 +115,10 @@
 }
 
 #center {
-  height: auto;
-  width: 54%;
-  padding: 10px 20px 10px 20px;
+  width: 56%;
+  padding: 1% 1% 1% 1%;
   float: left;
-  margin: 0px 0px 0px 6px;
+  margin: 0 0 0 1%;
   line-height: 1.8em;
   border: 1px solid #ddd;
 }
@@ -125,12 +133,12 @@
 }
 
 #right {
-  padding: 10px 20px 10px 20px;
+  padding: 1% 1% 1% 1%;
   height: auto;
   width: 20%;
-  float: left;
-  margin: 0px 0px 0px 6px;
+  float: right;
   border: 1px solid #ddd;
+  display: inline;
 }
 
 .clearer {
--- a/pytask/templates/base.html	Thu Jan 20 01:33:41 2011 +0530
+++ b/pytask/templates/base.html	Thu Jan 20 01:36:37 2011 +0530
@@ -44,7 +44,8 @@
       <h2><a href="{% url home_page %}">PyTask</a></h2>
     </div>
 
-    <div id="container">
+    <div id="container1">
+    <div id="container2">
       <div id="left">
         {% include '_left_sidebar.html' %}
 
@@ -67,6 +68,7 @@
       <div class="clearer">
       </div>
     </div>
+    </div>
     <div id="footer">
       Designed by <a href="http://fossee.in">FOSSEE</a>
     </div>
pytask