CSS Guidelines

From Fishcakes Wiki

Jump to: navigation, search

Edit Menu

Edit Menu

Image:Icon_Css_40px.png CSS Guidelines

How to accomplish specific things with CSS.

Contents

General CSS Tutorials

Accessibility

You MUST make your site accessible to visually impaired users these days.

Access Keys in Links

Need to add access key for all sectional links 

<a href="/index.php/Main_Page" title="Visit the Main Page [z]" accesskey="z">click here</a>

Adding Scroll Bars to a DIV

Cross Browser Exceptions

How to get browser to do something specific.

In the HTML Document you can use: 

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

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

<!--[if gte !IE 5]>
Special instructions for IE 6 here
<![endif]-->

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: 

<style type="text/css">
   .imageem {
      width: 2.2em;
      height: 3.5em;
   }
</style>

Image html: 

<div id="imagebox">
   <img class="imageem" src="imagename.jpg" width="22" height="35"/></a>
</div>

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)

pmob 3 Column CSS Tutorial

logo-new.jpg Good site with guides to achieving 3 column and other CSS layout tricks.

3 Columns

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.

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.


Image:Icon Resources 20px.png CSS and HTML Resources

Image:Icon_Css_Html_20px.png General Resources

  • local.google.com — Google Supported Browsers, if they support them, so should you.
  • opensourcetemplates.org — Open Source Templates for free css and xhtml open source template design. Not much on offer yet.
  • oswd.org — Open Source Web Designs download and share free web design templates.

Image:Icon_Css_20px.png CSS Resources

Image:Icon_Html_20px.png HTML Resources

  • validator.w3.org — w3 XHTML validator.
  • w3.org w3's Accessibility Guidelines.
  • chami.com — animated favicon generator.
  • favicon.co.uk — favicon generator.
  • iconlet.com — simple search engine for free icons and images. Exceedingly useful!
  • webmonkey.com — WebMonkey Developer's Guide. Exhaustive reference guide for HTML, CSS, Javascript, etc.
  • webmonkey.com — WebMonkey HTML Special Characters reference.
  • Keywords — generate up to 100 related keywords with estimate of daily search volume.

Image:Icon Resources 20px.png Scripting Resources

Image:Icon Resources 20px.png Templates

Image:Icon_Css_File_20px.png Fishcakes Wiki Reference Files

These are examples from other sites but archived here as things on the web have a tendency to disappear.


Retrieved from "http://wiki.fishcakes.biz/CSS_Guidelines"
Personal tools