Pro CSS and HTML Design Patterns

527 Pages·2007·11.118 MB·English

by  Michael Bowers

cyan yelloW
maGenTa Black
panTone 123 c
Books for professionals By professionals® The eXperT’s Voice® in WeB DeVelopmenT
Companion
eBook Available
Pro CSS and HTML Design Patterns
P
Dear Reader,
r
Using design patterns to style (X)HTML with CSS will save you time and effort.
o
Pro CSS and HTML Design Patterns contains more than 350 ready-to-use patterns
that can be combined to create an unlimited number of design solutions. You Pro
C
can instantly benefit from their reusable power and efficiency by simply dropping
them into your code and tweaking a few values! S
Each pattern works in all major web browsers including Internet Explorer 7,
S
Internet Explorer 6, Firefox 2, Opera 9, and Safari 2. You’ll find this book entirely
CSS HTML
usable and practical—it eliminates the need for hacks, tricks, endless testing,
a
and constant tweaking in multiple browsers to get something to work. I have
n
tested every CSS property and combination of properties in every major browser. and
d
I have boiled down the results into simple patterns that reveal the secrets of
triggering predictable behavior in all major browsers.
H
This is much more than just a cookbook. It systematically covers every
usable feature of CSS and combines these features with HTML to create reusable T
Design Patterns
patterns. Each pattern has an intuitive name to make it easy to find, remember,
M
and refer to. Accessibility and best practices are carefully engineered into each
design pattern, example, and source code.
L
You can read straight through the book, use it as a reference, and use it to
find solutions to commonly encountered design problems. The book’s consistent
D
layout makes it quick and easy to find the right pattern and put it to use right
away. e
This book unleashes your productivity and creativity in web design and
s
development. Instead of hacking your way toward a solution, you’ll learn how
to predictably create successful designs every time by reusing and combining i
g
modular design patterns.
n Increase creativity and productivity by using
Michael Bowers
patterns in your web designs while leveraging
P
CSS and (X)HTML best practices
Companion eBook a
THE APRESS ROADMAP
Pro JavaScript t
Techniques t
Beginning JavaScript with
e
DOM Scripting and Ajax
Beginning HTML Modern
Guide and Reference Pro CSS Techniques r
See last page for details Beginning CSS n
on $10 eBook version Web Development
Pro CSS and HTML s
Design Patterns
Michael Bowers
SOURCE CODE ONLINE ISBN-13: 978-1-59059-804-7 B
o
www.apress.com ISBN-10: 1-59059-804-0 w
54499 e
r
s
US $44.99
Shelve in
Web Development
User level:
9 781590 598047
Intermediate–Advanced
www.it-ebooks.info
this print for content only—size & color not accurate spine = 0.998" 528 page count
8040FM.qxd 3/29/07 12:23 PM Page i
Pro CSS and HTML
Design Patterns
Michael Bowers
www.it-ebooks.info
8040FM.qxd 3/29/07 12:23 PM Page ii
Pro CSS and HTML Design Patterns
Copyright © 2007 by Michael Bowers
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording, or by any information storage or retrieval
system, without the prior written permission of the copyright owner and the publisher.
ISBN-13 (pbk): 978-1-59059-804-7
ISBN-10 (pbk): 1-59059-804-0
Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1
Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence
of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark
owner, with no intention of infringement of the trademark.
Lead Editor: Chris Mills
Technical Reviewer: Paul Haine
Editorial Board: Steve Anglin, Ewan Buckingham, Gary Cornell, Jason Gilmore, Jonathan Gennick,
Jonathan Hassell, James Huddleston, Chris Mills, Matthew Moodie, Jeff Pepper, DominicShakeshaft,
Jim Sumser, Matt Wade
Project Manager: Kylie Johnston
Copy Edit Manager: Nicole Flores
Copy Editor: Ami Knox
Assistant Production Director: Kari Brooks-Copony
Production Editor: Laura Esterman
Compositor: Dina Quan
Proofreader: Elizabeth Berry
Indexer: Julie Grady
Cover Designer: Kurt Krames
Manufacturing Director: Tom Debolski
Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor,
New York, NY 10013. Phone 1-800-SPRINGER, fax [phone], e-mail [email protected], or
visit http://www.springeronline.com.
For information on translations, please contact Apress directly at 2560 Ninth Street, Suite 219, Berkeley,
CA 94710. Phone [phone], fax [phone], e-mail [email protected], or visit http://www.apress.com.
The information in this book is distributed on an “as is” basis, without warranty. Although every precaution
has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to
any person or entity with respect to any loss or damage caused or alleged to be caused directly or indi-
rectly by the information contained in this work.
The source code for this book is available to readers at http://www.apress.comin the Source Code/
Download section.
www.it-ebooks.info
8040FM.qxd 3/29/07 12:23 PM Page iii
I dedicate this book to my loving family.
To my wife,Teresa
To my son,Joshua
To my daughter,Sydney
They all sacrificed much to make this book possible.
www.it-ebooks.info
8040FM.qxd 3/29/07 12:23 PM Page iv
www.it-ebooks.info
8040FM.qxd 3/29/07 12:23 PM Page v
Contents at a Glance
About the Author. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
About the Technical Reviewer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Acknowledgments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
nCHAPTER 1 Design Patterns:Making CSS Easy! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
nCHAPTER 2 HTML Design Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
nCHAPTER 3 CSS Selectors and Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
nCHAPTER 4 Box Models. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
nCHAPTER 5 Box Model Extents. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
nCHAPTER 6 Box Model Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
nCHAPTER 7 Positioning Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
nCHAPTER 8 Positioning:Indented,Offset, and Aligned. . . . . . . . . . . . . . . . . . . . . 147
nCHAPTER 9 Positioning:Advanced . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
nCHAPTER 10 Styling Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
nCHAPTER 11 Spacing Content. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
nCHAPTER 12 Aligning Content. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
nCHAPTER 13 Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
nCHAPTER 14 Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
nCHAPTER 15 Tables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
nCHAPTER 16 Column Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
nCHAPTER 17 Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
nCHAPTER 18 Drop Caps. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
nCHAPTER 19 Callouts and Quotes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437
nCHAPTER 20 Alerts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455
nINDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481
v
www.it-ebooks.info
8040FM.qxd 3/29/07 12:23 PM Page vi
www.it-ebooks.info
8040FM.qxd 3/29/07 12:23 PM Page vii
Contents
About the Author. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
About the Technical Reviewer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Acknowledgments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
nCHAPTER 1 Design Patterns: Making CSS Easy! . . . . . . . . . . . . . . . . . . . . . . . . 1
Design Patterns—Structured Recipes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Using Design Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Using Stylesheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
CSS Syntax. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
CSS Syntax Details . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Using Whitespace in CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Using Property Values. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Using Cascade Order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Simplifying the Cascade. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
CSS and HTML Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
CSS Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
CSS Properties and Values:Common . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
CSS Properties and Values:Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
CSS Properties and Values:Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
CSS Properties and Values:Specialized . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Flexible Units of Measure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Fixed Units of Measure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Ratios Between Units of Measure at 96 dpi. . . . . . . . . . . . . . . . . . . . . . . . . 25
Typical font-size Values at 96 dpi. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Troubleshooting CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Normalized Stylesheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
vii
www.it-ebooks.info
8040FM.qxd 3/29/07 12:23 PM Page viii
viii nCONTENTS
nCHAPTER 2 HTML Design Patterns. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Chapter Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
HTML Structure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
XHTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
DOCTYPE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Header Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Conditional Stylesheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Structural Block Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Terminal Block Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Multi-purpose Block Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Inline Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Class and ID Attributes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
HTML Whitespace. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
nCHAPTER 3 CSS Selectors and Inheritance. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Chapter Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Type,Class,and ID Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Position and Group Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Attribute Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Pseudo-element Selectors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Pseudo-class Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Subclass Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Visual Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
nCHAPTER 4 Box Models. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Chapter Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Display. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Box Model. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Inline Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Inline-block Box. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Block Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Table Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Absolute Box. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Floated Box. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
www.it-ebooks.info
8040FM.qxd 3/29/07 12:23 PM Page ix
nCONTENTS ix
nCHAPTER 5 Box Model Extents. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Chapter Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Width. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Sized . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Shrinkwrapped. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Stretched. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
nCHAPTER 6 Box Model Properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Chapter Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Margin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Border. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Padding. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Overflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Visibility. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Page Break. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
nCHAPTER 7 Positioning Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Chapter Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Positioning Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Positioned. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Closest Positioned Ancestor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Stacking Context. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Atomic. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Static. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Absolute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Fixed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Relative. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Float and Clear. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Relative Float. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
nCHAPTER 8 Positioning: Indented, Offset, and Aligned. . . . . . . . . . . . . . . 147
Chapter Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Indented . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Offset Static . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Offset or Indented Static Table. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Offset Float. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
www.it-ebooks.info