book

Professional CSS: Cascading Style Sheets for Web Design, Second Edition

Name: Professional CSS: Cascading Style Sheets for Web Design, Second Edition
ISBN: 9780470177082

by Christopher Schmitt, Todd Dominey, Cindy Li, Ethan Marcotte, Dunstan Orchard, Mark Trammell

May 2008

Intermediate to advanced

319 pages

7h 26m

English

Wrox

Read now

Unlock full access

Copyright
About the Authors
Credits
Acknowledgments
Introduction
Whom This Book Is ForHow This Book Is StructuredConventionsSource CodeErratap2p.wrox.com
1. Best Practices for XHTML and CSS
1.1. Shoehorning Structure and Presentation Together1.2. Learning to Love Your Markup1.2.1. XHTML: The New Hotness1.2.1.1. Beginning with the DOCTYPE Declaration1.2.1.2. Keeping Your Markup Well Formed1.2.1.3. Closing Every Element1.2.1.4. Setting Elements and Attributes to Lowercase1.2.1.5. Requiring a Value for Every Attribute1.2.2. Abstracting Style from Structure1.2.2.1. Avoiding Divitis and Classitis1.2.2.2. Moving toward Well-Meaning Markup1.2.2.3. Familiarizing Yourself with Other Markup Elements1.2.2.3.1. Better Know Headers1.2.2.3.2. Better Know Paragraphs1.2.2.3.3. Better Know Unordered Lists1.2.2.4. Take Stock of Your Content, Not Your Graphics1.3. CSS: Adding a Layer of Style1.3.1. Better Know Selectors1.3.1.1. Type Selectors1.3.1.2. The Universal Selector1.3.1.3. Descendant Selectors1.3.1.4. Class Selectors1.3.1.5. id Selectors1.3.2. Other Selectors1.3.2.1. Child Selectors1.3.2.2. Attribute Selectors1.3.3. Combining Multiple Declarations1.3.4. Grouping Selectors1.3.5. Indulging in Inheritance1.3.5.1. Examining Element Hierarchy1.3.5.2. Overriding Inheritance1.3.6. Putting It All into Action1.4. Understanding the Cascade1.4.1. Discovering Style's Origin1.4.2. Sorting by Specificity1.4.3. Sorting by Order1.5. Putting Theory into Practice1.5.1. Building to a Reliable Browser1.5.2. Rationalizing the Need for Hacks1.5.2.1. The Bug1.5.2.2. The Solution1.5.2.3. The Road Is Long1.5.2.3.1. CSS-Discuss1.5.2.3.2. Position Is Everything1.5.3. The Problem with Hacks1.5.4. Hacking Artfully for Fun and Profit1.6. Summary
2. Google's Blogger.com: Rollovers and Design Touches
2.1. Interviewing the Designer2.2. CSS-Enabled Rollovers2.2.1. Changing the Color and Background Color of Links (Simple)2.2.1.1. The XHTML2.2.1.2. The CSS2.2.2. Changing the Color and Background Color of Links (Complex)2.2.2.1. The XHTML2.2.2.2. The CSS2.2.2.3. The Images2.2.2.4. What Does It All Mean?2.2.3. Changing the Background Color of Table Rows2.2.3.1. The XHTML2.2.3.2. The CSS2.2.3.3. What Does It All Mean?2.2.4. Changing the Color of Text2.2.4.1. The XHTML2.2.4.2. The CSS2.2.4.3. Images2.2.4.4. What Does It All Mean?2.2.4.5. Dealing with Internet Explorer2.2.5. Changing the Background Position on Links2.2.5.1. Making Rollovers from Embedded Images2.2.5.2. The XHTML2.2.5.3. The CSS2.2.5.4. The Images2.2.5.5. What Does It All Mean?2.2.5.6. Dealing with Internet Explorer2.3. Summary
3. The Classic U.S. PGA Championship Web Site
3.1. Developing the Drop-Shadow Effect3.1.1. Creating the Illusion3.1.2. Adding Extra Realism3.2. Creating CSS Drop-Down Menus3.2.1. Customizing the Positioning of Drop-Down Menus3.2.2. Customization: Styling the Drop-Down Menus3.2.2.1. Important Caveat3.2.2.2. Understanding Usage3.2.2.3. The Bottom Line3.3. Engineering Web Standards–Compliant Flash Embedding3.3.1. Using the Flash Satay Method3.3.2. Writing the object/embed Tags Using JavaScript3.3.3. Knowing the SWFObject3.4. Summary
4. The University of Florida's UFL.edu
4.1. Looking Back at UF's First Web Site4.1.1. Reflecting on Its Revisions4.1.2. Examining the Current Site4.2. Defining the Site4.2.1. Building the Team4.2.2. Starting with User Research4.2.3. Examining Ourselves4.2.4. Defining Technical Specs4.2.4.1. Utilizing Web Standards4.2.4.2. Incorporating Accessibility4.3. Creating a Main Navigational Structure4.3.1. The XHTML4.3.1.1. Unordered Lists4.3.1.2. Nested Unordered Lists4.3.1.3. Weighting for Semantics4.4.4.4.1. The CSS4.4.2. The Images4.4.3. Brick by Brick4.4.3.1. Building the Box4.4.3.2. Styling the Section Headers4.4.3.3. Styling the Lists4.5. Making the Supplementary Navigation4.5.1. The XHTML4.5.1.1. Utility Navigation4.5.1.2. Role-Based Navigation4.5.1.3. Wrapping the Two Together4.6.4.6.1. The CSS4.6.1.1. Styling the Supplementary Navigation4.6.1.2. Styling the Utilities4.6.1.3. That Tricky Box Model4.6.1.4. Styling the Roles4.6.1.5. The Final Outcome4.7. Revisiting Flash Embedding4.7.1. Back to Flash Satay4.7.2. Server-Side Detecting with Flash Satay4.7.2.1. Apache and the BrowserMatch Directive4.7.2.2. Drawbacks and Barriers to Flash Satay with Server-Side Detection4.8. Looking for Missteps4.8.1. Leading Only by Example4.8.2. "Force of Habit" or "Who Moved My Input Field?"4.9. Summary
5. Stuff and Nonsense Ltd.: Strategies for CSS Switching
5.1. Laying the Foundation5.2. CSS Switching5.3. The Mechanics: How It's Supposed to Work5.3.1. Persistent Style Sheets5.3.2. Preferred Style Sheets5.3.3. Alternate Style Sheets5.3.4. Another Solution You (Almost) Can't Quite Use5.4. The Reality: How It Can Work Today5.4.1. Jumping on the JavaScript Bandwagon5.4.2. Gathering Requirements5.4.3. Building the Switching Function5.4.4. Baking a JavaScript Cookie5.4.5. Down with PHP5.4.6. Creating the Script5.4.7. Eating the Cookie5.5. CSS beyond the Browser5.5.1. Media Types: Let the Healing Begin5.5.2. The Problem with Choice5.6. Stuff and Nonsense: Building a Better Switcher5.7. Meet the Designer: Andy Clarke5.8. Summary

