Saturday 30th of August 2014 02:12:33 PM

Book Home

Cascading Style Sheets: The Definitive GuideSearch this book

P.hang {text-indent: -30px;}<P CLASS="hang"><IMG SRC="floater.gif" WIDTH="30px" HEIGHT="60px"ALIGN="left" ALT="Floated">This paragraph has a negatively indented firstline, which overlaps the floated image which precedes the text.  Subsequentlines do not overlap the image, since they are not indented in any way.</P>

Many interesting designs can be achieved using this simple technique.Figure 4-6 shows one example, where the first lineof text has been indented -40px.

Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Index: U

U element: 4.1.6. Text Decoration
UA (see user agent)
underlining: 4.1.6. Text Decoration
changing color of: 4.1.6.1. Weird decorations
removing from hyperlinks: 4.1.6. Text Decoration
turned off by browsers: 4.1.6.1. Weird decorations
Uniform Resource Identifier (URI): 3.5. CSS2 Units
Uniform Resource Locators (see URLs)
units: 11.1.3. Case 3: Putting a Magazine Article Online
(see also length units; CSS2 units)
for aural style sheets: 3.5. CSS2 Units
avoiding mixing: 11.1.3. Case 3: Putting a Magazine Article Online
color: 3.6. Summary
universal selector: 10.2.1.1. Universal selector
unordered lists: 7.7.1. Types of Lists
unvisited anchors: 2.4.1. Pseudo-Class Selectors
uppercase text: 4.1.5. Text Transformation
upright text: 5.4.1. Fonts with Style
URI (Uniform Resource Identifier): 3.5. CSS2 Units
URLs (Uniform Resource Locators): 3.4. URLs
HREF attribute and: 1.4.1.1. LINK attributes
referring to in style sheets: 3.4. URLs
specifying for images: 6.2.1. Background Images
user agent (UA): 2.2.2. Grouping Declarations
2.2.2. Grouping Declarations
(see also browsers)
users, selecting alternate style sheets: 1.4.1.2. Alternate style sheets


Symbols | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z


Library Navigation Links

Copyright © 2002 O'Reilly & Associates, Inc. All Rights Reserved.

lines, as shown in Figure 8-62.

Figure 8-62

Figure 8-62. Inline borders can be overlapped

One solution is to increase the line-height of theparagraph. This will affect every line in the entire element, notjust the line in which the bordered hyperlink appears:

A:link {border: 5px solid blue;}P {font-size: 14px; line-height: 24px;}

Because there is extra space added above and below each line, the

Example

H1 {clear: right;}

Values

none | left |