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, 0 insertions, 39 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 deleted file mode 100644 index 5934ee2..0000000 --- a/_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -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. |