Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

How to: Nested Percentage Grids


  #1  
Old Jan 25, 2013, 01:07 PM
jerryc
 
367 posts · Oct 2012
Florida
Here's an example of a nested percentage grid layout. The example uses it for images, but it could be used for anything.

The rows of 6 random images at the top and bottom of the content area are laid out using the same fluid grid system that the page uses, only nested within the content area:

Code:
<div class="row">
  <div class="col2"> ... </div>
  <div class="col2"> ... </div>
  <div class="col2"> ... </div>
  <div class="col2"> ... </div>
  <div class="col2"> ... </div>
  <div class="col2"> ... </div>
</div>
A percentage based (fluid) grid layout is used, which is recommended if you nest your grids. However, instead of being a percentage of the page, the nested widths are based upon a percentage the surrounding container. The 6 equal columns used for the images in the example are 1/6th of the content area (minus margins and padding).

No special coding is required; this is how CSS handles nested percentage based layouts.

Other Grid Widths

Using the MZ 12 unit grid system, the code could easily be modified to make the rows 2, 3, 4, 6, or 12 images wide. With a little more nesting, rows of multiples of those numbers, such as 8 or 9 could also be made.

For example, to make a row 8 images wide, the grids could be nested twice, first splitting the container into halves, then splitting each half into 4ths:

HTML Code:
<div class="row">
  <div class="col6"> 
    <div class="row">
      <div class="col3"> ... </div>
      <div class="col3"> ... </div>
      <div class="col3"> ... </div>
      <div class="col3"> ... </div>
    </div>
  </div> 
  <div class="col6">
    <div class="row">
      <div class="col3"> ... </div>
      <div class="col3"> ... </div>
      <div class="col3"> ... </div>
      <div class="col3"> ... </div>
    </div>
  </div> 
</div>
Nested grids do not have to be equal widths. Just have each row add up to 12

... unless, of course, you want to intentionally use a partial grid.

Last edited by jerryc; Jan 26, 2013 at 12:17 AM.
  #2  
Old Feb 14, 2013, 09:29 PM
jerryc
 
367 posts · Oct 2012
Florida
Besides the random images at the top of the bottom of the content area, the example now has another usage of nested Montezuma CSS percentage based grids.

The left sidebar is 25% of the whole page, using a col3 div. The remainder of the page is 75% of the entire width, using a col9. Inside that col9 is a header at the top. Under the header, the col9 is subdivided into a col9 content area, which takes up 75% of the remaining 75%, and a col3 right sidebar, which takes up 25% of the remaining 75%.

