It takes you in 10 steps through the use of, and the difference between static, relative and absolute positioning.

If you’ve struggled to do CSS layouts, this will probably solve all your problems.

Pages no longer need to refresh in their entirety to reflect user ineractions.  Ajax – asynchronous javascript -  can make this happen quickly and in front of your eyes.

Study the jQuery web site – this is an library of javascript routines that make javascript coding that little bit easier to learn.

jQuery supplies a series of easy to use APIs – one weekend of study should see you on your way to enlivening your site.

Some menus are supplied free of charge for you to down load an use on your sites, or you can buy the use of  all available source Photoshop files for a very reasonable one-time fee. This enables you to change the colours of the menus. Well worth it and you’ll become familiar with CSS styling in the process.

If you use any of the free menus supplied on the site, he asks for a link back in return.  Add this site to your toolkit of web building sites.

Today’s web site recommendation is good for when you need a quick understanding of a CSS basic concept, but don’t want to spend hours digging around in a detailed text for the answer.

The people at the Basic CSS Guide have stuck to the basic principles, highlighting how various CSS constructs are used.

Actually their prime task is to sell/promote a book, but this website is still very useful.

This site really is very low key, but it gives a good overall, succinct overview to CSS.

w3schools covers topics like HTML, XHTML, CSS, XML, JavaScript, PHP, ASP and SQL, but you’ll find a lot more there.

This site is a great starting point for learning to build web sites from scratch. W3Schools had over 11 million unique visitors in January this year. That is staggering.

The web site is completely free, and the site owners expect you to help them out by linking to their site from your blog, pointing out any errors you find on the site and so on. Help to keep this valuable resource free. Use it and link to it.

I wish they had an affiliate program as I would promote their products happily. I recently bought the product they call the Browser Book.

The Browser Book costs $50, (I didn’t buy the laminated version which is a bit extra), and it contains a wealth of information.

I am in the UK, and Visibone are located in the US. I ordered the Browser Book on the 8th July and it arrived today – the 16th July.

Anyway – here is a run-down of what the browser book contains:

Web Safe Colours

Colour Card with hex and RGB values for all web safe colours. The image above shows the colour chart with all 216, web safe colours. When you are stuck for a colour scheme this can be a good starting point. Web Safe colours have never looked so appealing.

Fonts

All standard fonts on Windows, Macs and Linux, with examples of how they look and an indication of font sizes

Symbols

Codes for HTML symbols with hex values too. This makes it a simple lookup to figure out how to do characters like these : ♥ and ½ and ∇

XHTML

A full list of XHTML tags with popular attributes – never for example have to scratch you head for all the attributes available on a form tag again. And did you know there is a tag for quote marks. I didn’t.

CSS

Just what I need – a list of stylesheet reminders, (CSS2). This is great as I love to code CSS by hand and now I can just look something up if I’ve forgotten. I can code in Notepad if that is what I want, (rather than have to bring out the predictive HTML editor . . .). There is also a useful HTML ⇒ XHTML migration checklist.

Javascript

Visibone uses Javascript asserts to explain the Javascript syntax. As Bob says “all the code here not only runs, but tests itself”. Somehow manages to introduce you to Javascript functions you don’t know, by using them to explain the ones you wished you knew.  Clever.

The DOM

The Javascript Document Object Model. Really very useful when you are manipulating page content. Which in itself can make you drive you insane, so this helps.

Regular Expressions

Javascript Regular Expressions with lots of usable code, right there on the page. I bought a book once, called Regular Expressions for Dummies. So this is definitely a step up.

MySQL

Next is a MySQL statement summary – very useful for jogging you memory for date functions, and the order of tokens to use when you are wanting to GROUP BY, LIMIT TO and ORDER BY whilst HAVING a headache.

PHP

There is also help with PHP 4 and 5 with a fabulous list of functions including MySQL calls, string functions and even PHP.ini options.

Thanks Bob!

It tends to look good if you can supply a background panel for highlighted sections of your website, or for all the different areas on a web page and by so doing, create a page design.

If you are frequently changing the content, using background images can be limiting.

The background you use has to be the right size, or the text will fall off the panel, extending past the edges of the background image you’ve drawn . . . or you have to break the image up into static and repeating sections to allow for expansion.

The Solution Is Not To Use Images

If you are happy to incorporate some javascript, you can do away with images altogether and programmatically arrange background panels for your pages. See below for an example using Nifty Cube. Take a look at the Nifty Corners web site for the options available.

This type of layout device cane be very useful if you want to create a site with user choices for colour schemes. It can all be achieved programmatically via PHP without having to create lots of different background image sets for each different look.

A Site With A Programmed Background Layout

Here is a property site I did for a client promoting his property training courses. It uses code similar to the Nifty Corners to draw all the different rounded box sections.

If you’re technical but are short on design skills, you can use any of the many template sites on the internet to buy or download a design layout template ready for use. Most of the templates available to purchase are not what I am generally looking for. I want clean CSS designs with good graphics that I can use to

• improve my own CSS skills
• alter for my own purposes easily

There is a wonderful Croatian site call Solucija featuring free CSS templates – which are also excellent. I use these frequently and I normally end up with designs that are quite different from the ones I started with. But you don’t have to do it my way. Take a look.

CSS and DHTML Scripts

Whenever I want to make a menu, check out a neat CSS styled button, or generally get ideas for navigation or straightforward cut and paste AJAX scripts, I go to the Dynamic Drive web site.

It is an essential helper site for all amateur and professional web developers.

On the home page you’ll also find a link to a neat tool for creating a favicon from any image. In fact I used it to make a icon for this blog from an image of a paperclip.

A small thing but when you create a favicon for your web site it appears in the top left hand corner of the browser window and next to any links on your site that are book-marked.

This can make your site stand out and do a little bit to help create a brand. It’s worth doing.

Cut and Paste CSS

The CSS section of Dynamic Drive is very useful for getting hold of cutting edge CSS, but also for improving your understanding of CSS. There are some great scripts for CSS menus and button bars.