Web Standards Solutions, The Markup and Style Handbook
In conjunction with those lovely people over at friends of ED we've got a sample chapter of their latest book – Web Standards Solutions, The Markup and Style Handbook – for your perusal.
The author Dan Cederholm runs the SimpleBits website that not only carries a thought provoking blog, but also lots of stuff on standards-compliant design.
| Product: | Dreamweaver MX |
|---|---|
| Technologies: | CSS, XHTML |
Before we give you a snippet from the sample chapter (PDF can be downloaded above), let's have a look at a quick run through of the contents.
The book is divided into two parts; firstly nine chapters on markup then secondly, six chapters covering CSS related matters with a final chapter on resources.
To quote the author "Each chapter answers a specific question, oftentimes presenting multiple methods to achieve the same results. We'll look closely at each method, noting the good and bad of each."
Web Standards Solutions The Markup and Style Handbook
Part One: Get Down with Markup
- Chapter 1: Lists
- Chapter 2: Headings
- Chapter 3: Tables are Evil?
- Chapter 4: Quotations
- Chapter 5: Forms
- Chapter 6: <strong>, <em>, and other phrase Elements
- Chapter 7: Anchors
- Chapter 8: More Lists
- Chapter 9: Minimizing Markup
Part Two: Simplebits of Style
- Chapter 10: Applying CSS
- Chapter 11: Print Styles
- Chapter 12: CSS Layouts
- Chapter 13: Styling Text
- Chapter 14: Image Replacement
- Chapter 15: Styling
- Chapter 16: Next Steps
Extract from Web Standards Solutions The Markup and Style Handbook, Dan Cederholm, friends of Ed, ISBN 1-59059-381-2, 2004, by kind permission of friends of Ed.
Throughout the book, we've been talking primarily about the insides of web page elements— the guts. But what about the framework? For years, designers have relied on tables for structuring columnar layouts, oftentimes nesting multiple tables inside each other to achieve just the right amount of spacing or visual effect. These bloated layouts can be slow to download and slow to work with in terms of code maintenance—not to mention often unreadable in text browsers, screen readers, and small-screened devices.
In this chapter, we'll combine CSS and structured markup to create a two-column layout using four popular methods. In turn, we'll show that it's possible to create columnar designs without nested tables and spacer GIFs.
Later, in the "Extra credit" section, we'll discuss the box model problems found in Internet Explorer version 5 for Windows and how to get around it. We'll also share a simple secret for getting equal-length columns with CSS.
How can I use CSS to build a two-column layout?
The answer is several ways. To get you started, and to help you understand the fundamental difference between two of the most popular methods (float and positioning), I've decided to focus on four different options—all of which result in a two-column layout with a header on top and footer at the bottom.
My hope is that by using this chapter as a guide, you can begin to build the framework for sites that contain many of the rest of this book's examples.
Each of the four methods that we'll focus on take place between the <body> and </body> tags of the document, and I've introduced the markup structure that we'll be using at the beginning of each method.
To give you an idea of the entire page structure that surrounds the methods, let's outline what else would be included:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CSS Layouts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
...method examples...
</body>
</html>
And to give you a general idea of the layout we're aiming for throughout each method, take a look at Figure 12-1 for a visual overview of the columnar layout we'd like to achieve.
Figure 12-1. Wireframe of the intended two-column layout
Let's get started by introducing the first method that utilizes the float property.
