List of Figures

 < Day Day Up > 

 



Chapter 1: Lists

Figure 1-1: An example with default text size
Figure 1-2: The same example with increased text size
Figure 1-3: Default rendering of an unordered list
Figure 1-4: A list with bullets turned off
Figure 1-5: A list with bullets and indenting turned off
Figure 1-6: A list with custom bullets
Figure 1-7: The resulting mini-tab navigation bar
Figure 1-8: A mini-tab navigation bar with shaped background images
Figure 1-9: A few other various shape possibilities

Chapter 2: Headings

Figure 2-1: An example of an unstyled view of a page that uses heading tags
Figure 2-2: An example of a styled heading
Figure 2-3: A styled heading with a gray bottom border
Figure 2-4: A heading example with background color and padding
Figure 2-5: A heading with background and border bottom
Figure 2-6: A 10 10 pixel image created in Photoshop (magnified)
Figure 2-7: A heading with tiled background image
Figure 2-8: A heading with a background image icon
Figure 2-9: A 13 13 pixel transparent icon (zoomed)
Figure 2-10: The resulting transparent image with CSS background applied
Figure 2-11: A heading with background image and color applied

Chapter 3: Tables are Evil?

Figure 3-1: Example of a typical data table
Figure 3-2: Table example with borders added to right and bottom of <th> and <td>
Figure 3-3: Table example with top and left borders added
Figure 3-4: A perfect grid using the border-collapse property
Figure 3-5: 10 pixels of padding added
Figure 3-6: The face of a clock represents the order of margin or padding values.
Figure 3-7: Caption and <th> styled
Figure 3-8: 1 4 pixel stripe image created in Photoshop (zoomed)
Figure 3-9: An example of a tiled image background applied to table header cells
Figure 3-10: Three table header icons created in Photoshop
Figure 3-11: An example of unique icons assigned to each <th>

Chapter 4: Quotations

Figure 4-1: Three images created in Photoshop to create quotation marks and rounded corners
Figure 4-2: Resulting styled blockquote using three background images and text
Figure 4-3: The styled <blockquote> with <strong> tags added for calling out certain words
Figure 4-4: An unstyled view of our <blockquote> example

Chapter 5: Forms

Figure 5-1: Method A as rendered in a browser
Figure 5-2: Method B as rendered in a browser
Figure 5-3: Method B with padding added to the input elements
Figure 5-4: Method C as viewed in a browser, with CSS applied to <p> tags
Figure 5-5: Example of check box option added with clickable text
Figure 5-6: Default form layout using a definition list
Figure 5-7: Definition list form example with <dd> margins removed
Figure 5-8: Form layout with floated <dt> elements
Figure 5-9: Our example form with 200 pixel width applied to all <input> elements
Figure 5-10: Our form example with only text inputs at 200 pixels wide
Figure 5-11: Our example form with styled <labels>
Figure 5-12: Our form example with <fieldset> and <legend> added
Figure 5-13: Our form example with <fieldset> styled
Figure 5-14: Our completed form example, styled with CSS

Chapter 6: <STRONG>, <EM>, and Other Phrase Elements

Figure 6-1: An example of a list of bold links contained within a sidebar
Figure 6-2: A book title marked up with <cite> and styled with CSS
Figure 6-3: Mark Pilgrim's "posts by citation" results on "dive into mark" (www.diveintomark.org/archives/citations/dan_cederholm/)
Figure 6-4: Example of <abbr> results in a typical browser

Chapter 7: Anchors

Figure 7-1: Demonstration of clicking a link to a named anchor
Figure 7-2: An example with the title attribute revealed by the mouse hover
Figure 7-3: A link example with underline-overline text decoration
Figure 7-4: A link with a right-aligned icon as a background image
Figure 7-5: A link with a dotted border

Chapter 8: More Lists

Figure 8-1: Method A as viewed unstyled in a browser
Figure 8-2: Method B as viewed in a browser
Figure 8-3: Comparison of the wrapping of lines in Methods A and B
Figure 8-4: An ordered list with Roman numerals
Figure 8-5: Method A as viewed in a typical browser
Figure 8-6: Method B as viewed in a typical browser
Figure 8-7: Method B with font-weight— bold; applied to <dt> elements
Figure 8-8: A definition list with a background image denoting the relationships
Figure 8-9: Our ordered list with numbers turned off with CSS
Figure 8-10: Five GIF images to be used for our ordered list
Figure 8-11: Our unordered list styled with custom number images

