This site hasn't been updated for a few years. If you're looking for something good and up-to-date, maybe you want to look somewhere else...

About HTML, CSS, PHP and javascript

This is just a few pages to help a few people do the odd thing or two...

I'd recommend the CSS FAQ and the CSS LAYOUTS as well as the top tips below.

A word of warning : this site looks terrible in older versions of IE.

My Top Tips

  • Use semantically-correct mark-up - 'h1' tags for your main header, 'p' tags for paragraphs, 'ul' or 'ol' with 'li' tags for lists (including menus), etc. Use tags that are related to what they contain.
  • Don't use tables for layout - that's not what they're for. Use CSS instead (-examples-).
    • Tables make your code ugly and difficult to read - especially when you start nesting tables and doing things like using spacer gifs to hold the page together.
    • Tables increase your markup by a lot and so make download times slower.
    • CSS really isn't that difficult once you learn how to do it, and when you've learnt enough, life becomes a lot easier.
    • With tables, adding content to one column can cause all the columns to stretch and you have less control over how and where each element on the page is positioned.
    • Tables make the output of screen readers sound very strange.
  • Use relative positioning and floats for your layout - not absolute positioning. Also, don't position relatively-positioned elements with 'top' and 'left' - use margins and padding instead. (-more-)
  • Remember that different browsers have different default values for different CSS properties.

    You can iron this out a bit by starting your stylesheet with this: CSS
    * {

  • Use a complete 'HTML 5' DTD on the first line of every page. This tells browsers that you're trying to write code that complies to the W3C standards. If you don't include a complete, valid DTD, you will have less cross-browser compatibility.

    <!DOCTYPE html>

  • Use a good text editor to write your pages.
  • Use external CSS and JS files - it makes life a lot easier.
  • Use PHP includes for things like menus - you don't want to have to change your menu on each page every time you update your site.
  • Check your HTML by using the W3C Markup Validator and check your CSS with the W3C CSS Validator

Here's a style switcher:

If you have anything constructive to say, I'd love to hear it. Also, if you think there's something wrong with the site - do me a favour and let me know. You could either send me a message or leave a comment on one of the pages (though, being a busy person, I can't promise to get back to you. :( )



2005-01-14 Michael Updegraff says :

Site Comment * Very Crisp, Clean and visually inviting.

2005-01-14 BonRouge says :

Well, thank you very much. I hope it's helpful too.

2005-01-30 miloko says :

nice site, very informative.

2005-02-20 Kard says :

As a guy that used to herald table-page-layouts as the mother-of-all methods, and finally (Hey, better late than never) exploring css for something other than text formatting, THANK YOU!


2005-02-20 BonRouge says :

Nice one.
Have you ever checked this out? It's an educational little thing called 'Why Tables For Layout Is Stupid'.

2005-03-03 Bob says :

Nice, very nice indeed. Except your menu is cut off at the bottom, last link I can read is Hi-lite anchors. =P Keep up the good work, eh?

2005-03-03 BonRouge says :

Ah! Thanks for pointing that out Bob. I knew that might be a problem. It's the danger of using position:fixed. My menu is position:fixed for Firefox and position:absolute for IE. I'll sort it out now...
(** changes the font-size and line-height**)
...There - done.

2005-07-15 Shep says :

If I were ever to compile a page of the many little possibilities of CSS and methods for layout it would hopefully contain info as useful as this! Thanks for your work.

The background image is, however, very distracting while scanning content.

2005-07-15 BonRouge says :

Thanks for the positive feedback.
Sorry you don't like the image. I'd suggest trying the other stylesheet, but it might not be much better for you, to be honest... I'll have to try a sake image, or maybe a vodka one - they're clear and maybe less distracting...

2005-07-20 LinuxPenguin says :

Awesome site, Bon.

Hope you dont mind me snaffling a couple of the layouts for use in my upcoming forum software?

Oh, one error btw, the doctype having spaces in the URL makes tidy warn.


2005-07-21 BonRouge says :

Glad you like the site. Feel free to use anything that might be useful - that's what it's all here for.
Thanks for pointing out the spaces in the DTD (*fixed*) - I don't know how they got there. To be honest, I had noticed them, but I didn't think they were doing any harm - in fact, I'm still pretty sure they weren't, but you know, if it makes Tidy happy...

2005-07-28 LinuxPenguin says :

Well Tidy is a little OTT, the actual warn was that they werent escaped.

FF didnt seem to mind, and it was still in compliance mode, so it was harmless.

What would be nice to see is an explanation of how you put together the site (this fixed menu and background image creates a pleasant effect).

Sort of reminds me of one of Meyer's layouts, let me find the link

Here we go

Obviously your menu is fixed and uses a different effect, but it kinda reminded me of it.

Anyway, keep up the good work, ever need anything, look for my contact details at Devshed.

2005-07-28 BonRouge says :

I like the background too and any favourable comparison with Eric Meyer is more than welcome.
The menu's a tricky thing because I don't want to use a suckerfish menu - I'd prefer everything to be there on the surface - but I can't have too many items on the menu because it's fixed and if it's too long, those with 800x600 resolution screens won't be able to see the bottom (as was mentioned above).

I'll do what you said some day - put up a page about how the site itself works - but not soon because there are other things I need to change on this site and because I'm reeaaalllyyy busy at work.

I actually started putting the site together to learn about php and MySQL which I use a lot here (the HTML, CSS and javascript of the demo pages are kept in a database). You'll notice that I haven't used any software like Wordpress or whatever, so the comment system, for example, is not so great. That's because I wanted to do it all myself to try to get to grips with it. I kind of made my own (pretty buggy) CMS. I still have problems with the php that I can't fix (maybe you're the guy to ask...?), but on the whole, I'm reasonably OK.
Besides the php, everything else is pretty straight forward and I've probably explained it all on these pages somewhere already (though maybe not directly).

2005-07-28 LP says :

Like I said, any help, get in touch...

The menu thing I will have a think about for you.


2005-07-31 A certain webmaster says :

Hey Bon,

I found most of the info on CSS kicking butt here. although you said that CSS isn't very difficult the use once you learn how to use it. You should make a tutoreal on how to use CSS! that would be great. thanks for everything.

visit my website

2005-09-10 James says :

Hey Bon, made the move to Opera as my browser and the beer background is behaving a little strangely when you scroll the comments. I believe it is an opera bug, but you may want to take a look at it.

Love the new update on the current page, I've left you some updated php there if you check it.

Take Care and thanks for the effort you put in

2005-09-10 BonRouge says :

Are you talking about the way the white background appears behind the comments when you hover over them? I actually put that in there as someone had said (up there, I think ^^^) that it wasn't so easy to read the text with the beer there. If you look around the site, you'll see I added it to paragraphs and the comments.
Do you think it's a bad idea? I guess you must do as you think it's a bug. I wasn't so sure myself to be honest - I like the background, but I also want people to be able to read the text easily. (I'm looking in Opera now by the way, and I don't see any bugs).

2005-09-10 James says :

Yup, thats exactly what I meant...

And I reported it in the opera forums...

shrug well if that's the intended effect...

It just seemed unnatural, if you know what I mean?

I have no problem reading the text with the image there, by the way.

Anyway, sorry, didn't realise it was intentional, just seemed a little odd.

Take Care

2005-09-11 BonRouge says :

Well, as I said, I wasn't 100% sure about it - I did find the flashing a little annoying... Anyway, you've made my mind up for me and I've removed the hover effect. How about in the 'Top Tips'? When you hover over some of them, extra text appears... Good effect or bad? What do you think?

2005-09-11 James says :

That's been here since I first visited.

At first I didn't like it, but its a good way to get the information across, my only gripe is the way that it doesnt unhover while you're over the popups themself. Just seems more natural they should go when you hover off the link. I figure for the DOCTYPE one that would HAVE to stay, so people can copy it, though...


Take Care

2005-09-11 BonRouge says :

Again, thanks for the feedback. You're right - the Top Tips have been like that (with the hover effect) for a long time, but I'd never asked anyone what they thought of it before. I'm open to any ideas and suggestions.
Right, so what I've done, is basically what you said - the extra info will go when you hover off the point - except for the DTD one which people will be able to copy.
I've also come up with another idea - if you click on a paragraph or the comments now, the white background will appear. I guess this is better than the hovering thing (although people won't know unless they happen to click on the page - or read this...)
p:active,.comments:active {

2005-09-11 James says :

Good idea, Bon.

(Sadly I can't appreciate it until I recompile epiphany or install opera on this thing (its on my windows, not on linux)).

Opera is oging to be put on now, Im sick of ephy rendering dodgily. Anyway, good stuff, Bon.

2005-09-11 James says :

Ah, opera installed.

Love that new clicky effect Bon, best of both worlds.

Take Care

2005-09-16 James says :

Sake theme...

Not so keen. I have it set to wine. The black(grey? can't tell, it's late) text on the black symbol is difficult to read. Im not keen on the underlines i nthe links of the grey-background headers of each comment, and i think they could do with a little padding.

I am viewing in opera so I dont know what it looks like in ff though. Oh and for fonts may I suggest something like Lucida Console? Love that it's fixed width though smile

2005-09-20 bushie says :

Hasn't been that long since I visited BonRouge, but some changes I see which look nice. I was a bit shocked to hit the sake page first up after expecting to be faced with a beer. Anyway, seeing I'm sitting here having a red, it was only appropriate that you have a page theme to fit the mood. Nicely done mate...


2005-12-03 David Mills says :

Your ideas are fine. Your appearance is ugly. LOOK at professional things. One notices the fonts and layout and such on your page; it outweighs the content substantially. Obviously, that's a no-no.

2005-12-03 BonRouge says :

Wow! David...
What can I say? I'm not selling anything here - just trying to help a few people out...
You know, I'm a sensitive guy, and that hurt... frown

2005-12-15 Bryan Dreyer says :

Hey Bon:
Long time reader, first time poster smile

I just wanted to say thanks, I always refer to your page (and to code made using your tips) when I start off on a new design... My favorite is the "fill height" method to make a page take up the whole screen even without enough content... I'm curious though, I added a div between the clear footer and footer divs (so I could put a date/time stamp in the lower left corner), and it didn't really behave as expected... I thought it would show up "above" the footer, but it's actually displayed next to it (like I was going to make it do), but it did it automatically. It was kinda strange. Have a look

2005-12-16 BonRouge says :

Glad you find the site useful.
Here's a quick explanation of what's happening on your page.
I hope it helps. smile

2005-12-19 Bryan Dreyer says :

Thanks BonRouge, makes sense now!

2006-02-02 BonRouge says :

Thanks Ben - I like that one too. smile

2006-03-09 Keith says :

Hey Bon,
I seem to be spending more and more time here, lots of great resources. I have learned alot. I like how the background glass stays with the page as you scroll down. I gotta figure that one out

2006-03-09 BonRouge says :

That one's easy. It's in the FAQ. smile

2006-03-23 Jfm says :

Nice site, I like it. I'm planing on moving away from the old html tables for positioning, and already have started learning more advancedish css smile

Thanks for this awesome site, it has, and will teach me a lot smile


2006-03-28 Keith says :

Hey Bon just stopping by to say thanks to you I am well on my way in using CSS and to thank you for your help when I was stuck in the mud. This site rocks

2006-04-03 Aziz says :

you wont know,,, how many lives u saved

2006-04-04 BonRouge says :

you wont know,,, how many lives u saved
I'm sorry, but is this for real? I've had a lot of strange comments recently, I don't know if some of them are some kind of spam, an honest comment or just taking the piss...

2006-04-08 Rob says :

damn, this site is ugly. You could at least stick to the same fontsize, so this site gets readable.

2006-04-09 BonRouge says :

Gee, Rob. Thanks for that. Nothing like a kick in the teeth to start your day!
I tell you what, when I get some free-time, I'll make another stylesheet with as little style as possible. How about that?

2006-04-09 Keith says :

For what it is worth Bon I have no problem with the fontsize and I wouldn't change a thing.

2006-04-09 BonRouge says :

I see no problem with the font-size either, but I'm wondering why Rob's so upset? Does he have a very big resolution or is he vision-impaired or something? (Actually, I use a large resolution, but I still have no problem...)
Fortunately, if you use a good browser (i.e. not IE), you can increase the font-size quite easily.

2006-04-12 Keith says :

Hey Bon I was just browsing your site and I just wondered if you ever thought of maybe adding a full explanation on the definition of a liquid and fixed layout and what would be the main advantage of using one tpe over the other.Like an advantages/disadvantages section relating to the types of layouts

2006-05-05 TerryGirl007 says :

Love the site, love the advice.. do you do freelance work? I'm looking for a good designer that knows CSS and PHP. If so, feel free to shoot me an email thru the web dev forum @ TerryGirl007.

2006-06-09 hopeful says :

Compliments! Where were you so far? Let yourself be known and thanks for all the help

2006-06-13 John says :

Thank you for the wonderfull site. As a newbie to all things CSS, your site has been a tremendous help! Please keep up the great work and again, you have my thanks. smile

2006-07-10 Richard says :

You have a great web site!!!

2006-07-11 Tore says :

Thanks for lots of nice and simple javascript examples. Usally Javascript can be so difficult to read since there is so much code there.. But your examples really show the code that matters. Nice.

However, your tip "Don't use tables for layout" should be moderated to "Usally do not use tables for layout". Due to IE there are stil som layout which are only possible to do with an table. Such as having ONE line with left aligned, centred and right aligned text.

2006-07-11 BonRouge says :

Glad you like the site. I have to disagree with your 'however' though.
Here's a very quick example of how you can do what you said there without a table.

I hope that helps.

2006-07-14 Rob Moll says :

Every time I start a new site I come here and get the basic layout.

Thank you!

2006-08-16 Ultimater says :
Avoid empty nodes. The #clearfooter DIV can be avoided by adding zoom:1; overflow:hidden; to the #content DIV and adding clear:both to the #footer DIV.

2006-08-16 Brad says :

Just found your site with the help of the Ultimator. Excellent pages and templates. You almost make me want to learn PHP, but I am not sure my mental stability will take it. Have you ever submitted anything to CSS ZenGarden?

2006-08-16 BonRouge says :

I totally agree about the empty nodes and I've never really liked that empty clearfooter div. What you suggested wouldn't actually work however, as the footer is absolutely positioned, which means that it won't clear floats. You did make me start thinking though and I spent some time getting rid of those empty elements. Let me know if you see any problems now.

I'm glad you find the site useful. You really should learn php - it is amazingly useful.
No, I've never submitted anything to the ZenGarden. As you can probably see, I'm not really much of a designer...

2006-08-17 Ultimater says :

Why is the page using the shift_jis charset?
Other than that, the page is looking good. I like your usage of the :after pseudo-class instead of the empty node.

2006-08-17 Ultimater says :

Actually... now that I think of it, what happens if your footer contains:

<div id="footer">
<p><a href=""></a></p>
<p><a href=""></a></p>
<p><a href=""></a></p>
<p><a href=""></a></p>
<p><a href=""></a></p>

There is a major render difference between browsers...
Can start off by using min-height:80px; instead of height:80px; to serve Firefox so the background continues when the contents overflow.
Also as the user resizes the page's text, the footer doesn't move downwards yet instead pushes the contents upwards.... It should trigger a vertical scrollbar. Hmm.... how to revise..

2006-08-18 BonRouge says :

I guess one way to resolve that would be to use 'em' instead of 'px' for the positioning. In that way, the size of the footer and the bottom padding of the inner-wrap div would grow with the font-size. However, I'm not about to go through the layouts and change it all to use 'em' instead of 'px'. Mostly because I just can't be bothered. Hopefully, some users come across this little conversation we're having and implement that change for themselves.

Oh, and back to the earlier question about the character set... It was an oversight on my part. I'm in Japan and the most commonly used character set here is 'shift_jis'. I started with that on a few pages without really thinking that the page won't be in Japanese. I hope that clears that up.

2006-08-23 Arnis says :

You have a great web site.
Thank you.

2006-08-27 Brad says :

You know, after looking into PHP, its no more difficult than SSI is really. I think I will take your advice from 8/16 and go with learning PHP. Thanks for the push, its very much appreciated.

2006-08-27 BonRouge says :

Thanks smile.

As far as including things in your page goes, PHP is similar to SSI, but then it's so much more than that. There are 1001 things you can do with it, and I don't know nearly half of them...

2006-08-28 JD says :

I don't get the (albeit few) negative comments here either. This site is great. Its really difficult to find anything so well explained on the web. I'd never normally leave a comment, but your site has been so helpful I had to break a rule. Thanks.

2006-09-18 Johanna says :

Oops I dropped you an email before I found this box. Never mind.
The site is amazingly useful and very nice to spend time on, thanks to your nice style of explanining things. I managed to find the solution to lots of little problem that I had spent hours on Google to get my head around. Thank you so much and please keep it up!
But one thing: There is no 'About' page here, at least not that I can find! Do you do this professionally or just on the side?
Surely most English teachers wouldn't be able to create a site like this, or even find the time to learn this in the first place.. How did you get into it?

2007-01-26 Sam says :


The Google Search button spans across the entire page - behind the text as I scroll... Just another thing to look at. I'm in Safari btw.

2007-01-26 BonRouge says :

Thanks Sam, I think I've fixed that now.

2007-03-15 Shinta Himura says :

Hello BonRouge! Your site is amazing and I plan on reading through all of it eventually.

Here are a few things I noticed...

On the comment box if i click and hold on the typing areas, a white thing appears behind it (i'm on Firefox)

And the font looks a little odd at such a small size

2007-03-16 BonRouge says :

Thanks for the positive comments.
I put that white background there to make the text easier to read - some people complain about the background image.
Not sure what you mean about the font - it looks fine to me. (I'm using Firefox, too).
By the way, I've just replied to you in HTMLforums.

2007-03-22 Garrett W. says :

hi bonrouge, it's me from htmlforums.
i noticed your "put blue in the message" thing, and it reminded me of a site that once told me about why it's not a good idea to use images with obscure characters for anti-spamming a contact form (since half of the time it prevents even humans).

on my site, i've done something similar to your method on my contact page. similar, but a slightly different approach.
i guess i'm asking what do you think is the best method?

2007-03-22 Garrett W. says :

oh, i guess i could show you my site...

[inserting blue for anti-spam!]

2007-03-23 BonRouge says :

I really don't know what the best approach is. I don't like those picture things either (the ones with the squiggly letters), but I had to do something because my wife was sick of me complaining about the amount of spam I was getting.
I thought this way might be slightly more interesting as you could think of a good way to get the word in your message. It hasn't quite worked like that however, as people are just adding the word at the end of the message (like you did there).

2007-06-04 Alex says :

Hey Steve,

Quick one. Those tips that come up on hover of some of the paragraphs in the awesome intro to your site: are they javascript? I've had a look through your tooltip tutorial and it's great, but it looks for the information in the title of an element. I currently use a CSS version of the tooltip that uses span that is display none until the hover state, on which an absolutely positioned block appears. Yours seems very much cleaner and simpler?

Cheers matey

2007-06-05 BonRouge says :

The tips that come up on hover on this page are done with simple CSS. I couldn't be bothered messing around with it for IE(6), so the page looks different there.
The javascript tooltip I have was written specifically because someone wanted to use the title tag but have the text stay up for longer. I also have a CSS tooltip on the CSS FAQ page.

2008-02-13 pk says :

The toc on the left is way too small for me to read, even on a large screen monitor, and when I changed the text size encoding, it got really ugly/messy all over the page.

2008-06-04 Infinity says :

I can see myself using your site to learn my way arounc css and php in particular. Great work!

my only complaint about the page is the fact that it's 5 miles long with the comments. Something that's always been a sore point with me with a lot of Any ideas on how to limit the length of a page? perhaps have comments have pages of their own?

2008-06-09 James says :

Error! If you go to without any query string, lots of PHP errors appear.

2008-06-12 BonRouge says :

Thanks. Fixed it.

2008-07-10 wrinkledCheese says :

I love your site. I've been using it ever since I've found it. The only thing is that there is nowhere right out in front that says whether or not the code on this site is free to use. I know you post on the open source forum so I'm guessing it's the same. I was just wondering if you would require that people using your code _must_ mention this site. Kind makes code ugly when you have comments crediting authors of functions you've modified.

2008-07-10 BonRouge says :

There is no need to credit me for anything (but feel free to do so if you feel like it). smile

2008-08-29 Midnight says :

Lovely site and very clear. It might just be the thing to get me back into my webs after years of depression. Kinda give up. I'll let ya know what happens if your interested.

2008-08-31 Scott says :

Hi Ron,
I am becoming more lost in CSS. You are the only one that has been able to help me make heads or tails out of it. Could you look at my site in firefox and let me know why the box keep floating out of their div tag? Thank!

2008-08-31 BonRouge says :

Are you talking about the footer? You have elements above it that are floated to the left, so your footer is trying to go to their right. A quick fix is to add "clear:left;" to your #footer rules.

I hope that helps.

2008-08-31 Scott says :

Ron that helped. I still have a problem with my area info tag spilling out of my wrapper tag. This only occurs in firefox. Any other thoughts?

2008-09-06 Rami says :

thank you for helping me, i looked all over the web for the div 100% problem but i just found here how to solve it smile you rock.

2008-09-16 SUNDAR says :

I love your site. I have visited MANY TIMES.

2008-09-23 Johnny V says :

Great site and great timing for me. Freakin tables will drive you nuts. Found a layout and learning alot from here. Might just shoot you an email on a quick question but I'll be all set with one. Thanks!

IMO, the font and beer mug are just fine.

2008-10-15 AmmO says :

Great site just found it after going through many other with slow painfull progress.

One quick suggestion, could you possibly produce a JavaScript/php FAQ and beginners guide

2009-02-12 evil elvis says :

This is important. What kind of beer is that? Great site, very useful. I'll post again when I publish using some of your methods.

2009-09-16 Dave says :


Thanks for posting great info. Don't be so sensitive on the design side. Not everyone will like your design. Personally I find the background image distracting but the technique used is a solid one.

The small menu font on the left side is off putting and hard to read. I am not using an unusual screen resolution.

Great work overall and ignore the haters.

Some people appreciate good content.

2010-02-08 Yuriy says :

Very nice site. For beginners also recommend html tutorials

2010-12-27 ryananders says :

Hack again?!

2011-05-06 ben10 says :


2011-09-09 Andrey says :

super tips here. Thanks

2011-09-28 odreki says :

Stop hack the program!!!

Comment form

Please type the word 'life' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url