Pierre.

Not too nice. You start with WOW! This is just what I need and end with you write horrible code. News flash, all you did was tidy it up. So, he WROTE the code and you tidy it up like a maid and you give him a hard time?!?!? ROFL!

Whatever. Some things i wanted to say about this tutorial:
1. You wrote in the before the code block that we should create files with .html suffix which should be .phtml
2. The one thing with the skin url method which was already mentioned but is still unchanged
and 3.
YOU have one of the worst code styling ever.
What i wrong with you opening a new php tag for each line of your code? I once say a php software which echoed each an every line of html in a single echo. This was worst and i thought it would never happen to me again but now…
I fixed the code and added some comments to it + some indention.

And here it is: http://pastebin.com/6ct87kxh

Thanks for your post anyway. This is a great thing and i really apprechiate your work :)

Greetings
func0der

The <div class="category-box"> groups together the image <div class="category-image-box"> with the text <div class="category-name">

So if you use the css float:left; inside styles.css (/skin/frontend/yourskin/default/css/styles.css) you will effectively place the group left aligned, whereas the next group is placed immediately to the right (left adjusted) – and so on. When there is no more room left on that row, the next box will fall down the second row. Example below also define a specified width so every box is the same and all columns will be aligned. You should also consider defining a specific height as well and some margin and maybe a nice background image:

.category-box{
width:170px;
height:200px;
margin-right:6px;
float:left;
}