Flylib.com
List of Figures
Previous page
Table of content
< 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 >
Previous page
Table of content
Web Standards Solutions: The Markup and Style Handbook (Pioneering Series)
ISBN: 1590593812
EAN: 2147483647
Year: 2003
Pages: 119
Authors:
Dan Cederholm
BUY ON AMAZON
Data Structures and Algorithms in Java
Problems
Summary
Red-Black Trees
Projects
Out to the Disk
The Java Tutorial: A Short Course on the Basics, 4th Edition
About the Java Technology
Runtime Exceptions The Controversy
Summary of Reading and Writing
Finishing an Applet
Implementations
Information Dashboard Design: The Effective Visual Communication of Data
Displaying Excessive Detail or Precision
Choosing Inappropriate Display Media
Highlighting Important Data Ineffectively or Not at All
Understanding the Limits of Short-Term Memory
Sample Sales Dashboard
Oracle SQL*Plus: The Definitive Guide (Definitive Guides)
Saving and Retrieving the Buffer
Executing a Script
Advanced Reports
Report Headers and Footers
Triggers
The Oracle Hackers Handbook: Hacking and Defending Oracle
Attacking the Authentication Process
Oracle and PL/SQL
Triggers
Defeating Virtual Private Databases
Running Operating System Commands
FileMaker 8 Functions and Scripts Desk Reference
Timestamp Functions
FilterValues()
GetAsSVG()
SetPrecision()
TrimAll()
flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net
Privacy policy
This website uses cookies. Click
here
to find out more.
Accept cookies