Convert two posts to Markdown.

1 files changed, 80 insertions, 0 deletions

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 %}
+<div id='container'>
+→ Skeleton goes here.
+</div>
+{% 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.
+
+<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.