Bulletproof Web Design: Improving flexibility and protecting against worstcase scenarios with XHTML and CSS [Electronic resources] نسخه متنی

Index

[SYMBOL]
[A]
[B]
[C]
[D]
[E]
[F]
[G]
[H]
[I]
[J]
[K]
[L]
[M]
[N]
[O]
[P]
[Q]
[R]
[S]
[T]
[V]
[W]
[X]
[Z]

Safari browser example

<caption> elements and 2nd

keywords and text sizing and

SBMH (Simplified Box Model Hack)

scalable site navigation 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th

common approach, LanceArmstrong.com 2nd

ESPN.com Search 2nd 3rd

image-based navigation shortcomings, LanceArmstrong.com 2nd

Mozilla.org

re-design of, LanceArmstrong.com 2nd 3rd 4th 5th 6th 7th 8th 9th

background images, aligning 2nd

bottom border, adding 2nd

flexibility of design

float-to-fix method

hovering swap 2nd

lists, unstyled and unordered 2nd

selected state

state images, selected and unselected 2nd

style, applying 2nd

tabs, shaping

slant-separated navigation example

scope attribute, adding 2nd

screen-reading application (JAWS), and lists

selected state

selectors, descendant selector

self-clearing fix for IE/Win

shadows

adding as subtle frame

finished footer and shadow fade

offset shadows, adding 2nd 3rd 4th

"Show all DIVs" favelet

sidebars

adding colors to 2nd

background design construction 2nd

sidebar columns

basics of 2nd 3rd 4th 5th 6th

creating illusion of

sidebar headings 2nd 3rd

Simple Bits examples

images turned off example

common approach to 2nd 3rd

fix of 2nd 3rd 4th

problems with common approach 2nd

slant-separated navigation example

Simplified Box Model Hack (SBMH)

site navigation
[See scalable site navigation]

sizing

CSS-based layouts, proportional sizing of

images, using ems for sizing

sizing text, user control of 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st

absolute-size keywords 2nd 3rd 4th 5th 6th 7th

browser display variability 2nd 3rd 4th 5th

defined 2nd

explained 2nd

base-plus-percentage method 2nd 3rd 4th 5th

percentages, using to vary from base 2nd 3rd 4th

setting base-keyword

common approach, Eyeglasses.com 2nd 3rd

keywords and percentages, working with 2nd 3rd 4th 5th 6th 7th

in-between keyword base, setting 2nd 3rd

nesting percentages 2nd 3rd

percentage values, experimenting with 2nd

options for 2nd 3rd

absolute-size keywords, defined 2nd

length units 2nd

percentages to assign sizes 2nd

relative-size keywords, defined

slant-separated navigation

"Sliding Doors" method 2nd

sliding faux columns

three-column layouts 2nd 3rd

two-column design 2nd 3rd 4th 5th 6th

spacers GIFs

controlling white space with

spacer GIF shims, defined

sta89 hack

state, selected

"Strategies for Long-Term CSS Hack Management"

structure of rows

Best Store Ever example 2nd

separation of design and structure

TicTac template example

style sheets.

devices not supporting
[See bulletproof design in absence of CSS and images, CSS]

"Disable stylesheets" favelet
[See bulletproof design in absence of CSS and images, CSS]

styles

<dt> elements

applying

base styles for grid-like results 2nd 3rd 4th 5th 6th

fixed-width boxes 2nd 3rd

fluid three-column design 2nd 3rd

fluid two-column design 2nd 3rd 4th

fluid-width boxes 2nd 3rd 4th 5th

headers in full-page design 2nd 3rd

scalable navigation 2nd

to headers

applying to tables 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th

<caption> elements 2nd

border and background, setting

custom alignment 2nd

header color, adding 2nd

new line without <br /> elements 2nd

offset shadow, adding 2nd 3rd 4th

padding and dividing line, adding

row colors, alternating 2nd

basic, in full-page design

of rows, identifying elements for 2nd

style hooks

testing when disabled

Sweden photos example

borders 2nd

definition lists and 2nd

images

description lengths, clearing for 2nd 3rd 4th 5th 6th

identifying 2nd

positioning 2nd

spacing, adjusting between images and text 2nd 3rd 4th