You are previewing More Eric Meyer on CSS.
O'Reilly logo
More Eric Meyer on CSS

Book Description

Ready to commit to using more CSS on your sites?  If you are a hands-on
learner who has been toying with CSS and want to experiment with real-world
projects that will enable you to see how CSS can help resolve design issues,
this book is written just for you! CSS master Eric A. Meyer has picked up
where Eric Meyer on CSS: Mastering the Language of Web Design left off.  He
has compiled 10 new, highly useful projects designed to encourage you to
incorporate CSS into your sites and take advantage of the design
flexibility, increased accessibility, decreased page weight, and cool visual
effects CSS offers.

Each project is laid out in an easy-to-follow, full color format complete
with notes, warnings, and sidebars to help you learn through example rather
than theory.  Some of the concepts covered include:

• Converting an HTML-based design to a pure positioning layout
• Styling a photo gallery
• Using background images to achieve cross-browser translucency effects
• Using lists of links to create tabs and drop down menus without the use of
  JavaScript
• Styling weblog entries, and placing them in a full-page design
• Creating a design for the CSS Zen Garden

Table of Contents

  1. Copyright
    1. Dedication
  2. About the Author
  3. About the Technical Reviewers
  4. Acknowledgments
  5. Tell Us What You Think
  6. Foreword
  7. Introduction
    1. Should You Buy This book?
      1. Those for Whom This Book Is Meant
      2. Those for Whom This Book Is Not Meant
    2. What You Can Expect from This Book
    3. Project Overview
    4. Companion Web Site
    5. Conventions
  8. 1. Converting an Existing Page
    1. Project Goals
    2. Preparation
    3. Laying the Groundwork
    4. Converting the Document
      1. Stripping Down to the Minimum
      2. The Skeletal Structure
    5. Rebuilding the Design
      1. Basic Styles
      2. Tightening Up the Top
      3. Filling Out the Navbar
      4. Title and Summary Styles
      5. Information on the Side
      6. A Review with Style
      7. Pulling the Quote and Enhancing the Design
      8. The Masthead Revisited
    6. Assessing the Benefits
      1. A Caveat
    7. Branching Out
  9. 2. Styling a Photo Collection
    1. Project Goals
    2. Preparation
    3. Laying the Groundwork
    4. Creating the Contact Sheet View
      1. Floating Away
      2. Spacing and Centering
      3. Sliding into Style
    5. Creating the Gallery View
      1. Removing the Slide Styles
      2. Titular Revelations
      3. Cleaning Up
      4. Height and Tables
    6. Creating the Catalog View
      1. Floating Again
      2. Alignment and Placement
      3. Improving the Listings
      4. Boxing the Information
    7. Branching Out
  10. 3. Styling a Financial Report
    1. Project Goals
    2. Preparation
    3. Styling for the Screen
      1. Laying the Foundations
      2. Baseline Styles
      3. Tackling the Table Labels
      4. Profit Styles
      5. Accentuating the Negatives
      6. Total Styles
      7. Finishing Touches
    4. Styling for Print
      1. Starting Out
      2. Row Highlighting
      3. The Totals Row
    5. Branching Out
  11. 4. Positioning in the Background
    1. Project Goals
    2. Preparation
    3. Style at Dawn
      1. Getting Started
      2. Masthead Styles
      3. Cleaning Up
    4. Beached Styles
      1. Assessing Structure and Style
      2. Title Styles
      3. Content Styles
      4. Adding the Backgrounds
      5. Pros and Cons
    5. Branching Out
  12. 5. List-Based Menus
    1. Project Goals
    2. Preparation
    3. Laying the Groundwork
      1. Examining the Markup
    4. Open and Airy
      1. Separation
      2. Arrow Style
      3. Styling the Links
    5. Enclosing the Links
      1. Changes
      2. Boxed Links
      3. Straddling the Lines
    6. Branching Out
  13. 6. CSS-Driven Drop-Down Menus
    1. Project Goals
    2. Preparation
    3. Laying the Groundwork
    4. Laying Out the Menus
      1. Planning Ahead
      2. Positioning the Submenus
      3. Prettier Menu Styles
      4. Blocking Out Links
      5. Hovering Entries
      6. Special Submenu Styles
      7. Preparing for Pop-Ups
      8. Finishing Touches
    5. Reorienting the Menus
      1. Reorientation
      2. Starting the Fixes
      3. Submenu Corrections
    6. For Your Consideration
    7. Branching Out
  14. 7. Opening the Doors to Attractive Tabs
    1. Project Goals
    2. Preparation
    3. Laying the Groundwork
    4. Styling the Links
      1. Starting the Styles
      2. Refining the Tab Look
      3. Adding Texture
      4. Hovering and Finishing
      5. Cut Off Text and Shrunken Hotspots
    5. Creating Actual Tabs
      1. Making Some Changes
      2. Putting in a Tab
      3. Indicating the Current Tab
      4. Odds and Ends
    6. Branching Out
  15. 8. Styling a Weblog
    1. Project Goals
    2. Preparation
    3. Laying the Groundwork
    4. Styling the Weblog
      1. Tackling the Title
      2. Entry Title and Date
      3. Splitting and Rejoining
      4. Text and Information
      5. Finishing Touches
    5. Branching Out
  16. 9. Designing a Home Page
    1. Project Goals
    2. Preparation
    3. Laying the Groundwork
    4. Creating the Design
      1. Two Images Behind the Masthead
      2. Shifts and Borders
      3. Content and Sidebar
      4. Simple Sidebar Styling
      5. Adding Another Leaf
      6. Sidebar Links
      7. Border Changes
      8. Natural Highlighting
      9. Finishing Touches
    5. Branching Out
  17. 10. Designing in the Garden
    1. Project Goals
    2. Preparation
    3. Laying the Groundwork
    4. Creating the Design
      1. Planting the Seeds
      2. The Page Header
      3. Adding a Floral Touch
      4. Styling the Summary
      5. Main Content Styling
      6. Fancy Footer Work
      7. Sidebar Style
    5. Adding a PNG
    6. Reflections
    7. Branching Out