diff options
Diffstat (limited to '_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.html')
| -rw-r--r-- | _posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.html | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.html b/_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.html new file mode 100644 index 0000000..5934ee2 --- /dev/null +++ b/_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.html @@ -0,0 +1,39 @@ +--- +layout: post +title: The 960px grid on top of full-range background +tags: +- Design +status: publish +type: post +published: true +meta: + _edit_last: '1' +--- +I have been putting myself to test on a client project, regarding aesthetics. I have used "The Grid" in other situations but not in this way. I have learned how to accomplish grid balance on top of full-range background... again, the hard way. I use this approach in this very blog so you should realize its result already. + +<!--more-->This accomplishment has been unveiled to me through three of my favorite websites out there: <a href="http://simplebits.com">SimpleBits</a>, <a href="http://viget.com">Viget</a> and <a href="http://onwired.com">OnWired</a>. I know a lot of other websites that use this but these really caught my special attention. If you see three homepages, all of them use full-range backgrounds and yet they use the the 960px grid. I wanted that richness in my projects and so I gave it a try. Before I deepen into the procedure, i must say it's always good to have a container/bucket div instead of acting directly over the body element for cross-browser compatibility. I have tried it and IE 6 didn't like it very much. + +We are admitting a simple <em>skeleton</em> here: a simple header, a navigation bar, a main body and a footer should do the trick. So here's my procedure: +<h3>Step 1</h3> +Create the container div around. + +<code><div id='container'> +→ Skeleton goes here. +</div></code> + +This is helpful as I mentioned in order to set its width to 960px right there. + +<code>#container { width: 960px; margin: X auto; }</code> + +This is a very basic approach and it's a good one if you want to implement a 30px padded box like <a href="http://boagworld.com">Paul Boag</a> for example. That way you save further implementation and get a clean shot at the grid. However, if you plan to use full-range backgrounds like I did then you'll have a little more work. +<h3>Step 2</h3> +Don't set any width for the skeleton div's so they default to 100%. Now you're ready to set each one a background (perhaps you'll have a repeat-x option or an attached one merging to the background color). Now each div gets it's own background, which is what we want. For the header, it would be something like: + +<code>#header { background: #xyz url('path/to/background.png') repeat-x; }</code> +<h3>Step 3</h3> +Place a single div child inside each skeleton div. All of the content should go inside these child div's. Then, you can set each div child the 960px width like this: <code>#container > div > div { width: 960px; margin: 0 auto; }</code>This tells us the div's inside the skeleton div's get affected. That's why I'm saying every piece of content should go inside the child div's, while the background goes outside. +And you ask why not setting the default width to the skeleton div's itself? Well, you can do that but let me show me the differences. + +<a href="http://josemota.net/sites/default/files/images/1.jpg"><img class="frame frame-unfloated" src="http://josemota.net/sites/default/files/images/1_.png" alt="Without the child div's it would look like this..." /></a> + +Again, this is a very simple example. You can try lots of other stuff like positioning only some of the div's, background different settings, anything. I hope you learned something from this example. |