CSS Guidelines

   CSS Guidelines

How to accomplish specific things with CSS.

General CSS Tutorials

 * annevankesteren.nl CSS Fixed Positioning Tutorial — tutorial and code for Fixed Sidebar, Fixed Top Menu, Fixed Footer... by Anne van Kesteren.
 * w3.org CSS 2 Sytax — very good definition.
 * sovavsiti.cz CSS Horizontal Menus — using lists tutorial.
 * shadow-fox.net 3 Column Layout — good tutorial with sample code.

Accessibility
You MUST make your site accessible to visually impaired users these days.
 * Dive Into Accessibility — great tutorial.
 * w3 Accessibility Guidelines
 * Watchfire Accessibility Check
 * Accessify — accessibility tools

Access Keys in Links
Need to add access key for all sectional links click here

Adding Scroll Bars to a DIV

 * Joomla Prodigy Tutorial — DIV with a srollbar.

Cross Browser Exceptions
How to get browser to do something specific.

In the HTML Document you can use:

Or, if not greater than or equal to IE 5, use:


 * Writing Cross Browser CSS
 * Browser Strategies for CSS
 * Explorer Exposed — bug list with solutions for IE.
 * Conditional IE Statements — if IE, then...
 * IE Excludes — if not IE, then...
 * Raw CSS Examples
 * IE Resources — good fix guide to common IE problems.
 * Quirksmode — guide to browser exceptions
 * Apple Developer — css best practice.
 * Box Model Hack — famous.

Scalable Images
Use CSS to Scale em values of images to comply with vision impaired accessibility guidelines. See also PixelPost Addons: Scalable Images Addon

Convert Pixels to EM
See em to px forum page discussion with calculations and EM Calculator to convert px's to em's.
 * PX to EM Formula px*0.0626=em

Remember that EM is a derivative of the Font Size for the given element, so you'll need to tinker with it depending on page layout. One em is equal to the pt size of the M (the widest font element) of the current font and changes depending on the size of the font in each element.

Use the following CSS Style: Image html:

Scalable Text with CSS & Javascript

 * Tutorial — code for using Javascript to add scale font buttons to a web page. Uses cookies to keep the user's settings.
 * Javascript — simple script to scale text using buttons.
 * Javascript — another simple script.

Three Column Flexible Layout with Header and Footer (Holy Grail)

 * http://www.glish.com/css/7.asp — the holy grail.
 * http://www.alistapart.com/articles/holygrail — tutorial.

pmob 3 Column CSS Tutorial
http://www.pmob.co.uk/pob/images/logo-new.jpg Good site with guides to achieving 3 column and other CSS layout tricks.
 * http://www.pmob.co.uk

3 Columns
 * 3 Fluid ColumnsSo you just want three fluid columns that span the full width of your container...
 * http://www.pmob.co.uk/temp/3colfixedtest_explained.htm — 3 column layout with header and footer.

Border Effects
 * Dashed borderThis is a very simple dashed border effect that is created by applying a background...
 * Dotted bordersThis example is to defeat the 1px dotted border bug in ie where the dashes disappear...
 * Side image bordersTo add full length side borders using images you simply need to nest one element inside...

Captions
 * Image ClearIf you want to display a number of images from your database and then alongside them you..

Centering
 * Centred FloatsIt is usually stated that you cannot centre floated elements but this is not quite true..
 * Centre Multiple Divs in IEIt would be nice if we could centre multiple block elements and there is a way..
 * Centred Page Horizontal and Vertical centering has always been awkward with css as vertical-align only..
 * Centre - No widthCentering block level elements is easy as you simply need to use margin:auto and a..

Equal Columns
 * Equal ColumnsBefore you start you should know that the only element that will base its height dependent on ...

Rollovers
 * Simple Tab RolloversThere are many ways to do rollovers but as a general rule of thumb you should..
 * Advanced Tab RolloversThis is about as complicated as you can make it but the effect is well worth the effort..
 * Disjointed Rollovers(Plus a css image gallery). A dis-jointed rollover is when you rollover some text or an image..
 * Animated RolloversAnother disjointed Rollover effect that animates a menu pointer as you scroll along..

See also http://www.tjkdesign.com/ which has good 3-column header footer layout.

Yahoo Grids
Pre-built CSS engine from Yahoo.
 * developer.yahoo.com/yui/grids/ — Yahoo Grids pre-built CSS.
 * developer.yahoo.com/yui/grids/builder — excellent Yahoo CSS Grid Builder helps setup css divs for pages.

[[Image:Icon_Css_File_40px.png]] Fishcakes Wiki CSS Files
These are external HTML files stored on this server for reference.
 * [[Image:Icon_Css_File_20px.png]] Fishcakes CSS Language — complete list of CSS codes — Fishcakes Wiki Reference File.
 * [[Image:Icon_Css_File_20px.png]] CSS Crib Sheet — tips and tricks from Mezzoblue — Fishcakes Wiki Reference File.
 * [[Image:Icon_Css_File_20px.png]] CSS Fixed Menu — sample and source code from Bert Bos — Fishcakes Wiki Reference File.
 * [[Image:Icon_Css_File_20px.png]] CSS Tutorial — beginners and advance tutorial from CodePunk — Fishcakes Wiki Reference File.
 * [[Image:Icon_Css_File_20px.png]] CSS Flexible Layout — simple template outlining creation of divs — Fishcakes Wiki Reference File.
 * [[Image:Icon_Css_File_20px.png]] IE Mac Oddities — one page guide to overcoming CSS problems with IE Mac — Fishcakes Wiki Reference File.
 * [[Image:Icon_Css_File_20px.png]] Onion Skin Drop Shadows — one paragraph guide to CSS layers and transparencies — Fishcakes Wiki Reference File.
 * [[Image:Icon_Css_File_20px.png]] Creating Scalable Figures — guide to CSS Scaling. Also includes HTML includes on page — Fishcakes Wiki Reference File.
 * [[Image:Icon_Css_File_20px.png]] Creating Scalable Images — guide to CSS Scaling of images with text size increase by user — Fishcakes Wiki Reference File.
 * [[Image:Icon_Css_File_20px.png]] Sliding Doors — code for creating Sliding Door scalable menu with scalable image — Fishcakes Wiki Reference File.
 * [[Image:Icon_Css_File_20px.png]] Fishcakes CSS Colours — codes for colours and greys — Fishcakes Wiki Reference File.
 * [[Image:Icon_Css_File_20px.png]] Fishcakes Colours — codes for pastel colours — Fishcakes Wiki Reference File.