.

Friday, April 2, 2010

Grouping with the div Element

Posted by devlevis | Friday, April 2, 2010 | Category: , , , , , |

Now that you know how to format paragraphs, what about groups of paragraphs?
Suppose, for example, that you wanted to indent an entire section of text and place a
border around the section. Although you can accomplish the indent by using styles
with paragraph tags, the unified border is harder to do.
For example, consider the following code, which uses styles and paragraph tags:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ParagraphBorders withParagraphTags</title>
<style type-"text/css">
p.indent-highlight { padding-left: 50px;
padding-right: 50px; border: solid 3px; }
</style>
</head>
<body>
<p class-"indent-highlight">For the first few days I could
not feed in peace; but as I found that this terrible creature
never came into the field, or did me any harm, I began to
disregard it, and very soon I cared as little about the
passing of a train as the cows and sheep did.</p>
<p class-"indent-highlight">Since then I have seen many
horses much alarmed and restive at the sight or sound of a
steam engine; but thanks to my good master's care, I am as
fearless at railway stations as in my own stable.</p>
<p class-"indent-highlight">Now if any one wants to break in
a young horse well, that is the way.</p>
</body>
</html>

The output of this code is shown in Figure . Note how each paragraph is
surrounded by its own border, which is not what you wanted.

This is where the division tag (<div>) comes in handy. The <div> tag is used to
delimit divisions of a document, which can include several paragraphs or other
block elements.
Instead of defining a style for the paragraph tag, define it as an unattached class (one
without a specified element) and use it with the <div> tag, as in the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Division Borders withDivision Tags</title>
<style type-"text/css">
.indent-highlight { padding-left: 50px;
padding-right: 50px; border: solid 3px; }
</style>
</head>
<body>
<div class-"indent-highlight">
<p>For the first few days I could not feed in peace; but as I
found that this terrible creature never came into the field,
or did me any harm, I began to disregard it, and very soon I
cared as little about the passing of a train as the cows and
sheep did.</p>
<p>Since then I have seen many horses much alarmed and
restive at the sight or sound of a steam engine; but thanks
to my good master's care, I am as fearless at railway
stations as in my own stable.</p>
<p>Now if any one wants to break in a young horse well, that
is the way.</p>
</div>
</body>
</html>

Note the output of this code in Figure .
 Note that the border in Figure  appears at the margins of the document, not
at the indent of the paragraphs it surrounds. This is because the style specifies
padding-left and padding-right, which affects the spacing between the
parent element (the border) and its children (the paragraphs). To indent the
border itself, you would need to specify values for margin-left and marginright.

Currently have 0 comments:


Leave a Reply

Subscribe to: Post Comments (Atom)