The layout is drafted below (it's not really code).

Code:
****************************************************************
  Left sidebar  |  Remainder of Page 75% of body col9
   col3         |     
  25% of body   |  Header full remainder of page 75% of body
                |***********************************************
		|  Content area                      | 
		|     col9                           | Right
		|  75% of remainder of page          | Sidebar
		|                                    | 25% of 
		|                                    | remainder
		|                                    | of page
		|                                    | col3
		|                                    |
***************************************************************** 
		|  Footer Aligned with Content Area  |
		|                                    |
		|                                    |
*****************************************************************
The basic code for this layout:

Code:
<div class = "row">
  <div class = "col3"> [left sidebar] </div>
  <div class = "col9">
    [header]
    <div class = "row">
      <div class = "col9"> [content] </div>
      <div class = "col3"> [right sidebar] </div>
    </div>
  </div>
</div>

<div class = "row">
  <div class = "col3"> &nbsp; </div>
  <div class = "col9">
    <div class = "row">
      <div class = "col9"> [footer] </div>
      <div class = "col3"> &nbsp; </div>
    </div>
  </div>
</div>

Last edited by jerryc; Feb 15, 2013 at 08:36 AM.
  #3  
Old May 27, 2015, 09:54 AM
CemD
 
5 posts · Apr 2015
hi,
after days of speeding up my site I'm back to design. I like the idea of the full length sidebar. Does give a wider content area in boxed format ?
Well I tried but fail to apply your logic (aim is to have at the right side).
I was assuming this has to be done in index.php.
But below apparently attaches it below the footer:
<div style="background:#777777">

Quote:
<div id="container">
<div style="background:#ffffff">
<?php get_header(); ?>


<div id="main" class="row">
<div id="content" class="cf col12">

<?php bfa_content_nav( 'multinav1' ); ?>

<?php bfa_loop( 'postformat' ); ?>

<?php bfa_content_nav( 'multinav2' ); ?>

</div>


</div>

<?php get_footer(); ?>

</div>

</div>

<div class="row">
<div id="widgetarea-one" class="col3">
<div class = "col9">
<?php dynamic_sidebar( 'Widget Area ONE' ); ?>
</div>
</div>
</div>
site: dinckol.com
Any hint if this is and how doable ?
Also I understand with the grid setting 100% responsive boxed format is not applicable ?!

Thanks
  #4  
Old May 27, 2015, 06:27 PM
juggledad's Avatar
juggledad
 
23,526 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
JerryC hasn't been on the forum since 2013 and as you can see, his suggestions/ideas were not detailed. It was almost like he would tell people what could be done, but not tell them how to do it.

That said, it can be done, but I think there are errors in his code - for example
HTML Code:
<div class = "row">
  <div class = "col3"> [left sidebar] </div>
  <div class = "col9">
    [header]
    <div class = "row">
      <div class = "col9"> [content] </div>
      <div class = "col3"> [right sidebar] </div>
    </div>
  </div>
</div>
I beleive the
HTML Code:
 <div class = "col9">
    [header]
    <div class = "row">
      <div class = "col9"> [content] </div>
should be
HTML Code:
 <div class = "col9">
    [header]
    <div class = "row">
      <div class = "col6"> [content] </div>
since you are creating a row in the '9' columns so try making your index.php look like this
HTML Code:
<!--<div id="container">-->
<div class = "row">
  <div class = "col3"><?php dynamic_sidebar( 'left' ); ?>   </div>
  <div class = "col9">	<?php get_header(); ?>
    <div class = "row">
      <div id="content" class="cf col6"> 
      		<?php bfa_content_nav( 'multinav1' ); ?>
		
			<?php bfa_loop( 'postformat' ); ?>
		
			<?php bfa_content_nav( 'multinav2' ); ?>

      </div>
      <div class = "col3"> <?php dynamic_sidebar( 'right' ); ?> </div>
    </div>
  </div>
</div>

<div class = "row">
  <div class = "col3"> &nbsp; </div>
  <div class = "col9">
    <div class = "row">
      <div class = "col6"> <?php get_footer(); ?> </div>
      <div class = "col3"> &nbsp; </div>
    </div>
  </div>
</div>

<!--</div>-->
note you will have to changet the header.php to only use 9 columns too.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; May 27, 2015 at 06:30 PM.
  #5  
Old May 28, 2015, 02:57 AM
CemD
 
5 posts · Apr 2015
Thanks for replying jd
unfortunately I wasn't able to live up to Benjamin Franklin's wisdom, though I call myself a CIO but my brain is sucked out after reading theories, tutorials about the 960 grid system and my incapability to transfer those information into a successful result (a little embarrassment for a CIO)

I know this aint a theme for me as any little change may have a big impact, though it's flexible - but for developers.

I give up for now but can't depart yet as I spent to much time and energy to improve to my gusto ( at least site speed is very good now).

again thx I may return to this challenge after soaking my frustration with beer

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Byline on Category Page has a percentage sign after the year. studio435 New Versions, & Updating 2 Oct 26, 2012 12:22 PM
moving and grids? richard-hards Atahualpa 3 Wordpress theme 3 Aug 8, 2012 09:17 AM
Help editing nested comments ElectroTorials Atahualpa 3 Wordpress theme 4 Feb 7, 2011 05:50 AM
Background Colours in Nested Replies bstewart23 Comments, trackbacks & pings 0 Jan 2, 2009 05:54 AM


All times are GMT -6. The time now is 07:54 AM.


Powered by vBulletin® Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.