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.
Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS. The data of tables can be boring so all the more reason that we need to attract attention to it and make it as pleasant to read as possible. Presentation and design with some basic accessibility rules in mind is the way to go.
font-family: "Times New Roman", Garamond, serif;