6. Adventures of CindyLi.com: Blog Modifications
6.1. Blogs6.2. CSS: Cindy Li Starts to Blog6.3. Design Elements6.3.1. Creating a Layout6.3.2. Laying Out the Design6.4. Creating the Site6.4.1. Designing the Navigation Bar6.4.1.1. Sizing6.4.1.2. Coloring6.4.1.3. Text6.4.2. Making the Rollover Graphics6.4.3. Setting Up the Navigation Markup and CSS6.4.4. Integrating the Rollovers6.5. Setting the Speech Bubble6.5.1. Coding the Speech Bubble6.5.2. Reapplying the Effect6.5.3. Putting on the Flickr Badge6.6. Check Box Styling6.7. Summary
7. AIGA Cincinnati: HTML Email Templates
7.1. Dealing with HTML Email7.2. Producing the Template7.2.1. Printing the Design7.2.2. Creating the HTML Table Layout7.2.3. Adjusting the Design7.2.4. Exploring the Effects of CSS Rules on an HTML Email Template7.3. Embedding Styles7.4. Using Preflight for HTML Email7.5. Summary
8. Professional CSS Book Site: Using Transparent PNGs
8.1. PNGs and Browser Support8.1.1. Image Filter Workaround for Using PNGs with IE68.1.2. HTC Script Workaround for Using PNGs with IE68.1.3. Color Issues with PNGs8.2. Using Alpha-Transparency8.2.1. Better Shadows8.2.2. Using Color Shades8.3. Summary
9. Building CSS Layouts
9.1. On Grids and Layouts9.2. Doing What Print Can't9.3. CSS Positioning: The Fundamentals9.3.1. Absolutely Fabulous Positioning9.3.2. Positioning That's Absolutely Relative9.4. Building Three Columns: Laying the Foundation9.4.1. Writing the XHTML: From Mockup to Markup9.4.2. A Layer of Style9.4.2.1. Get Your Offset On: Introducing the Positioning Rules9.4.2.2. Remembering to Keep It Absolutely Relative9.5.9.5.1. Battling Browser Bugs9.5.1.1. Macintosh Internet Explorer 59.5.1.2. Windows Internet Explorer 5.x+9.6. Setting Some Boundaries: The max-width Property9.7. Summary
A. HTML 4.01 Elements
B. Rules for HTML-to-XHTML Conversion
B.1. The XML DeclarationB.2. Picking Your Comfort LevelB.3. Rules for XHTMLB.3.1. Don't Forget the Namespace AttributeB.3.2. Quoting Attribute ValuesB.3.3. No Attribute MinimizationB.3.4. Terminating Empty ElementsB.3.5. Cleaning NestsB.3.6. XHTML with CSS and JavaScript FilesB.3.7. Lowercase Element and Attribute NamesB.3.8. Introduce ID When Using nameB.3.9. Encode AmpersandsB.3.10. When in Doubt, Validate
C. CSS 2.1 Properties
D. CSS Troubleshooting Guide
D.1. ValidationD.1.1. HTMLD.1.2. CSSD.2. Manipulating the ElementsD.2.1. Zeroing Out the Padding and MarginsD.2.2. Applying Color to Borders and BackgroundsD.2.3. Placing Variations in Property ValuesD.2.4. Playing Hide and SeekD.2.5. Validating AgainD.3. Bringing in Outside HelpD.3.1. Web Site ResourcesD.3.1.1. positioniseverything.netD.3.1.2. Web Developer ToolbarD.3.1.3. FirebugD.4.D.4.1. Mailing ListsD.4.1.1. css-discussD.4.1.2. Babble List

