HTML and CSS Reference
In-Depth Information
Figure 4-44
Rounded corners for the president's message
Vaclav Volrab/Shutterstock.com
Creating an Irregular Line Wrap
Many desktop publishing and word-processing programs allow designers to create
irregular line wraps in which the text appears to flow tightly around an image. This is not
easily done in Web page design because all inline images appear as rectangles rather
than as irregularly shaped objects. However, with the aid of a graphics package, you can
simulate an irregularly shaped image.
The trick is to use your graphics package to slice the image horizontally into several
pieces and then crop the individual slices to match the edge of the image you want to
display. Once you've edited all of the slices, you can use CSS to stack the separate slices
by floating them on the left or right margin, displaying each slice only after the previous
slice has been cleared. For example, the following style rule stacks inline images on the
right margin:
img {
clear: right;
float: right;
margin-top: 0px;
margin-bottom: 0px;
}
Always set the top and bottom margins to 0 pixels so that the slices join together
seamlessly. You can see an example of this technique in Figure 4-78 as part of Case
Problem 1 at the end of this tutorial.
Managing Your Layout
In layout design, you must be very aware of the width taken up by your page elements. If
the total width allotted to an element extends beyond its container, the element will wrap to
a new line, ruining your layout. The width taken up by an element is calculated as follows:
total width = content width + padding + border width
