Most of you might already know that if you create your pages using CSS, you need to switch off ‘slice-mode’. Slicing and tables are yesterday’s news if you are a web professional. I guess I don’t have to explain why, so we move right onto the practical question: How did I start converting my blog design? First you need to analyze your design and define the areas that will be converted into a container div using an ID or a class.
Defining the main container divs
Dividing the page into the main areas is where it all starts. For my design I have 2 big areas: the footer and everything above the footer. These 2 div containers are called : #footer and #wrap (see image below). The last one contains a lot of other containers. That’s why I give it the logical name of “wrap”, acting like a wrapper around other containers. This big wrapper is needed to keep all the containers together. If I would leave this one out then the boxes would move when you resize your window smaller then my layout. This can of course cause a neath effect, exactly what you are hoping for. A perfect example is Simon Collison’s weblog. My design however makes it less perfect to do that. A wrapper container is also needed if you like to have a centered layout. So when you resize your window the layout stays centered. In this case everything is wrapped, the footer as well.
How I divided the wrap area
Let’s take a look at how I divided the wrap area. First I have the header box with the navigation stacked on top of it using an absolute position. The header uses an image replacement technique (using the CSS text-indent property to shift the contained text outside the window). The navigation uses a special navigation matrix technique which I will explain in a later article.
The main container divs
Below we have the content area, which is a again divided into primary content and secondary content. Both boxes use a float:left style. At the bottom these floats are cleared using a hidden horizontal rule which is wrapped in a div with a background image (the bottom rounded corner). To the left there is the wrap-sub container which is also floated left. At the bottom we have 2 other left floating containers: approved and wrap-alt. The reason why there aren’t 3 separate containers is because the “Upcoming events” flow over the entire width of that box. Secondly, it’s my intention to create a smaller layout version that works on smaller screens. This would mean that this container will flow right under the approved container.
As you already have noticed, I use 2 types of layout: one layout where the “previously”, “search” and “what’s cookin” area appears under the header and one where this area is pushed to the right. I created 2 classes to be used in the body element: small and wide. These are the 2 classes that make the difference in the CSS. The rest is a matter of reusing the boxes and elements but in a slight different order.
Defining the inner container divs
Now that the most important analyzing and dividing is done, let’s have a look at the inner areas. First there is the box where you have the article. This box uses a class because I use this same class more then once on other pages, such as the archive page that shows the articles of a certain category or month. Below is the category box which holds 2 left floating lists. To the right there is the “previously”, “search” and “what’s cookin” content.
The inner container divs
And again to the right there is the Flickr box. Below you have “Veerle’s art” and “Art eleswhere”. In these 2 boxes, another div with a negative left margin is nested to achieve the overlapping shadow effect on the images of the art. Last but not least are the boxes with music, books and events wrapped in the #wrap-alt container. “Music”, “books” and “events” are all left floated.
Since there is so much I can talk about on how I created my templates, I decided to spread it over 2 or maybe 3 articles. In a next article I’ll go into detail on how I created certain parts of the (home page) template. Stay tuned! 🙂