One of the recent innovations to this layout problem has been a true fluid layout grid. See a live visual at http://www.designinfluences.com/ and the source to use this at http://github.com/bauhouse/fluid960gs/tree/master.
I managed replace the fixed 960 grid system with the fluid layout of the above fluid960gs.zip source. You will need to make few small changes, however, it is easy enough and does offer a true fluid layout for this Inspirion template. The other good change is “source order” = placing important content earlier in the final code -> SEO!
Note: this fluid method also add an extra option of SEO preferred source ordering (via push / pull classes in the 960.css file (see below). This means you can shift the main content of your site before the left (or right) menus.
/* =Clear Floated Elements
————————————————————————————————————————*/
html body * span.clear,
html body * div.clear,
html body * li.clear,
html body * dd.clear
{
background: none;
border: 0;
clear: both;
display: block;
float: none;
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://www.positioniseverything.net/easyclearing.html */
.clearfix:after
{
clear:both;
content:’.’;
display:block;
visibility:hidden;
height:0
}
.clearfix
{
display:inline-block
}
* html .clearfix
{
height:1%
}
.clearfix
{
display:block
}
/* Adds a multiplier of 3 to the grid */
.container_16 .grid_5plus5
{
width:31.25%;
}
/* ENDFLUID 960 CSS */
——————————————————————————
Now we can place the main content section before the left menu:
The CSS .push-x .pull-x class allow for custom a layout ordering that’s independent from source ordering!
Peter Bowey
One of the recent innovations to this layout problem has been a true fluid layout grid. See a live visual at http://www.designinfluences.com/ and the source to use this at http://github.com/bauhouse/fluid960gs/tree/master.
I managed replace the fixed 960 grid system with the fluid layout of the above fluid960gs.zip source. You will need to make few small changes, however, it is easy enough and does offer a true fluid layout for this Inspirion template. The other good change is “source order” = placing important content earlier in the final code -> SEO!
Note: this fluid method also add an extra option of SEO preferred source ordering (via push / pull classes in the 960.css file (see below). This means you can shift the main content of your site before the left (or right) menus.
Code:
/* —————————————————————————————————————— */
/* 960 Fluid Grid System ~ Core CSS. Learn more ~ http://960.gs/ Licensed under GPL and MIT. */
/* =Containers
————————————————————————————————————————*/
.container_12,
.container_16
{ width:92%; margin-left:4%; margin-right:4%;
}
/* =Grid >> Global
————————————————————————————————————————*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16,
.grid_5plus5
{ display:inline; float:left; margin-left:1%; margin-right:1%;
}
.container_12 .grid_3,
.container_16 .grid_4 { width:23% ;}
.container_12 .grid_6,
.container_16 .grid_8 { width:48% ;}
.container_12 .grid_9,
.container_16 .grid_12 { width:73% ;}
.container_12 .grid_12,
.container_16 .grid_16 { width:98% ;}
/* =Push Pull Grid >> Global
————————————————————————————————————————*/
.pull-1, .pull-2, .pull-3, .pull-4,
.pull-5, .pull-6, .pull-7, .pull-8,
.pull-9, .pull-10, .pull-11, .pull-12,
.pull-13, .pull-14, .pull-15, .pull-16,
.push-1, .push-2, .push-3, .push-4,
.push-5, .push-6, .push-7, .push-8,
.push-9, .push-10, .push-11, .push-12,
.push-13, .push-14, .push-15, .push-16 { float:left;position:relative;
}
/* =Grid >> Children (Alpha ~ First, Omega ~ Last)
————————————————————————————————————————*/
.alpha { margin-left:0 ;}
.omega { margin-right:0 ;}
.alpha5 { margin-left:0.666% ;}
.omega5 { margin-right:0.666% ;}
.alpha7 { margin-left:0.75% ;}
.omega7 { margin-right:0.75% ;}
/* =Grid >> 12 Columns
————————————————————————————————————————*/
.container_12 .grid_1 { width:6.333% ;}
.container_12 .grid_2 { width:14.666% ;}
.container_12 .grid_4 { width:31.333% ;}
.container_12 .grid_5 { width:39.666% ;}
.container_12 .grid_7 { width:56.333% ;}
.container_12 .grid_8 { width:64.666% ;}
.container_12 .grid_10 { width:81.333% ;}
.container_12 .grid_11 { width:89.666% ;}
/* =Grid >> 16 Columns
————————————————————————————————————————*/
.container_16 .grid_1 { width:4.25% ;}
.container_16 .grid_2 { width:10.5% ;}
.container_16 .grid_3 { width:16.75% ;}
.container_16 .grid_5 { width:29.25% ;}
.container_16 .grid_6 { width:35.5% ;}
.container_16 .grid_7 { width:41.75% ;}
.container_16 .grid_9 { width:54.25% ;}
.container_16 .grid_10 { width:60.5% ;}
.container_16 .grid_11 { width:66.75% ;}
.container_16 .grid_13 { width:79.25% ;}
.container_16 .grid_14 { width:85.5% ;}
.container_16 .grid_15 { width:91.75% ;}
/* =Prefix Extra Space >> Global
————————————————————————————————————————*/
.container_12 .prefix_3,
.container_16 .prefix_4 { padding-left:25% ;}
.container_12 .prefix_6,
.container_16 .prefix_8 { padding-left:50% ;}
.container_12 .prefix_9,
.container_16 .prefix_12 { padding-left:75% ;}
/* =Prefix Extra Space >> 12 Columns
————————————————————————————————————————*/
.container_12 .prefix_1 { padding-left:8.333% ;}
.container_12 .prefix_2 { padding-left:16.666% ;}
.container_12 .prefix_4 { padding-left:33.333% ;}
.container_12 .prefix_5 { padding-left:41.666% ;}
.container_12 .prefix_7 { padding-left:58.333% ;}
.container_12 .prefix_8 { padding-left:66.666% ;}
.container_12 .prefix_10 { padding-left:83.333% ;}
.container_12 .prefix_11 { padding-left:91.666% ;}
/* =Pull Pull Class >> 12 Columns
————————————————————————————————————————*/
.container_12 .pull-1 { left:-8.333% ;}
.container_12 .pull-2 { left:-16.666% ;}
.container_12 .pull-3 { left:-25% ;}
.container_12 .pull-4 { left:-33.333% ;}
.container_12 .pull-5 { left:-41.666% ;}
.container_12 .pull-6 { left:-50% ;}
.container_12 .pull-7 { left:-58.333% ;}
.container_12 .pull-8 { left:-66.666% ;}
.container_12 .pull-9 { left:-75% ;}
.container_12 .pull-10 { left:-83.333% ;}
.container_12 .pull-11 { left:-91.666% ;}
.container_12 .pull-12 { left:-100% ;}
.container_12 .push-1 { left:8.333% ;}
.container_12 .push-2 { left:16.666% ;}
.container_12 .push-3 { left:25% ;}
.container_12 .push-4 { left:33.333% ;}
.container_12 .push-5 { left:41.666% ;}
.container_12 .push-6 { left:50% ;}
.container_12 .push-7 { left:58.333% ;}
.container_12 .push-8 { left:66.666% ;}
.container_12 .push-9 { left:75% ;}
.container_12 .push-10 { left:83.333% ;}
.container_12 .push-11 { left:91.666% ;}
.container_12 .push-12 { left:100% ;}
/* =Prefix Extra Space >> 16 Columns
————————————————————————————————————————*/
.container_16 .prefix_1 { padding-left:6.25% ;}
.container_16 .prefix_2 { padding-left:12.5% ;}
.container_16 .prefix_3 { padding-left:18.75% ;}
.container_16 .prefix_5 { padding-left:31.25% ;}
.container_16 .prefix_6 { padding-left:37.5% ;}
.container_16 .prefix_7 { padding-left:43.75% ;}
.container_16 .prefix_9 { padding-left:56.25% ;}
.container_16 .prefix_10 { padding-left:62.5% ;}
.container_16 .prefix_11 { padding-left:68.75% ;}
.container_16 .prefix_13 { padding-left:81.25% ;}
.container_16 .prefix_14 { padding-left:87.5% ;}
.container_16 .prefix_15 { padding-left:93.75% ;}
/* =Pull Pull Class >> 16 Columns
————————————————————————————————————————*/
.container_16 .pull-1 { left:-6.25% ;}
.container_16 .pull-2 { left:-12.5% ;}
.container_16 .pull-3 { left:-18.75% ;}
.container_16 .pull-4 { left:-25% ;}
.container_16 .pull-5 { left:-31.25% ;}
.container_16 .pull-6 { left:-37.5% ;}
.container_16 .pull-7 { left:-43.75% ;}
.container_16 .pull-8 { left:-50% ;}
.container_16 .pull-9 { left:-56.25% ;}
.container_16 .pull-10 { left:-62.5% ;}
.container_16 .pull-11 { left:-68.75% ;}
.container_16 .pull-12 { left:-75% ;}
.container_16 .pull-13 { left:-81.25% ;}
.container_16 .pull-14 { left:-87.5% ;}
.container_16 .pull-15 { left:-93.75% ;}
.container_16 .pull-16 { left:-100% ;}
.container_16 .push-1 { left:6.25% ;}
.container_16 .push-2 { left:12.5% ;}
.container_16 .push-3 { left:18.75% ;}
.container_16 .push-4 { left:25% ;}
.container_16 .push-5 { left:31.25% ;}
.container_16 .push-6 { left:37.5% ;}
.container_16 .push-7 { left:43.75% ;}
.container_16 .push-8 { left:50% ;}
.container_16 .push-9 { left:56.25% ;}
.container_16 .push-10 { left:62.5% ;}
.container_16 .push-11 { left:68.75% ;}
.container_16 .push-12 { left:75% ;}
.container_16 .push-13 { left:81.25% ;}
.container_16 .push-14 { left:87.5% ;}
.container_16 .push-15 { left:93.75% ;}
.container_16 .push-16 { left:100% ;}
/* =Suffix Extra Space >> Global
————————————————————————————————————————*/
.container_12 .suffix_3,
.container_16 .suffix_4 { padding-right:25% ;}
.container_12 .suffix_6,
.container_16 .suffix_8 { padding-right:50% ;}
.container_12 .suffix_9,
.container_16 .suffix_12 { padding-right:75% ;}
/* =Suffix Extra Space >> 12 Columns
————————————————————————————————————————*/
.container_12 .suffix_1 { padding-right:8.333% ;}
.container_12 .suffix_2 { padding-right:16.666% ;}
.container_12 .suffix_4 { padding-right:33.333% ;}
.container_12 .suffix_5 { padding-right:41.666% ;}
.container_12 .suffix_7 { padding-right:58.333% ;}
.container_12 .suffix_8 { padding-right:66.666% ;}
.container_12 .suffix_10 { padding-right:83.333% ;}
.container_12 .suffix_11 { padding-right:91.666% ;}
/* =Suffix Extra Space >> 16 Columns
————————————————————————————————————————*/
.container_16 .suffix_1 { padding-right:6.25% ;}
.container_16 .suffix_2 { padding-right:16.5% ;}
.container_16 .suffix_3 { padding-right:18.75% ;}
.container_16 .suffix_5 { padding-right:31.25% ;}
.container_16 .suffix_6 { padding-right:37.5% ;}
.container_16 .suffix_7 { padding-right:43.75% ;}
.container_16 .suffix_9 { padding-right:56.25% ;}
.container_16 .suffix_10 { padding-right:62.5% ;}
.container_16 .suffix_11 { padding-right:68.75% ;}
.container_16 .suffix_13 { padding-right:81.25% ;}
.container_16 .suffix_14 { padding-right:87.5% ;}
.container_16 .suffix_15 { padding-right:93.75% ;}
/* =Clear Floated Elements
————————————————————————————————————————*/
html body * span.clear,
html body * div.clear,
html body * li.clear,
html body * dd.clear
{ background: none; border: 0; clear: both; display: block; float: none; font-size: 0; list-style: none; margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0;
}
/* http://www.positioniseverything.net/easyclearing.html */
.clearfix:after
{ clear:both; content:’.’; display:block; visibility:hidden; height:0
}
.clearfix
{ display:inline-block
} * html .clearfix
{ height:1%
}
.clearfix
{ display:block
}
/* Adds a multiplier of 3 to the grid */
.container_16 .grid_5plus5
{ width:31.25%;
}
/* END FLUID 960 CSS */
——————————————————————————
Now we can place the main content section
beforethe left menu:The CSS .push-x .pull-x class allow for custom a layout ordering that’s independent from source ordering!
Peter Bowey
http://www.pbcomp.com.au/