Win a copy of Web Standards Solutions, The Markup and Style Handbook
In conjunction with those lovely people over at friends of ED we've got five copies of their latest book – Web Standards Solutions, The Markup and Style Handbook –
to give away to registered DMXZone members.
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. Dedicated readers of our newsletter might remember that last week we featured the SimpleBits Web Standards link list.
To be in with a chance of winning a copy all you need to do is email us with your suggestion for a DMXZone article series that you'd really like to see. The best five suggestions will earn their contributor a copy of the book …. and might see their questions answered as we turn the ideas over to our skilled panel of authors.
To whet your appetite we've even got a sample chapter from the book you can download and read.
We'll announce the winners on July 8th, so get those suggestions in quick.
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.
Ian Blackham
Following a degree in Chemistry and a doctorate in Scanning Tunneling Microscopy, Ian spent several years wrestling with acronyms in industrial R&D (SEM with a side order of EDS, AFM and TEM augmented with a topping of XPS and SIMS and yet more SEM and TEM).
Feeling that he needed a career with more terminology but less high voltages, Ian became a technical/commissioning editor with Wrox Press working on books as diverse as Beg VB Application Development and Professional Java Security. After Wrox's dissolution and a few short term assignments Ian became content manager at DMXzone.
Ian is a refugee from the industrial Black Country having slipped across the border to live in Birmingham. In his spare time he helps out with the website of a local history society, tries to makes sure he does what his wife Kate says, and worries that the little 'un Noah is already more grown up than he is.