You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Apr 24

The XHTML/CSS template phase of my new blog, part 1

2006 at 02.06 am posted by Veerle Pieters

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

defining 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

defining 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! :)


46served

gravatar

1

permalink this comment luxuryluke Mon Apr 24, 2006 at 02.31 am

This is a brilliant writeup. Thanks for this!


gravatar

2

permalink this comment Prem Mon Apr 24, 2006 at 03.19 am

Lovely Post. Thanks Veerle


gravatar

3

permalink this comment Thierry Tardif Mon Apr 24, 2006 at 03.29 am

As usual, another great post!

Thanks


gravatar

4

permalink this comment Mathew Byrne Mon Apr 24, 2006 at 04.19 am

Great post. One of the things I love about designing is picking apart what other people have done and learning from it. You’ve just given us all an interesting view into your layout process.

Great post, looking forward to the next part.


gravatar

5

permalink this comment Mark Forrester Mon Apr 24, 2006 at 04.43 am

I’ve been using table design for the last couple years, now I’m learning DIV design as fast as I can, the benefits are too huge to miss out on!

With help from ZenGarden, Wordpress Templates and sites like yours, it makes the learning process quick and easy.

My blog is my test guinea pig and coming together very nicely.

Thanks Veerle.


gravatar

6

permalink this comment fabien. Mon Apr 24, 2006 at 04.55 am

Very nice & interesting post, as usual.
The navigation matrix technique is very neat.
Merci.


gravatar

7

permalink this comment Robert Mon Apr 24, 2006 at 06.20 am

I begin my day with you, I set Veerle’s blog as my startpage, thank you that you are here for/with as. :)


gravatar

8

permalink this comment Robert Mon Apr 24, 2006 at 06.30 am

us - of course :))

p.s. sorry I learn english by my self with my Pocket Dictionary :)


gravatar

9

permalink this comment Patrick Bouchard Mon Apr 24, 2006 at 09.05 am

Your article really represent the way to make a good css based design. The key is always to keep it simple :)


gravatar

10

permalink this comment vanni Mon Apr 24, 2006 at 10.00 am

Thank-you! great timing. I am working at the moment with another person on a another site, and he wants to stay with table-based. he says that he can’t be bothered with making a site function with all browsers & on all OS’es.  I on the otherhand wish to go with CSS. But I don’t have a comeback to his main concern. And with IE7 coming he says that there will be other issues we will have to contend with. Is there a site that maintains all the cross browser hacks needed to make a css-based design work on all browsers…. this might bolster my position to go with css.


gravatar

11

permalink this comment Andrew Neil Mon Apr 24, 2006 at 01.34 pm

Nice post, but it’s worth noting that DIV tag soup is not preferable to TABLE tag soup.

Where possible try to Style semantically meaning tags with presentational information. For example if you have a unordered list (UL) for a navigation, don’t wrap it in a DIV to position it, just style the UL as block and apply the styles to that.

Consider by way of example some of the DL mark up used for the news box on the (poorly updated) site: www.hullskiandsnowboard.co.uk


gravatar

12

permalink this comment Veerle Mon Apr 24, 2006 at 02.11 pm

@vanni said

Is there a site that maintains all the cross browser hacks needed to make a css-based design work on all browsers…. this might bolster my position to go with css.

My suggestion would be Position is Everything to check, because it’s mostly IE that needs fixing. You’ll also find a page with an overview of IE CSS bugs. And concerning IE 7 well, it will only get better, much better. Just read my article about IE 7 and my new blog. I only need 1 minor fix. My site is very graphical so…

@Andrew Neil said

Where possible try to Style semantically meaning tags with presentational information.

“Where possible” exactly. If you look at my design, you’ll know that all the divs I mention in my article have their purpose and are needed to make this possible. Not sure if you were referring to my design but, I think it’s far from DIV tag soup. My site is very graphical and needs a lot CSS tricks to achieve the perfect result. There aren’t much nested divs too, so there is certainly no DIV soup or anything. And that example that you give is simple to do since it’s less graphical, things get more complicated when you start something like my design.


