Explore the Premium Content

Centering Designs with CSS

One of the more frustrating aspects of CSS is centering our fixed designs effectively on the page. I know this because it’s a question people ask me quite often—and in fact the idea for this article came from a reader concerned about how to do just this.

While CSS offers a logical means to center designs, the problem is with browser implementation. No surprises there! It’s more than a bit frustrating because with table-based layouts this was a no-brainer. We’d simply use the align="”center”" attribute to center the containing table, and the entire layout would then be centered.

So how do we achieve the same effect in CSS? The good news is that we can. The bad news is that to center our content effectively, we have to employ a workaround in order to support multiple browsers. The good news is that the "hack" will display centered designs in all kinds of browsers, including Netscape 4.x, which is pretty cool.

Testing Accessible Web Sites

With Dreamweaver, you can check your mark-up using the built-in validator, or you can use the validators on the W3C site, because markup and CSS is either right, or it isn't. A web site can be technically accessible (that is, all the alt text is there etc) but still very difficult to use, so you need to test it. In this tutorial, Rachel looks at testing your sites with the free Lynx text-only browser, or a trial edition of a screen-reader and what to look for.

Rachel then demonstrates common errors that come to light at tetsing time, by looking at accessibility mistakes on big web sites such as Macromedia.com and The Register.

The Good, The Bad, The Ugly: CSS Features in Dreamweaver MX 2004

There's been a lot of criticism of DMX 2004 - a lot of it from us at DMXzone. But one area where it really excels is the enhanced CSS support - in fact, for many people, this is the main reason to buy the upgrade. Molly, DMXzone's resident CSS warrior, takes you through the interface changes in using CSS with DMX2004, to help you get quickly up to speed with what's good, bad and (erm..) aesthetically challenged.

Fahrner Image Replacement and Accessible Images

You may have heard of the Fahrner Image Replacement (FIR) technique, and know that it's a way of preserving the structure of the page, while replacing text with images for conventional browsers. Sounds complicated? Rachel gives step-by-step instruction on how to apply this brand-new technique, and how to make accessible sites that are also great-looking and packed with images, but still indexable by the search engines.

Alternate Stylesheets for Accessibility

Not all visitors to your site with visual impairments require screen readers etc - often, the ability to increase font size or switch to a high-contrast colour-scheme so that they can read more clearly is what's needed to make your site a must-visit instead of a source of frustration. Rachel shows you how to make accessible alternate style sheets, and how to offer a button to allow visitors to switch between them.

Switchin' Styles!

Ever wondered how some sites just totally change their look at the touch of a button? Add a couple of different CSS layouts, a dash of JavaScript and a couple of buttons and you let your users choose between different predefined colour schemes, layouts and background images.

This article is suitable for complete beginners, and contains all the source files you need to adapt re-use for your own sites.

Creating an Accessible Layout

If you are in the position of starting work on a new web site, and you wish to ensure that the site is accessible to all users and devices then you should consider accessibility right from the planning stage. If considering accessibility is just another part of your working processes - like ensuring the site looks good on all screen resolutions and optimizing graphics for fast download speeds - then you will soon find that it adds very little time onto development time for a web site and these techniques will become second nature to you anyway.

In this article, Rachel shows how to combine a logical ("semantic") document structure, in combination with cutting-edge CSS styling and design, goes a long way to making an accessible web site that's integrated into your workflow and processes.

This article uses DMX 2004, but is completely backwards compatible with MX, and is suitable for complete beginners.

CSS Design: The Ubiquitous Three Column Layout

Remove all the frustration that table-based column layouts cause such as deep nests and the need to use spacer GIFs. You'll reduce page weight, increase portability, improve accessibility, and maximize your workflow by using this pure 3 column CSS layout design. Along the way, you'll learn a bit about descendant selectors, you'll order DIVs to make the document more readable in those browsers with partial or no CSS support, and tap into list styles to create an elegant navigation scheme.

Accessible Tables for data

With all the talk about "table-less web design" and CSS layouts you might be forgiven for thinking that the HTML table is well and truly dead, never to be used again by any reputable web designer. However, this is not the case. While tables for layout are to be avoided if at all possible in the interests of accessibility and forwards-compatibility, tables can and should still be used for their original purpose - that is to display tabular data.

In this self-contained tutorial we will look at how to create accessible tables that comply with the recommendations of the W3C, we will also learn how to use CSS to make our accessible tables look attractive and easy to read in a web browser.

CSS Design: Creating a Two-Column Layout

If one column CSS layout design was simply too simple, try a two column layout! You'll not only learn how to create an easily modified 2 column layout, but you'll also get the skinny on working around Box Model problems by modifying DOCTYPEs and employing the infamous "Box Model Hack." You'll also learn how to separate your layout styles from your general styles, allowing you to employ the @import trick, which provides a usable alternative for those using Netscape 4 or without CSS support.

All the files are provided for download, so you can experiment to your heart's content

JavaScript Tricks for Usable Forms

CSS is an excellent way to add color and style to your forms when displayed in a traditional web browser - without compromising the accessibility of the form for those using a screen-reader or otherwise limited browser. However, for more complex forms we can also incorporate JavaScript to add further effects. While JavaScript can be problematic for usability and accessibility, it can also add to the usability of a form for those whose browsers support it - the trick is to ensure that without JavaScript your form is still totally usable.

We won't be looking at how to write JavaScript in this tutorial; instead we will be exploring the inbuilt Dreamweaver behaviors and those downloadable from the Macromedia Exchange. So this tutorial will also quickly cover the installation and use of third party extensions as well as the functionality that is shipped with Dreamweaver MX.

Styling forms with CSS

In this tutorial we will look at the variety of ways in which we can make attractive forms for our sites and web applications by using CSS. Forms are an important part of many sites and for web application design, much of the client-side development can be taken up with creating usable forms. CSS makes it easier to create attractive forms quickly, because once you have developed a default look for forms then you can reproduce that for every form on the site.