Content preview from Professional CSS: Cascading Style Sheets for Web Design, Second Edition

Chapter 9. Building CSS Layouts

	We adore chaos because we love to produce order.
	--M. C. Escher

By the time 2003 began in earnest, a rather sizable snowball was rolling. In October of 2002, Wired News abandoned traditional table-driven layout methods for a CSS-driven design. At that time, Wired wasn't the first redesign of its kind, but it was certainly the most highly trafficked. The site's chief designer, Douglas Bowman, took a highly visible and well-established brand and delivered a compelling new design — all with standard technologies such as CSS and XHTML that would, as Bowman put it, help "lift the Web out of the dark ages" (Wired News, "A Site for Your Eyes": www.wired.com/news/culture/0,1284,55675,00.html).

For the next few months, you could almost hear the crickets chirping. Wired News had lifted style sheets out of the realm of academics and saber-waving standards advocates and placed them squarely and confidently in the realm of mainstream.

On Grids and Layouts

Layouts come from the practice of designing with grids. By dividing up a page into logical, repeating sections, you can bring order to chaos. With humans looking at the page and wanting to get on with their lives, content needs to be organized into a sane presentation. Grids and, by extension, the layouts they create allow you to create that presentation.

An excellent example of layouts in everyday usage is the newspaper. Every day the front page has to promote dozens of stories and elements covering a range of ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Smashing CSS: Professional Techniques for Modern Layout

Publisher Resources

ISBN: 9780470177082Purchase book

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Professional CSS: Cascading Style Sheets for Web Design, Second Edition

by Christopher Schmitt, Todd Dominey, Cindy Li, Ethan Marcotte, Dunstan Orchard, Mark Trammell

Chapter 9. Building CSS Layouts

On Grids and Layouts

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.