I can honestly claim I was building web pages back in 1985 and before anyone retorts with “This is before Tim Berners-Lee” let me tell you I was an active member of Micronet800. I was at the beginning of HTML, back in the days when it was just for text. I am ashamed to say that I have only just started trying to use graphics in my website designs which have been functional, not artistic!

My websites have existed to provide a function, not an art gallery for my design skills. Anyway, enough excuses, let me get onto my handy tip that solved my biggest headache.

CSS tutorial
I found an excellent tutorial on how to create a design at csshowto.com. Following their steps, I came up with my own design and created a graphic for my top left logo.

This is the first revelation. A new way of thinking for me. Normally I would have an image of just the logo, but the way to do it for a website is to include everything in the background, such as any borders that might pass through. Probably an obvious thing to do for web-designers. To my mind, I feel the need to be able to change the colour of my borders just by changing a single variable, and not having to rework a few JPGs.

I then struggled with alignment. Did the width measurement include padding, should I subtract the margins? I aligned some using trial and error, but then others fell out of place. It did not help that my CSS editor had a bug that mixed up the order of the margins.

I was on the verge of giving up but then by chance I discovered a setting, and everything fell into place. I have not seen this mentioned anywhere on any tutorial, but it really makes things easy for a beginner, and would probably help the experienced if things start going wrong.

CSS tip
TIP: Add an outline to your ID’s and you can see where they are aligning

In your CSS, add the command
border: thin dashed #0033FF;
Change the colour for different IDs and when you view your web page, it is easy to see where your sections actually are.

When I did this, I could easily see that I had miscalculated a width because I had either included or excluded padding. (If anyone knows of a useful chart that shows the margin, padding, width relationship, I will be grateful). My other big mistake was on my logo, I had allowed 5 pixels of background outside the border but not allowed for that elsewhere. It was so obvious when I saw it with the dashed outline.