Max Design offers several excellent CSS resources and tutorials for web
designers and web developers. Their tutorials, articles and
presentations cover CSS, accessiblity and web
standards. Topics include CSS page layout tutorials, CSS layout
samples, liquid layouts, styling lists, definition lists, centering
with CSS, source order, skip links, web standards checklists
Max
Design’s CSS Tutorials and Presentations
Listutorial:
Tutorials on CSS based Lists
Step by step
tutorials on using CSS to create background image lists, rollover
lists, nested lists and horizontal lists.
Floatutorial:
Tutorials on CSS Floats
Step by step
tutorials on using CSS to create floating images, images
with captions, next and back buttons, drop caps, inline lists and more.
Selectutorial:
CSS Selectors
The structure of rules, the
document tree, types of selectors and their
uses. Plus a step by step tutorial using selectors to build a 3-column
layout.
Listamatic:
One List Many Options
Take a simple list
and use CSS to create radically different
list options.
Listamatic2:
Nested List Options
Select from
one of the many samples of Nested Lists or submit a list of your own.
Simple,
accessible external links
Is
there a way to add descriptive text to all external links and then
replace this text with a small icon for CSS supporting browsers?
Page
Source Order & Accessibility
Presentation at OzeWAI 2005 – Is source order
important for screen reader users?
Replicating
a Tree table
Demonstrates
how to replicate a graphic table tree using HTML.
Liquid
layouts using CSS – the joy, the pain, the tears
A presentation on liquid layouts for Web
Essentials 05.
Simple,
accessible “more” links
“More”
links are not very informative for screen reader users – but CSS can be
used to solve the problem.
Open
Publish – From tables to full CSS
Slides
from Open Publish workshop.
Accessible
Data Tables
An
article that explains how the accessibility of data tables can be
improved.
Creating
a graph using percentage background images
A quick graph example using a list and percentage
background images.
Building a page template – a step by step tutorial
A quick step-by-step demonstration of how the Web
Essentials template
was built using CSS. A presentation to students of Blue Mountains
College of TAFE.
A
basic Web Standards workshop
Notes
from a step by step workshop covering standards, XHTML, semantic
markup, accessibility, CSS, floats and bugs.
- Ten questions for Russ Weakley – 4-Jun-05
- Ten questions for Derek Featherstone – 23-May-05
- Ten questions for Joe Clark – 12-May-05
- Ten questions for Jason Santa Maria – 6-May-05
- Ten questions for Tommy Olsson – 26-Apr-05
Developing
sites for users with cognitive disabilities and learning difficulties
Practical suggestions on how to develop websites that are inclusive for
people with cognitive impairments and learning difficulties.
An
Accessibility Frontier: Cognitive disabilities and learning difficulties
Some ideas on how websites might more effectively meet the needs of
people with cognitive disabilities and learning difficulties. From a
paper presented at OzeWAI2004.
Remote
control CSS
Are
styled lists better than Flash or Javascript for menu’s?
A
quick and dirty introduction to accessibility
Presentation to the Web Standards Group, Melbourne
Changing
page appearance using body id
How can you change the appearance of individual pages without changing
the code structure on each page?
- Ten questions for Cameron Adams – 22-Nov-04
- Ten questions for Roger Johansson – 15-Nov-04
- Ten questions for John Allsopp – 8-Nov-04
- Ten questions for Jon Hicks – 19-Sep-04
- Ten questions for John Gallant – 13-Sep-04
A
web standards checklist
A guide that can be used to show the breadth of web standards or as a
handy tool for developers during the production phase of websites.
- Ten questions for Richard Rutter – 1-Jul-04
- Ten questions for Molly Holzschlag – 22-Jun-04
- Ten questions for Dan Cederholm – 7-Jun-04
- Ten questions for Simon Willison – 25-May-04
- Ten questions for Patrick Griffiths – 25-May-04
- Ten questions for Andy Budd – 18-May-04
- Ten questions for Nick Finck – 11-May-04
- Ten questions for Anne van Kesteren – 04-May-04
- Ten questions for Keith Robinson – 27-Apr-04
- Ten questions for Eric Meyer – 21-Apr-04
The
benefits of Web Standards to your visitors, your clients and you!
Presentation to the Web Standards Group, Macromedia User Group and Cold
Fusion User Group – MXDU2004: Day Zero.
Definition
lists – misused or misunderstood?
What are definition lists? When are they appropriate? And how to style
them to look like tables, image galleries, calendar of events and more.
Colored
boxes – one method of building full CSS layouts
How do you go about building a full CSS layout? Is there an overall
method that can be used for any layout?
Floating
items inside containers
Simple
explanation of how floats work inside a container.
Liquid
layouts – the easy way
Explains one method of achieving a successful liquid layout as well as
providing basic definitions of liquid, fixed-width and em-driven
layouts.
Nemesis: Two
columns with color
How do you
make a two column CSS layout with color in either column that spreads
to the full height of the page?
Selectutorial
- CSS selectors
Find out about selectors including the structure of rules, the document
tree and types of selectors. Also a step-by-step tutorial showing
selectors in action.
CSS
Centering – fun for all!
How
do you center a container on a page using CSS?
Float
like a butterfly
A
presentation on the basics of the float property, for Sydney Web
Standards Group meeting.
Body
padding and margin
A simple
explanation of the ways that browsers render body margin and padding.
List
inheritance and Descendant Selectors
This is a simple step-by-step demonstration to show how inheritance
affects nested list items.
Taming
the “Taming List” model
I have
been using the “Taming List” model for navigation lists for a while,
but have noticed some rendering inconsistencies.
Headings
as images – the Lindsay method
So, you want to use images for your headings? It gives you greater
control over typefaces, positioning and style.
Ideal
line length for content
I’d like to design a site that uses optimal line lengths. I also want
the line length to stay within the optimal range no matter what default
font size the user has set in their browser. Is it possible?
Here is a wide range of sample CSS page layouts – no tables. Everything from single column centred layouts to the dreaded three column monsters.
Popularity: 20% [?]
Related Posts:
Tags for this post>> CSS