| Previous | Table of Contents | Next |
In this lesson, you learn to place text elements on your web pages using margins.
A serious shortcoming of HTML is the difficulty of locating objects on web pages. The acceptance of tables has mitigated this somewhat. Tables make it possible to align text down the right side of the page. Style sheets provide web page authors with a whole new page layout facility, in the form of margins.
On a web page using styles, every block element can have a margin around all four of its sides, which are individually adjustable using absolute or relative values. Margins allow text blocks of any size to be created and placed anywhere on the canvas.
Block Element A block element is any HTML element that is automatically offset from its adjacent elements by a line space. For example, the <P> and <H1> tags are block elements, but the <EM> and <I> tags are not.
Along with font control, margins are the most crucial elements of the CSS1 standard because they bring the field of web page design almost to the level of desktop publishing. Unfortunately, this is an area in which Internet Explorer’s support for the standard is incomplete.
Margins allow you to locate text blocks of any size at precise locations on the canvas. You can modify the weight, color, and pattern of the border line surrounding the text, or just make it transparent. By bringing web page design closer to the long-standing principles of the printed page, the entire web publishing paradigm can be simplified through the use of pre-existing skills, tools, and techniques.
The standard defines every block element in a document as having padding, a border, and a margin around all four sides, in that order. The padding is the area of space between the contents of the text block and the margin. The border is a rectangular line surrounding the padding and the enclosed contents. The margin surrounds the border, completing the pattern of three adjustable barriers, as shown in Figure 11.1.
)
Figure 11.1 The CSS1 standard
provides for three adjustable barriers surrounding every block element in
an HTML document.
All three of these elements can be adjusted using styles. The border property can be applied to specify the thickness of the line. It can also be assigned a color or a graphic image as a fill. The padding property lets you adjust the size of the space between the border and the contents with absolute or relative measurements.
Internet Explorer 3.0 does not support the border and padding properties but does support the margin properties. The margin properties provide enough flexibility to demonstrate how much potential there is in the concept of page layout with styles.
There are four individual margin properties defined in the CSS1 standard—one for each side of a block element. They are named as follows:
Explorer Support Internet Explorer 3.0 does not support the margin-bottom property as defined in the CSS1 standard. In addition, the margin-top property, added to the final version of the browser just before its release, does not function properly, and creates margins far larger than their measurements.
Margin values are not inherited, in the strict sense of the word, but they are cumulative. The value for each margin property represents the distance from the margin of its adjacent element. That is, if a document’s <BODY> tag has been set to use a 1-inch margin on the left side, a block of text enclosed by <P> tags with the same 1-inch margin setting will begin at a point 2 inches from the edge of the page.
The exception to this rule occurs when two elements with opposing margins are stacked vertically. If an element with a margin-bottom value is directly atop an element with a margin-top value, the margins should collapse, and only the larger of the two values is applied.
Explorer Support The inheritance of margin properties is the area where the implementation of style sheets in Internet Explorer 3.0 differs most drastically from the CSS1 standard. In many cases, the value of a left or right margin in a child element replaces and overrides that of a parent, when the standard explicitly says that it shouldn’t. This behavior, however, is not consistent. At this time, trail and error is an essential part of working with margin settings. Internet Explorer 3.01 treats the left and right margins properly, but until you can be certain that your readers are using an updated browser, I recommend that you don’t create permanent style sheets for large-scale document conversions.
By default, margins are transparent, so the color or graphic pattern used by the parent element is still visible under the margin of a child element (unless the background property is applied with a different value).
Margin properties are notated much like other style properties, with a value specified after the property name, and separated by a colon and a space. Measurements can be specified using any one of the scales supported by the CSS1 standard, including:
Explorer Support Internet Explorer 3.0 provides no support for em measurements in any of its properties but relative measurements can be supplied using percentages.
Typical margin properties would appear in a style sheet as follows:
){kind=link}
BODY {margin-left: 1in;
margin-right: 2.54cm;
margin-top: 72pt}
As with all of the absolute measurements used in style sheets, you must account for the differences in monitor size and screen resolution. A 1-inch margin setting will not appear on every screen as exactly one inch, and documents styled with absolute margins can look very different on computers running at different resolutions.
When a web page with margins displays in the Internet Explorer, the screen is divided into three parts: the left margin, the content, and the right margin. If the margins are assigned absolute sizes, the width of the content area varies according to the size and resolution of the display. If the content is text, this could mean that a browser displayed at 640×480 pixels will have 5 words per line of text, while the same document could have up to 10 words per line at 1024×768 pixels.
For a page design such as Figure 11.2, absolute measurements may be acceptable. This document uses margins in a very simple way—to emphasize the headline by offsetting it to the left of a centered paragraph. The paragraph text adjusts itself to different screen resolutions, but the effect is still readable.
)
Figure 11.2 Margin values
specified with absolute measurements are useful in documents that are
consistently formatted and relatively plain.
There may be other times when you have a number of different elements on the page and you want to keep the relationships between them absolutely consistent. You will then have to use relative measurements to specify your margin properties.
Relative measurements for margin properties are specified using percentages that are measured against the parent element’s size from border to border. When you want to place an element in a specific area of the browser screen, relative measurements ensure that the element always appears in the same place in relation to the other screen elements.
As an example, recall the paragraphs that you used to practice creating class selectors in Lesson 4. You created three generic class selectors in your SAMPLE.HTML file that appear as follows:
){kind=link}
.left {margin-right: 50%}
.right {margin-left: 50%}
.center {margin-left: 25%; margin-right: 25%}
Each of these classes specifies a total of 50% margin space, isolating exactly half of the browser screen’s width for the display of text. Varying the percentages from margin-left to margin-right allows the three blocks of text in Figure 4.2 to be scattered around the screen in a consistent pattern. You may be able to use absolute measurements to achieve the same effect on your monitor, but when viewing the document on other systems, you could end up with text blocks of varying widths and erratic placement of your elements.
You can also create interesting effects with margin properties by assigning negative values to them. In this way, you can force a text element to be extended outside of its block, superimposing it over a graphic or another text block, as shown in Figure 11.3.
)
Figure 11.3 By assigning a
negative value to a margin property, text on a web page can be
superimposed over other text.
The HTML code used to create the figure is as follows:
){kind=link}
<HTML>
<HEAD>
<STYLE>
<!--
H1 {font-size: 56;
color: red;
text-align: right;
margin-left: -75%;
font-family: Impact}
P {font-family: Verdana}
.right {color: blue;
margin-left: 16pt}
.left {font-size: 12;
color: white}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR=white>
<TABLE>
<TD WIDTH=50% ALIGN=center VALIGN=TOP
STYLE="background: black">
<P CLASS=left>
abcdefghijklmnopqrstuvwxyz<br>abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz<br>abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz<br>abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz<br>abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz<br>abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz<br>abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz<br>abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz<br>abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz<br>abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz<br>abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz<br>abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz<br>abcdefghijklmnopqrstuvwxyz<TD>
<TD VALIGN=top WIDTH=50%>
<H1>HTML Style Sheets</H1>
<P CLASS=right>HTML style sheets are innovative primarily
in that they allow various different styles to be applied
to web pages by the author. Indeed, it could be said that
all web browsers already use a style to display text.
HTML style sheets are innovative primarily in that they
allow various different styles to be applied to web pages
by the author. Indeed, it could be said that all web
browsers already use a style to display text.
</P>
</TD>
</TABLE>
</BODY>
</HTML>
As you can see in the code, this HTML file is basically a table consisting of two cells, side by side, splitting the screen in the center. The left cell displays the white alphabet text on a black background. The right cell contains the actual paragraph text that uses a small 16-point margin-left value to keep the text away from the center dividing line. Notice that the margin value is based on the size of the right <TD> block that is the parent element of the <P> text.
The large headline is also part of the second, or right, table cell. The <H1> text is right justified, and the margin-left value of –75% allows it to cross the cell boundary and overlap the alphabet text. If the headline was part of the left cell, the text would be extended right off the screen.
You can elaborate further on this technique to create shadow-like effects for headline text. By replicating the <H1> element in the previous example twice and applying the .second and .third class identifiers, defined as follows, to the replicas, negative values for the margin-left and margin-top properties produce the results shown in Figure 11.4.
.second {margin-left: -70%;
margin-top: -25%;
color: gray}
.third {margin-left: -65%;
margin-top: -25%;
color: navy}
)
Figure 11.4 Applying negative
values to the left and top margins produces a cascading shadow effect.
In this lesson, you learned how to apply margin properties to place HTML elements in specific locations on a web page. In the next lesson, you learn to modify your text layout with indents and justification.
 |
 |
 |
){kind=link}