Foundation HTML5 with CSS3

Contents

ix

progress.............................................................................................................................284

Interactive Elements ..............................................................................................................285

details and summary.........................................................................................................286

menu..................................................................................................................................287

command ...........................................................................................................................288

Styling Forms with CSS......................................................................................................... 289

Removing the Border from fieldsets ..................................................................................291

Aligning Labels ..................................................................................................................292

Changing Fonts in Form Controls .....................................................................................293

Summary ...............................................................................................................................295

Chapter 9: Page Layout with CSS .......................................................................... 297

The Box Model ......................................................................................................................298

Margins and Padding.........................................................................................................299

Borders ..............................................................................................................................300

Page Width: Fixed vs. Liquid.................................................................................................30 2

Fixed Width........................................................................................................................302

Liquid Width .......................................................................................................................304

Floating Columns ..................................................................................................................305

Clearing Floats ..................................................................................................................309

Positioning Elements .............................................................................................................314

Relative Positioning ........................................................................................................... 314

Absolute Positioning ..........................................................................................................3 17

Fixed Positioning ...............................................................................................................321

Summary ...............................................................................................................................327

Chapter 10: Putting it All Together......................................................................... 329
A Web Design Process .........................................................................................................33 0
Stage 1: Plan .....................................................................................................................330
Stage 2: Design .................................................................................................................332
Stage 3: Build ....................................................................................................................335
Stage 4: Test .....................................................................................................................335
Building Power Outfitters.......................................................................................................336
Setting Up the Document ..................................................................................................337
Assembling the Template ..................................................................................................339
Fleshing Out the Home Page ............................................................................................345
Designing Power Outfitters with CSS....................................................................................349
Resetting Browser Defaults ...............................................................................................351
Multiple Background Images .............................................................................................352
The Body Boundary...........................................................................................................355
Styling the Masthead .........................................................................................................35 5