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
ADO.NET 3.5 Cookbook (Cookbooks (OReilly))
Using the Data Link Properties Dialog Box
Getting Typed DataRows from DataViews
Updating Data Asynchronously Using Message Queuing
Canceling an Asynchronous Query
Performing Batch Updates with a DataAdapter
Kanban Made Simple: Demystifying and Applying Toyotas Legendary Manufacturing Process
Introduction to Kanban
Initial Startup and Common Pitfalls
Auditing the Kanban
Appendix B Kanban Supermarkets
Appendix E EOQ vs. Kanban
Secure Programming Cookbook for C and C++: Recipes for Cryptography, Authentication, Input Validation & More
Including an Inline File
Doing a Case-Insensitive String Search
Computing a Dot Product
Initializing Shared Resources Once
Evaluating an XPath Expression
Cisco CallManager Fundamentals (2nd Edition)
Cisco CallManager Architecture
Overview of CDR Data
Appendix C. Protocol Details
H.323 Signaling
Application Protocols
Professional Struts Applications: Building Web Sites with Struts ObjectRelational Bridge, Lucene, and Velocity (Experts Voice)
Creating a Struts-based MVC Application
Managing Business Logic with Struts
Building a Data Access Tier with ObjectRelationalBridge
Creating a Search Engine with Lucene
Building the JavaEdge Application with Ant and Anthill
Junos Cookbook (Cookbooks (OReilly))
Keeping a Record of Configuration Changes
Viewing Routes to a Particular Prefix
Configuring IS-IS
Setting Up Route Reflectors
Tracing LDP Operations
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