Friday 21st of November 2008 06:19:35 PM
such as "2.1" or "7.1.3." This can, however, be done under CSS2 and is briefly discussed in Chapter 10, "CSS2: A Look Ahead".

7.7.3. List Item Positions

There is one other thing you can do to influence the appearance of list items under CSS1, and that's change the position of the bullet itself, in relation to the content of the list item. This is accomplished with

CSS Tutorials

CSS Tutorials

Welcome to the CSS Tutorials. In this section we cover Cascading Style Sheets, the powerful supplement to HTML that allows you complete control over the look of your websites. We'll show you how to create Cascading Style Sheets, and some of the cool tricks you can achieve with them.

For Beginners...

Introduction to CSS
This tutorial covers the basics: what are style sheets? How do I make a style sheet? It also shows some of the cool things you can do with style sheets.

CSS Units
A description of all the units that can be used with CSS, including lengths, percentages, colours and URL's.

For Intermediate Users...

Controlling Background Images and Colours
Learn how to use CSS properties to add background images and colour to your Web pages. Lots of neat tricks and examples are included!

Controlling Fonts with CSS
In this tutorial we take a look at how to control the fonts used in your page body text, using the various font properties that can be controlled with style sheets.

Controlling Text Appearance with CSS
This tutorial shows you how to control the layout of your text using the text properties available in CSS, such as line spacing and text alignment.

Making Lists Look Nicer with CSS
You can really go to town with HTML lists when you add a sprinkle of CSS! This tutorial shows you how to make your lists stand out from the crowd.

For Advanced Users...

CSS Positioning
This tutorial teaches you how to use CSS to position images, text, and other elements on your Web pages. Essential reading for anyone who wants to start using CSS for layout.




Yes, the child element is wider than its parent! This is mathematically correct: 10 + 50 = 400. Even though this leads to a child element sticking out of its parent, technically the specification hasn't been violated, because the values of the seven properties add up to the required total. It's a semantic dodge, but it's valid behavior.

Let's consider another example, illustrated in Figure 8-20, where the left margin is set to be negative:

This will have the result shown in Figure 4-28: 

BODY {font-size: 10pt;}
P {font-size: 18pt; line-height: 27pt;}
BIG {font-size: 250%; line-height: 1em;}
<P>This paragraph's 'font-size' is 18pt, and the 'line-height' for this
paragraph is 27pt. A <BIG>larger element</BIG> within the paragraph does
not cause the line's height to change, but setting its 'line-height' does,
which leads to some interesting effects.</P>
  • mailto:  = compose and send e-mail (note: no slashes)
  • news:  = read/send to Usenet newsgroup
  • file:///  = local file access (note: 3 slashes)
    • Web servers typically have 3- or 4-part names; the last two parts comprisethe registered domain name, e.g., udel.edu.  Some webservers are configured as virtual hosts serving files under multiple interesting is that these two things actually do influence the heightof the line box. Consider Figure 8-66.

    Figure 8-66

    Figure 8-66. Adding padding and borders to an inline replaced element

    Note that the "first" line box is tall enough to containthe image, whereas the "second" is tall enough to containthe image, its padding, and its border. This is because the totalityof the replaced element (content, padding, borders) make up theinline box for the replaced element. This is what forces the lineboxes to be taller in Figure 8-66.ALIGNattribute options wrap the text around the image.  The other ALIGNoptionsposition the image relative to the current line only, and do not wrap otherlines: 
    TOP aligns top of image to highest element in the line. 
    TEXTTOP aligns top of image with highest text in theline. 
    MIDDLE aligns middle of image to baseline. 
    ABSMIDDLE aligns middle of image with middle of largest