Took me a while, hope you like it…

Here’s a write-up on how I got here, from the ground up.

Wordpress is a tool for creating blogs. You can either set up a blog that Wordpress sorts out for you, by creating an account at Wordpress.com, or you can download the code from Wordpress.org and host it yourself, which is where this site started.

Then you find yourself a suitable host and a domain (I went with Webfusion, who do both), and upload to there. Once you’ve uploaded the code, you can get a basic site up and running in minutes. There are lots of free themes you can download to transform to overall look, but you can also mess about as much as you like with code, and come up with your own design. The code itself is formed of a MySQL database, with PHP to process the data and format the HTML, and CSS to make it look nice.

I quite like the design of the Doctor Who fansite Outpost Gallifrey, so I used that as a reference.

The layout is very tabular, and looking at the HTML behind it, they actually use HTML tables. However, I wanted to try and steer away from relying on HTML tables for a layout: the more I read up on it, it seemed that using tables is not the best way to lay out your site. Instead, the new standard is to use the CSS tags float, position, clear, etc.

My HTML and CSS wasn’t that strong (the last time I had a go in 2001, I came up with the original pinksy site, which didn’t even get published). So I searched around on the net for a decent tutorial, and came across HTML Dog. I still haven’t got beyond the intermediate lesson, but I’ve picked up enough to get this far.

I bought a book for this: Build your own Database Driven Website using PHP & MySQL.

To be honest, I’ve not really got very far with itI’ve now gone through most of this book, but you don’t need a great amount of PHP knowledge anyway. It is a good book though - it shows you how to build a site like this without “cheating” with something like Wordpress. I looked through a lot of PHP and MySQL books in Waterstones, and read lots of reviews on Amazon, but I’d definitely recommend this one.

Armed with very little PHP or MySQL knowledge, it’s easy to knock up the “New Posts” and “New Comments” sections (see left) without needing a single Wordpress plugin.

I followed a couple of tutorials to work out the 3-column layout. I started off with a 2-column design, following this tutorial at the 456 Berea Street site, which is pretty easy to follow. I followed another link on there to the “A List Apart” site, to learn how to make all the columns extend to the footer every time: Link. Once I’d got all that, it’s fairly easy to figure three columns: I created a leftcolumn.php file and a rightcolumn.php file, and then use the php “include” function on each page that needs them.

I went back to HTML Dog for this. They’ve got a good tutorial on how to do dropdowns, called “Son of Suckerfish Dropdowns”.

By far the biggest headache is the difference in behavior between the different browsers. If you develop it in Firefox and it all looks fine, you’ll open it up in Internet Explorer, and it’s all messed up. So in the end, I learnt to test every incremental change in three different browsers as I went along: Internet Explorer 6, Firefox 1.5 (and now 2), and Opera version 9. I’ve no idea what it looks like in Safari (the Apple Mac browser), so perhaps someone could let me know!

There’s still a few problems I’m getting in Internet Explorer.

The menu bar doesn’t line up properly when you expand it, seemingly because the header link isn’t left-aligned, but centered.

This isn’t a problem in Firefox or Opera.

And then you get this stupid double margin at the bottom, between the last post or “Older stuff” button, and the footer…

…in Internet Explorer…

…but not in Firefox or Opera

But the bug that does my head in most is best demonstrated by seeing for yourself. Open up this page in IE6 (this might be alright in IE7 - haven’t tried it yet), and scroll down to the two pictures just above this paragraph. Notice that the one-pixel left and right border is missing? Scroll up and down a few times, and it may or may not be there. Now refresh the page, and it’s there. Scroll about again, and it’s gone again!. How crap is that?! It’s something to do with how IE6 renders floating images, but I’m no expert.

To be honest, I don’t know if I can be bothered to figure out the hacks to fix any of these - just get a better browser like Firefox.

Anyway, that’s it. Have a play around with it, and let me know what you think…