bonrouge
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
* {
margin:0;
padding:0;
} - 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. :( )
Cheers
Comments
#1 #2Well, thank you very much. I hope it's helpful too.
nice site, very informative.
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!
DOWN WITH TABLES! FIGHT DA MAN!
Nice one.
Have you ever checked this out? It's an educational little thing called 'Why Tables For Layout Is Stupid'.
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?
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.
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.
Shep,
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...
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.
--James
James,
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...
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.
--James
James,
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).
Like I said, any help, get in touch...
The menu thing I will have a think about for you.
--James
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
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
--James
James,
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).
Yup, thats exactly what I meant...
And I reported it in the opera forums...
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
--James
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?
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
--James
James,
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 {
background-color:white;
}
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.
Ah, opera installed.
Love that new clicky effect Bon, best of both worlds.
Take Care
--James
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 
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...
Regards
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.
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... 
Hey Bon:
Long time reader, first time poster
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
Bryan,
Glad you find the site useful.
Here's a quick explanation of what's happening on your page.
I hope it helps.
Thanks BonRouge, makes sense now!
Thanks Ben - I like that one too.
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
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
Thanks for this awesome site, it has, and will teach me a lot
-JFM!
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
you wont know,,, how many lives u saved
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...
damn, this site is ugly. You could at least stick to the same fontsize, so this site gets readable.
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?
For what it is worth Bon I have no problem with the fontsize and I wouldn't change a thing.
Keith,
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...)
Rob,
Fortunately, if you use a good browser (i.e. not IE), you can increase the font-size quite easily.
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
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.
Compliments! Where were you so far? Let yourself be known and thanks for all the help
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.
You have a great web site!!!
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.
Tore,
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.
Every time I start a new site I come here and get the basic layout.
Thank you!
http://bonrouge.com/hcf-fluid.php
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.
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? http://www.csszengarden.com/
Ultimater,
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.
Brad,
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...
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.
Actually... now that I think of it, what happens if your footer contains:
<div id="footer">
<p><a href="http://bonrouge.com">bonrouge.com</a></p>
<p><a href="http://bonrouge.com">bonrouge.com</a></p>
<p><a href="http://bonrouge.com">bonrouge.com</a></p>
<p><a href="http://bonrouge.com">bonrouge.com</a></p>
<p><a href="http://bonrouge.com">bonrouge.com</a></p>
</div>
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..
Ultimater,
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.
You have a great web site.
Thank you.
BonRouge
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.
Arnis,
Thanks .
Brad,
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...
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.
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?
Nice.
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.
Thanks Sam, I think I've fixed that now.
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
Shinta,
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.
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?
oh, i guess i could show you my site...
it's GarrettW.net
[inserting blue for anti-spam!]
Garrett,
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).
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
Alex,
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.
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.
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 sites...lol Any ideas on how to limit the length of a page? perhaps have comments have pages of their own?
Error! If you go to bonrouge.com/br.php without any query string, lots of PHP errors appear.
James,
Thanks. Fixed it.
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.
wrinkledCheese,
There is no need to credit me for anything (but feel free to do so if you feel like it).
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.
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!
www.lakegeorgetips.com
Scott,
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.
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?
Thanks
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 you rock.
I love your site. I have visited MANY TIMES.
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.
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
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.
Hey,
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.
Hack again?!
nice
super tips here. Thanks
Stop hack the program!!!
<a href=https://www.vzlomtg.com/>скачать программу +для взлома телеграм </a> - Как взломать переписку telegram, взлом телеграм бесплатно.
Вам будет интересно как где и сколько стоят леса, схема проезда и многое другое:
<a href=https://baraholka.onliner.by/viewtopic.php?t=20866553>купить вышку тура минск</a> и
<a href=http://e-puzzle.ru/forum/index.php?showuser=22875>леса строительные купить в минске</a>
Dartma tavan qurasd?rmas? v? servisi. Avropa Istehsali Dartma Tavan, Inshaat, Asma tavan, Натяжные потолки, 3d, Temir, Tikinti, Dizayn, Profil, Потолок, Dosheme, 3d dosheme. https://goo.gl/wE3s5n Баку Азербайджан +994 (55) 577-00-01 email: time4soft.com@gmail.com
Dunyada en yaxs? Web Studiya. Sayt sifaris! Здесь я заказал себе Сайт! Это Самая креативная ВЕБ-Студия в Мире - http://www.Time4Soft.com +994 50 345 83 88, PHP, CMS RA, Hosting, Hosting costs,Hosting charges,Hosting az,. email: web@time4soft.com
Обучу за 20 мин. Бесплатно,как зарабатывать с продуктом ( не воздух,не пирамиды с инвестициями)от 100 usd по нарастающей, в пассиве, без Копейки вложений, без знаний интернета или со знаниями, с уникальным продуктом для здоровья, известным во всем мире аналогом ламинина, но дешевле в 4 раза и более эффективным, без обязательных покупок, можно с приглашениями, а можно и абсолютно без приглашений, жду в скайпе evg7773
Приглашаю. Любая страна Мира. email:7771541@gmail.com
Site Comment * Very Crisp, Clean and visually inviting.