From 9fbae00333632d1df9fa075fd580ac70e5dd88fd Mon Sep 17 00:00:00 2001 From: José Mota Date: Thu, 26 Apr 2012 23:40:52 +0100 Subject: Convert two posts to Markdown. --- ...x-grid-on-top-of-full-range-background.markdown | 80 ++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 _posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.markdown (limited to '_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.markdown') diff --git a/_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.markdown b/_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.markdown new file mode 100644 index 0000000..052c1d4 --- /dev/null +++ b/_posts/2009-01-07-the-960px-grid-on-top-of-full-range-background.markdown @@ -0,0 +1,80 @@ +--- +layout: post +title: The 960px grid on top of full-range background +tags: [ design ] +published: true +--- + +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. + +This accomplishment has been unveiled to me through three of my favorite +websites out there: [SimpleBits](http://simplebits.com), +[Viget](http://viget.com) and [OnWired](http://onwired.com). 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 _skeleton_ here: a simple header, a navigation +bar, a main body and a footer should do the trick. So here's my procedure: + +Step 1 +------ + +Create the container div around. + +{% highlight html %} +
+→ Skeleton goes here. +
+{% endhighlight %} + +This is helpful as I mentioned in order to set its width to 960px right there. + +{% highlight css %} +#container { width: 960px; margin: X auto; } +{% endhighlight %} + +This is a very basic approach and it's a good one if you want to implement a +30px padded box like [Paul Boag](http://boagworld.com) 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. + +Step 2 +------ + +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: + +{% highlight css %} +#header { background: #xyz url('path/to/background.png') repeat-x; } +{% endhighlight %} + +Step 3 +------ + +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: `#container > div > div { width: 960px; margin: 0 auto; }` 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. + +Without the +child div's it would look like this... + +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. -- cgit v1.2.3-54-g00ecf