Chapter 9: Minimizing Markup

Figure 9-1: Unstyled rendering of the nested list markup
Figure 9-2: Adding style to the top-level list items
Figure 9-3: Custom bullets added to third-level items
Figure 9-4: Final styled site map, with dotted border applied to second-level lists
Figure 9-5: Expanded site map with nested lists and CSS

Chapter 10: Applying CSS

Figure 10-1: My personal site with CSS
Figure 10-2: The same page, without CSS, as an older browser may render it
Figure 10-3: Mozilla's alternate style sheet selection menu
Figure 10-4: Alternate style sheet being activated by the clicking of an icon

Chapter 11: Print Styles

Figure 11-1: SimpleBits as viewed in a browser with screen styles enabled
Figure 11-2: SimpleBits, print version

Chapter 12: CSS Layouts

Figure 12-1: Wireframe of the intended two-column layout
Figure 12-2: Adding style to the header and footer
Figure 12-3: Floating the #sidebar to the right of the content
Figure 12-4: A two-column layout
Figure 12-5: Floating the content, with the sidebar's background color showing through
Figure 12-6: Floated content with background color omitted
Figure 12-7: Two-column layout using positioning
Figure 12-8: Overlapping sidebar and footer
Figure 12-9: Footer with margin-right matching the content area
Figure 12-10: A flexible three-column layout using positioning
Figure 12-11: Correct calculation of the box model
Figure 12-12: IE5/Windows' incorrect calculation of width, padding, and borders
Figure 12-13: Columns of unequal length
Figure 12-14: tile.gif— A 2-pixel-tall background image, with widths allotted for columns
Figure 12-15: Tiled background image creates the colored columns.

Chapter 13: Styling Text

Figure 13-1: Heading and text as viewed by default in the browser
Figure 13-2: Default text with increased line height
Figure 13-3: Our example rendered with the Georgia typeface
Figure 13-4: Negative letter-spacing applied to our <h1>
Figure 13-5: Positive letter-spacing and italics applied
Figure 13-6: Drop caps example created with CSS
Figure 13-7: An example of justified text, using the text-align property
Figure 13-8: Centered <h1> using the text-align property
Figure 13-9: Capitalization of the heading using CSS
Figure 13-10: Our heading rendered in small caps
Figure 13-11: Indented paragraphs as a result of the text-indent property

Chapter 14: Image Replacement

Figure 14-1: Default rendering of our heading
Figure 14-2: fir.gif, the image we'll be using to replace the text
Figure 14-3: The results of using the Fahrner Image Replacement method
Figure 14-4: lir.gif, created in an image editor
Figure 14-5: phark.gif, the 26-pixel-tall image we'll use for replacement
Figure 14-6: logo_lofi.gif that unstyled viewers will see (lo-fi)
Figure 14-7: logo_corn.gif that CSS-enabled viewers will see (hi-fi)
Figure 14-8: Hyperlinked logo, with clickable area shown
Figure 14-9: Hi-fi logo for CSS-enabled browsers
Figure 14-10: Lo-fi logo for unstyled viewers
Figure 14-11: FastCompany.com's tabbed navigation, circa February 2004
Figure 14-12: A single image containing the three states
Figure 14-13: Resulting tabbed navigation with each of the three states demonstrated
Figure 14-14: Tab navigation with larger image set activated from an alternate style sheet

Chapter 15: Styling <body>

Figure 15-1: Example of a Fast Company "index page" with three columns
Figure 15-2: Example of a Fast Company "article page" with two columns
Figure 15-3: Horizontal navigation with shaped tabs
Figure 15-4: Tab selected by assigning an id to the <body> element



 < Day Day Up > 

 



Web Standards Solutions. The Markup and Style Handbook
Web Standards Solutions: The Markup and Style Handbook (Pioneering Series)
ISBN: 1590593812
EAN: 2147483647
Year: 2003
Pages: 119
Authors: Dan Cederholm

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net