The CSS and XHTML Lab

This is a collection of experiments, methods, tips and tricks related to CSS and XHTML that may or may not come in handy some day. Some of these techniques are based on ideas of my own, others are based on techniques, tutorials, and ideas that I’ve come across on the web, on mailing lists, in books, and other places.

Some of these examples have step-by-step instructions while others do not. I hope to eventually get around to writing instructions/explanations for all of these examples.

If you want to use any of these techniques, go ahead, take a look at the (X)HTML and CSS to learn how it's done. However, for the techniques that use images I ask that you please create your own.

If you ask me for help on how to implement this stuff and don’t get a quick response, it’s not because I’m ignoring you or don’t want to help. I just don’t have the time to help everyone. Sorry about that. If you have specific questions related to CSS, a good place to look for help is the css-discuss mailing list.

Demos and techniques

CSS Frames
The look of frames without using frames.
CSS Tabs, separate lists
A two-level tab menu based on separate unordered lists.
CSS Tabs, nested lists
A two-level tab menu based on nested unordered lists.
CSS Tabs, nested lists (Listamatic 2)
A two-level tab menu based on separate unordered lists. Based on the HTML from Listamatic 2.
CSS Teaser Box, fixed width
A fixed width box with rounded corners. It uses no extra markup and just one image.
CSS Teaser Box, flexible width
A flexible width (and height) box with rounded corners. It uses very little extra markup and two images.
Dropshadow
A simple dropshadow effect.
Equal height boxes with CSS
Side-by-side elements that behave like table cells.
Equal height boxes with CSS, part II
Side-by-side elements that behave like table cells. Some workarounds to prevent Internet Explorer from breaking down completely.
Flexible box with custom corners and borders
A flexible width (and height) box with custom corners and borders.
Horizontal centering
A very basic example of horizontal centring with CSS.
Horizontal and vertical centring
Horizontal and vertical centring with CSS.
Inverted Sliding Doors Tabs
Upside down tabs based on the Sliding Doors technique. Also available in Italian (translation by Egidio Murru).
News list
A list of vertically expandable boxes with rounded corners.
Rounded corners
An older example of a box with rounded corners.
Soft dropshadow
A somewhat limited way of creating a nice and soft dropshadow.
Styling form controls
Examples of CSS applied to form elements.
Transparent custom corners and borders
Create a resizable box with custom, transparent corners and borders and no extra markup. A much improved version of the Flexible box with custom corners and borders demo.
Two column CSS layout with full width header and footer
Fixed width, centred horizontally.

Translated articles

Some of the articles I've written have been translated to other languages than English. All Swedish translations are done by myself.

10 must haves in IE Next
A three-part article series that explains the selectors that are available in CSS 2.1. Available in the following languages:
10 colour contrast checking tools to improve the accessibility of your design
A list of tools that help make your design readable to all users by checking if text has sufficient contrast against its background. Available in the following languages:
Accessibility myths and misconceptions
What accessibility is and is not:
Are we designers or developers
If you do not do graphic design, but work with HTML, CSS, JavaScript, and accessibility, are you a designer or a developer? Available in the following languages:
Barrier-free Web design, a.k.a. Web accessibility 2.0
A joint attempt by myself and Tommy Olsson to explain why we believe that including everybody does not risk excluding people with disabilities.
Basics of search engine optimisation
Basic tips for Search Engine Optimisation: add quality content regularly and make sure your site is well-built.
Bring on the tables
How to use HTML tables the right way – to create accessible data tables:
CSS 2.1 Selectors
A three-part article series that explains the selectors that are available in CSS 2.1. Available in the following languages:
CSS 3 selectors explained
CSS 3 brings us many powerful new CSS selectors. Browser support is currently lacking, but taking a look at what lies ahead is still useful. Available in the following languages:
CSS Frames v2, full-height
Create the visual effect of HTML frames with CSS and make the scrolling area stretch to 100% height regardless of the amount of content. Available in the following languages:
CSS tips and tricks
My favourite time and trouble savers when working with CSS. Available in the following languages:
Developing with web standards
A document on web standards and accessibility. Available in the following languages:
Efficient CSS with shorthand properties
Save space in your CSS files by using shorthand. Available in the following languages:
Evaluating Website Accessibility
A three-part article series that explains how to evaluate the basic accessibility of a website.
Guidelines for creating better markup
Some guidelines that will help you improve the quality of your markup. Available in the following languages:
How to prevent HTML tables from becoming too wide
A rarely used CSS property comes to the rescue when dealing with oversized content in tables. Available in the following languages:
Lame excuses for not being a Web professional
Excuses that may be valid in some circumstances are too often used to cover up somebody’s lack of knowledge about modern Web design or development. Available in the following languages:
Levels of HTML knowledge
Humorous descriptions of a few different levels of HTML knowledge among people working in the web industry. Available in the following languages:
Ten reasons to learn and use web standards
Some of the most important reasons for spending the time to learn all about using web standards to design and develop websites. Available in the following languages:
The alt and title attributes
Explaining the alt and title attributes, along with some guidelines on how and when to use them. Available in the following languages:
The perils of using XHTML properly
A discussion of the issues involved in serving XHTML with the application/xhtml+xml MIME type. Available in the following languages:
Turning a list into a navigation bar
How to use CSS to create a horizontal navigation bar out of a simple ordered list. Available in the following languages:
Web development mistakes
A list of mistakes frequently encountered on the web. Available in the following languages:
Why standards still matter
The last couple of years may have seen an increase in the level of interest and action around web standards. But it still isn't filtering down to the mainstream… Available in the following languages:

Information, sponsorship, and externals

About the author

Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.

Subscribe

Looking for web hosting?

Try DreamHost!

Use the promo code 456BEREASTREET3 to save USD 20 when you sign up!

Latest articles

Validation statistics from Nikita the Spider Comments off
An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
Authentic Jobs API and Affiliates program Comments off
The Authentic Jobs job listing service now has a public API and an affiliate program.
What does Acid3 mean to you and me? Comments off
Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
Designing Web Navigation (Book review) Comments off
Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
DOMAssistant bundle for TextMate Comments off
To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
First impressions of Internet Explorer 8 Beta 1 Comments off
My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.

More articles

Favourites, here and elsewhere

Affiliation

  • NetRelations
  • Kaffesnobben
  • Dagens recept
  • 9rules network member

Support this site

Show your support by buying a book or two from SitePoint or getting me something from my Amazon Wish List.