gravatar

13

permalink this comment Andrew Neil Mon Apr 24, 2006 at 02.22 pm

Hehe, Sorry. I wasn’t referring to your design-which is entirely fair use. I’ve just seen people make the leap from tables to “css” and everything is div this div that. As there were a few comments from people about to take the plunge, that prompted me to post in clarification.

Maybe if I was as focused on my .net compiler MSc revision (exam tomorrow!) I wouldn’t make such meddlesome posts on blogs.

Keep up the good work, I enjoy reading!


gravatar

14

permalink this comment Dragomir Mon Apr 24, 2006 at 05.02 pm

Great post, and a great website.


gravatar

15

permalink this comment Dennis Bullock Mon Apr 24, 2006 at 05.17 pm

This is great information Veerle.  I really appreciate you sharing what went into putting your gem of a layout together.  Thanks…..


gravatar

16

permalink this comment nicole Mon Apr 24, 2006 at 08.10 pm

It’s really cool of you to take such care in sharing this information with us, Veerle. I know I appreciate it. :)


gravatar

17

permalink this comment Matt Smith Tue Apr 25, 2006 at 01.44 am

“all the cross browser hacks needed to make a css-based design work on all browsers…”

There are quite a few problems associated with cross-browser consistency in CSS layouts, but once you get to grips with the technology, it’s not always necessary to use hacks.

I’ve only been in web design for a couple of years, and have only ever designed using CSS - I never had to bother with tables. At the beginning I found myself having to use hacks but now I just adjust adjust the code so that they’re not necessary…

Of course this isn’t always possible, and the need to use hacks is not an indication of bad design - sometimes inconsistency between browsers is simply insurmountable - but I’d say that hacks should be considered as a last resort, rather than an integral part of your development process.


gravatar

18

permalink this comment j. brotherlove Tue Apr 25, 2006 at 03.38 am

Thank you for sharing your proces, Veerle. It’s great to read the reasoning behind your design decisions.


gravatar

19

permalink this comment auxillary Tue Apr 25, 2006 at 09.38 am

Again this post is SOOOO Cool!!!!


gravatar

20

permalink this comment connie Tue Apr 25, 2006 at 10.27 am

thanks! i can’t wait to read more.


gravatar

21

permalink this comment stevie Tue Apr 25, 2006 at 10.44 am

Very cool, thanks for the tips!


gravatar

22

permalink this comment Frederic Tue Apr 25, 2006 at 12.30 pm

brilliant design and brilliant css-implementation - great job


gravatar

23

permalink this comment jan Tue Apr 25, 2006 at 02.30 pm

Thank you for sharing Veerle- when is your book going to be released? (hint : )
You never cease to amaze with your incredible talents and amazing generosity. Not having a graphic arts background myself, I am always trying to learn by dissecting sites: looking at each individual image on a site and the coding. I have never seen that addressed anywhere. There are tons of places to find out how to do web graphics, and how to code, but never the twine meet. Is that something you have addressed? Actually, your tutorial on creating a header for a blog got me started. Again, thank you for sharing your beautiful talents.


gravatar

24

permalink this comment saga Tue Apr 25, 2006 at 04.48 pm

Excellent work!
Thanks.


gravatar

25

permalink this comment kevin Tue Apr 25, 2006 at 08.00 pm

Thanks for the layout Veerle. You make it look so simple, but it’s very effective, and I actually understood your text! Thanks again.


gravatar

26

permalink this comment Sugar Wed Apr 26, 2006 at 12.31 am

Thanks for letting us know Veerle. I’m always on the hunt for other people tips when designing in CSS.

Brilliant article.


gravatar

27

permalink this comment franki durbin Wed Apr 26, 2006 at 10.35 am

