Professional CSS Cascading Style Sheets for Web Design.Pdf
Total Page:16
File Type:pdf, Size:1020Kb
Professional CSS Cascading Style Sheets for Web Design Christopher Schmitt Mark Trammell Ethan Marcotte Dunstan Orchard Todd Dominey Professional CSS Cascading Style Sheets for Web Design Christopher Schmitt Mark Trammell Ethan Marcotte Dunstan Orchard Todd Dominey Professional CSS: Cascading Style Sheets for Web Design Published by Wiley Publishing, Inc. 10475 Crosspoint Boulevard Indianapolis, IN 46256 www.wiley.com Copyright © 2005 by Wiley Publishing, Inc., Indianapolis, Indiana Published simultaneously in Canada ISBN-13: 978-0-7645-8833-4 ISBN-10: 0-7645-8833-8 Manufactured in the United States of America 10 9 8 7 6 5 4 3 2 1 1B/RT/QX/QV/IN No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Legal Department, Wiley Publishing, Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, (317) 572-3447, fax (317) 572-4355, or online at http://www.wiley.com/go/permissions. LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO REPRE- SENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMITATION WAR- RANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUIT- ABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ. For general information on our other products and services or to obtain technical support, please contact our Customer Care Department within the U.S. at (800) 762-2974, outside the U.S. at (317) 572-3993 or fax (317) 572-4002. Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books. Library of Congress Cataloging-in-Publication Data Professional CSS : cascading style sheets for Web design / Christopher Schmitt ... [et al.]. p. cm. Includes index. ISBN-13: 978-0-7645-8833-4 (paper/website) ISBN-10: 0-7645-8833-8 (paper/website) 1. Web sites—Design. 2. Cascading style sheets. I. Schmitt, Christopher. TK5105.888.P674 2005 006.7—dc22 2005012281 Trademarks: Wiley, the Wiley logo, Wrox, the Wrox logo, Programmer to Programmer, and related trade dress are regis- tered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries, and may not be used without written permission. All other trademarks are the property of their respective owners. Wiley Publishing, Inc., is not associated with any product or vendor mentioned in this book. About the Authors Christopher Schmitt is the principal of Heatvision.com, Inc., a new media publishing and design firm based in Tallahassee, Florida. An award-winning Web designer who has been working with the Web since 1993, he interned for both David Siegel and Lynda Weinman in the mid-1990s while an undergrad- uate at Florida State University pursuing a Fine Arts degree with emphasis on graphic design. He is the author of The CSS Cookbook (O’Reilly, 2004) and Designing CSS Web Pages (New Riders Press, 2002). He is also the co-author (with Micah Laaker) of Photoshop CS in 10 Simple Steps or Less (Wiley, 2004) and con- tributed four chapters to XML, HTML, & XHTML Magic by Molly Holzschlag (New Riders Press, 2001). Christopher has also written for New Architect magazine, A List Apart, Digital Web, and Web Reference. In 2000, he led a team to victory in the “Cool Site in a Day” competition, wherein he and five other talented developers built a fully functional, well-designed Web site for a non-profit organization in eight hours. Speaking at conferences such as The Other Dreamweaver Conference and SXSW, he has given talks demonstrating the use and benefits of practical CSS-enabled designs. Also helping to spread the word about Web design, he is the list mom for Babble (www.babblelist.com), a mailing list community devoted to advanced Web design and development topics. On his personal Web site, www. christopherschmitt.com, he shows his true colors and most recent activities. He is 6'7" tall and does not play professional basketball, but he wouldn’t mind a good game of chess. For Dee. My muse and inspiration for many years and, with hope, many more to come. I would be lost without your wisdom, laughter, empathy, and captivating smiles. Mark Trammell of Gainesville, Florida, directs the Web presence at the University of Florida. To Kaye. Your love and abiding support make me who I am. Your joy paints my life with vibrant swaths of color that give memories meaning and our future hope. You are called many things: doctor, lieutenant, professor, wife, but most important, I call you friend. Ethan Marcotte of Boston co-founded Vertua Studios (vertua.com), a Web design shop focused on creating beautiful, user-focused sites. A steering committee member of the Web Standards Project, he is a leading industry voice on standards-based Web design. Ethan is also the curator of sidesh0w.com, a popular Web log that is equal parts design, coding, and blather. Dunstan Orchard of Dorset, UK, and San Francisco is Senior UI Engineer at Apple’s online store. He is a member of The Web Standards Project, a silent developer for the popular open source blogging platform Wordpress, and an occasional contributor to his own site at http://1976design.com/. I dedicate my meager portion of this book to my parents and to my girlfriend, Nicole. Todd Dominey of Atlanta founded Dominey Design (domineydesign.com), an interactive Web devel- opment and design studio that has produced original work for Budweiser, The Washington Post, Google, Winterfresh Gum, and others. He is also a Senior Interactive Designer at Turner Sports Interactive, designing and developing Web destinations for major PGA tournaments (including the PGA Championship and The Ryder Cup). Credits Acquisitions Editor Project Coordinator Debra Williams Cauley Michael Kruzil Development Editor Graphics and Production Specialists Kevin Shafer Lynsey Osborn Amanda Spagnuolo Technical Editor Molly Holzschlag Quality Control Technician Leeann Harney Copy Editor Carl William Pierce Nancy Rapoport Proofreading and Indexing Editorial Manager TECHBOOKS Production Services Mary Beth Wakefield Vice President and Executive Group Publisher Richard Swadley Vice President and Publisher Joseph B. Wikert Foreword When I met Christopher Schmitt in 1998, he was running High Five, the first online magazine dedicated to the art of aesthetic, visually pleasing Web design. To good design, he soon added a commitment to responsible code stewardship. Christopher was an early supporter of The Web Standards Project; in the aftermath of the Browser Wars, he became a tireless and well-learned advocate of CSS design. Books about CSS-based design are only as good as the CSS and the design they contain. Professional CSS boasts the best of both. For this volume, Christopher Schmitt has assembled some of the most talented and influential visual stylists and thinkers designing Web sites today. To make the cut, the designers in this book had to know as much about semantic markup and cascading style sheets as they did about branding, graphic design, and the softer user sciences. (If they also knew from JavaScript and your pop- ular plug-ins, so much the better.) Oh, and they had to be lucid, passionate, entertaining writers — and original thinkers — to boot. Meeting these tough requirements was a short list of masters: Todd Dominey, Ethan Marcotte, Dunstan Orchard, and Mark Trammell. Each has done incredible things on and for the Web, earning peer respect, winning fame, and above all, satisfying demanding clients while delivering standards-based designs that know everything about the user and nothing of compromise. As you read this book, you will learn their secrets (including how to include Flash in a standards-based layout without breaking document validity) and discover principles of CSS layout and semantic markup you can put to work on your most challenging professional projects. Please enjoy responsibly. Jeffrey Zeldman Founder, Happy Cog Studios Author, Designing with Web Standards (New Riders Press, 2003) Acknowledgments Christopher Schmitt: I thank Debra Williams Cauley and the Wiley team for helping me to shepherd the book you are now reading. Also, special thanks to David Fugate at Waterside for his guidance and support on this project. With the support of my co-authors Todd, Ethan, Dunstan, and Mark as well as the incomparable Molly as the Technical Editor, the book became better and bolder than my original vision. I thank you all for your hard work. Special thanks to my family and friends.