I hope this little document is complete. The goal is to explain, in a general way, how I created the markover of leiden.nl, while explaining some of the "tricks" I used. To read the document you should probably have some knowledge of CSS and HTML. Don't worry though, I'll place some pointers.
Of course this was not a business assignment, where you can take some more time to find the most optimal solution, I didn't get paid for it (I did enjoy it a lot though) so I wanted to create the thing as fast as possible. I wanted the whole site to work in Mozilla and Internet Explorer just to show it was possible if you know what you are doing. Fortunately, it worked in Opera and Safari as well. Note that leiden.nl has been updated a bit in a short time leap after I published my version, but that it still "sucks" from a markup point of view. Other goals were using no tables for layout and avoiding the IMG element in "lists of links".
I took about 10 minutes to study the site for structure. I opened the site in Internet Explorer, it didn't work in any other browser, to study the design and content. Quite quickly you notice a couple of lists, a small introduction at the top. A repeating background image at the left (bottom) of the screen (very important) and a larger background at top right (actually that were two images, which I merged in my final example).
You also notice that the arrow images are independent links in their markup. They should be merged with the text of course, as a background image so that the look of the image could easily be changed, for less server hits and a more useable clickable area. (Less bytes as well, of course.)
I started with creating the markup, obviously, since there markup couldn't be used. Not a single bit was appropriate. Fortunately, I could use some fast search and replace actions to fasten the process. I ordered the different block level elements (UL, DL, DIV) in the way they appeared on screen, from top-left till bottom-right. As you can see I have chosen a definition list for the "block of news"; markup is still about personal opinions and I thought that structure was more important here than semantics. All the other choices are rather obvious although some parts could be done better. Next time, I would probably abandon all IMG elements (I used 2). (One more note about the markup, I turned Internet Explorer 6.0 into quirks mode, but that is just something I like to do. It probably could have been left out.)
Styling the document took probably the most of the time (10 minutes study, 20 minutes creating markup, 3 hour styling and a 30 minutes cleaning). It could have probable been done in less time if I hade prepared something. I didn't have any of the images, the colors and other important styling parts. Writing the style sheet itself might have cost two hours at most (it was all pretty straightforward).
The first thing was taking care of the background images, there where two images which needed a special element to be applied on, the left repeating image and the top right image. I applied the former on the body element (which would have created problems with application/xhtml+xml) and the latter got its own 'ie-hack' DIV element at the bottom of the markup being absolute positioned to top-right. (In the most optimal situation, the left images was applied on the root element and the top right element on the BODY element.)
For the lists and "lees meer" links images I used background images, if you don't have an idea how it should work, read tutorial one: Background images for bullets. I'm not sure if I missed something important, probably, but I think that were the most important aspects of the markover (didn't Mark Pilgrim invent that word?). If you have any specific answers you may ask them in the comments. I will try to answer them.
Just a question, you say you created the stylesheet in 3 hours and cleaned it in 30 minutes. If I would have created it (I didn't check your actual stylesheet), I would have spend one hour on creating the stylesheet, 10 seconds to see if it displayed the same in Opera and Mozilla and eliminating possible differences and then two hours to make it work in IE without losing that it works in Opera/Mozilla/Konqueror. How is that for you?
With "cleaning" I was referring to "cleaning my room", not the style sheet. When I build it, I build it for IE and Mozilla simultaneously. I calculated color checking, layout checking et cetera all within those three hours. Actually writing the thing didn't take that much time.
I also didn't have any compatibility problems between Mozilla and Internet Explorer, except for IE not supporting background-image on the root element.
*oops*
But you mistunderstood me as well. :P I didn't mean first to write it and then make it work in IE, but to do it all simultanously where whatever I write quite often doesn't work as intended on IE. Also I think that if you give IE an XHTML Strict Doctype you don't need quirks mode (I actually think you never need it, but with Transitional it applies the faulty box-model).
Why argue for using a definition list for structure instead of semantics and essentially practicing the same principle as the original developers of leiden.nl (tables for structure, not semantics)?
Wasn't lack of semantics the very reason for you to do this remake?
You could have used H4 headings and paragraph elements instead of a definition list, which would have been more simple qua markup, more useful qua accessibility and more semantic at the same time (it simply isn't a series of definitions). The continuing abuse of DL, yet some useful opinions.
One other note: the original leiden.nl displays fine in my Safari. I find the display of your rebuild more subtle and balanced though.
Please add a link to your site's posting guidelines (which explains the validation tech gibberish) in the preview mode of a comment. I had to skip back to follow it and only did so because i had noticed it the first time. It's good usability.