Veerle, your transparency in sharing your process is a great tool for all of using using CSS. By storyboarding our process we often discover multiple solutions to interface problems. I’ve often done this type of sketching on my own to approach the design/dev process. It is amazing how many times we design assuming we’ll cut it up one way, ony to uncover a less obvious method once we roll into the CSS stage. It is always enlightening! When the day is over, many of us are visual problem solvers in one form or another.


gravatar

28

permalink this comment Carlo Thu Apr 27, 2006 at 03.13 am

Hi there,
good job Veerle. BTW, yesterday I was trying to explain to my boss the ups and downs of tables vs. divs, without finding any BIG and effective business (= money) reason on that… I mean, I know many of us have found themselves stuck in such kafkian situations, knowing the benefits of something without finding the words to communicate them effectively. All the people reading here are of course aware of the pros of following the standards, but not our bosses, neither our customers and clients…I think it would be a great idea to compile a short business document, written in different languages, pointing out the real commercial and business benefits of our choices. Being a web designer for such a long time, and finding myself still stuck when in need of communicating the advantages of my work vs the mass (see: people not “semantically-oriented” but “table-oriented”) is frustrating.

Anybody interested in the project?


gravatar

29

permalink this comment Mark Bowen Thu Apr 27, 2006 at 06.53 am

Hi Veerle,

Just wanted to echo the comments already made here.

Thank you so much for taking the time and effort to archive the process that you took via these very informative articles. Your site, whilst not to everyones design tastes, definitely number 1 in my book though :D is a fantastic example of if I may use the word, Godliness in design.

Your layout, I think is simply unsurpassed and the design flawless. Yes it may not (being fixed width) fit in everyones window perfectly but the way that you have laid it out ensures that the most relevant content is at hand very easily.

This series of articles is one that I will be watching very closely indeed as I have just started working with Expression Engine and CSS and as such every little tip I can get will help.

I currently design a very well known military helicopter magazine and will be starting to create one for Powerboats which, hopefully will knock the competition out of the water!! ‘scuse the pun!! :D

With the Powerboat mag I have been asked to create a website to accompany it and I was first looking at using PostNuke and probably tables to lay everything out.

Now that I have come across your site and looked into Expression Engine I can safely say that I will never work in the same way again!!
You have made me a changed man!!!

ssssshhh…. Don’t tell the wife though!!! :D

To that end, thank you for the exceptionally invaluable insight in to your own personal site and the ways that you work. Whilst they may not be everything to everyone I know that probably thousands of people will be helped out in some way or another so I thank you from the bottom of my heart in advance.

I am really looking forward to the next episode. I feel like I am waiting for the next episode of 24 or lost reading all of this information. You big tease!!

Please keep up the exceptionally great work and PLEASE bring out a book. It would be fantastic!!

Best wishes,

Mark


gravatar

30

permalink this comment Scott Thu Apr 27, 2006 at 09.00 am

I look forward to your next installments of this article. If anyone hasn’t told you already… you should consider authoring / co-authoring a book ;-)


gravatar

31

permalink this comment Michelle Thu Apr 27, 2006 at 03.05 pm

Hi!

I’m a journalist, but love to learn about photoshop and HTML. Now, i’m on the CSS Hype. I keep tracking websites that can help me out with news and tips.

I’ve done a layout for a friend’s blog and tried to use a calendar, as you did to display the date. But it works only for the first post. I’ve tried many diferents combinations in my code, but still doesn’t work. Is there any special line i need to put for it to work?

Thank you!

Brazilian regards,
Michelle


gravatar

32

permalink this comment Veerle Fri Apr 28, 2006 at 06.20 am

@Michelle, does your blog work with a blog system (pMachine Pro, Expression Engine, MoveableType, Wordpress…)? It sounds like it doesn’t. To let the calendar work on every post you need such a system.


gravatar

33

permalink this comment Kaligram Fri Apr 28, 2006 at 08.23 am

Great, Great, I’m crazy about this blog…. This post is fantastic


gravatar

34

permalink this comment Hymy Sat Apr 29, 2006 at 03.57 am

