DaveJays Blog

The Design of My New Blog

FEB 1st 2007 • 4 Comments

The more designs I do the more I learn, so I thought I'd share a couple of techniques I used in this design that were educational for me. The layout of this blog has taken a long windy road. Originally I intended to think outside of the box and create a completely liquid layout that would expand and shrink the content with the size of the window. Getting the main container divs and everything positioned was not a problem. In fact I have a liquid template that I use, which I plan to post in a later article. But in the end I resorted to a fixed width elastic layout because of the control I gain in the ability to set exact pixel widths of page elements.

Setting the Background Gradient

For this design I decided to make the background fade from a dark blue on the left to a lighter blue on the right. To do this the first thing I had to do was create the gradient. In photoshop I created a square shape with the proper width and centered that on a very wide canvas, around 4000 pixels wide just to be safe. Then just fill the left side with the dark blue and the right side with the light blue. Then all that needed to be done was set it as the background image and set the background-position to center. This keeps the background centered along with the main wrapper div which is also centered. It's a simple trick but I've found it incredibly helpful.

Addding the Decoration to the Left Side

For the left side decoration I didn't want a simple decoration making the width of the content unneccessarily wide. So absolute positioning was necessary to make the browser window ignore it's presence. So all that needed to be done was to set the wrapper element position to relative, thereby causing all the absolutely positioned elements within to be positioned relative to it. So I just set the left decoration to absolute and moved it over the proper amount of pixels.

Then you have a perfectly positioned decoration that won't force the browser window into horizontal scrolling.

That's the main base of my new design. I'll try to go into more detail about some more interesting aspects of the design that proved to be challenging and educational for me. I hope you find it interesting.

posted in: CSS | Design |