How to: Nested Percentage Grids
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"> 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"> ... unless, of course, you want to intentionally use a partial grid. |
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:
**************************************************************** Code:
<div class = "row"> |
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:
Any hint if this is and how doable ? Also I understand with the grid setting 100% responsive boxed format is not applicable ?! Thanks |
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"> HTML Code:
<div class = "col9"> HTML Code:
<div class = "col9"> HTML Code:
<!--<div id="container">--> |
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 ;) |
All times are GMT -6. The time now is 09:18 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.