Great article. I am first time here. I am motivated after read this post and I will be trying my actual TABLE manners replace by DIVs. Thanks, I will return here every day. Greeting from lovely Slovakia :o)


gravatar

35

permalink this comment Erwin Heiser Sat Apr 29, 2006 at 09.31 am

@Carlo
actually quite a few of these articles already exist.
The Business Value of Web Standards,
The Business Benefits of Web Standards and Developing a Web Accessibility Business Case for Your Organization: to name but a few. Happy reading!


gravatar

36

permalink this comment bunsco Sun Apr 30, 2006 at 10.45 am

Hi

im a newbie and find this one of the best css portholes out there, great design and generousity with the info.

but can someone here explain how the shadows are done, Veerle eludes to it, but being a newbie i need a bit more concise explanation, i.e: which div has the shadow,how its nested etc.

thanx to any that can help

and thanx to Veerle for this excelent blog


gravatar

37

permalink this comment Jenny Mon May 1, 2006 at 01.00 pm

oh wow. i haven’t been here in a while and now you have a new layout. it’s hawt. and i love how you have it setup. i would love to setup my site like this. but my html/css skillz have been sucked up into oblivion. xD it looks really nice tho and i’m gonna be reading thru all this to learn from one of the greats !!


gravatar

38

permalink this comment CK Tue May 2, 2006 at 07.51 am

Hi,

Veerle, nice article. Would placing the footer inside the the #wrap matter?


gravatar

39

permalink this comment Veerle Tue May 2, 2006 at 11.31 am

CK said:

Would placing the footer inside the the #wrap matter?

yes, the difference would be that the footer isn’t centered over the entire browser window. It would also mean that the footer background doesn’t span over the entire window. It would just stop at 995 pixels.


gravatar

40

permalink this comment CK Tue May 2, 2006 at 12.05 pm

Hi,

Thanks, had I looked at the footer, it would have saved the question. It was 6AM state side, before coffee, many pardons.


gravatar

41

permalink this comment Mike Smullin Thu May 4, 2006 at 08.07 pm

Very clever using the HR to clear and to display the round edge. I love it! :)


gravatar

42

permalink this comment Michel Bozgounov Fri May 5, 2006 at 06.56 am

Hey, Veerle!

Nice post!

I am working with XHTML/CSS for years already, and studied the basics by examining other designers’ websites…

Now you explained everything so cleverly and in such detail… so if I would be *starting* right now, I could just start by your “design developing explained” :)

Thanks! Good job! :)

Will be there part III? ;-)


gravatar

43

permalink this comment Awarnach Wed May 10, 2006 at 03.16 am

Hi Veerle, what about printing your website? Ever tried? You can use CSS for that, but for me: I still haven’t found a nice and easy workaround for the problems I stumble across (e.g. when using a fixed height for a DIV in combination with overflow:auto)


gravatar

44

permalink this comment Steve Wed May 10, 2006 at 11.33 am

Hi Veerle,

Your posts are, as always, quite helpful.  I really appreciate sharing your breakdown of your process - it can be daunting to start a big project but seeing your mechanics is comforting. 

one question i have is regarding the use of the HR to clear the content.  I’ve tried doing this, however for whatever reason, my div containing the HR defaults to 32 px….would you have any idea why this is?


gravatar

45

permalink this comment Rene Kleizen Wed May 10, 2006 at 12.42 pm

Very nice post veerle, very clearly and helpful. Keep up the good work


gravatar

46

permalink this comment Ash Thu Jun 15, 2006 at 10.22 pm

HELP! for my blog i’v tried 2 put it so that it has its own scrollbar and height.. i put this in
<div style=“width: 485; height: 700; font-weight: normal;line-height: 20px; overflow: auto;
overflow-x: hidden; border:2px solid #292421; padding: 8px; float:left”;>
~~and it shows in the preview.. but when not on the actual blog.. wat else do i hav 2 put in the coding to make it show?



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist