In This Chapter
Understanding the Window and Document
Setting the Visibility of an Element
Clipping an Element’s Visible Area
Whether your designs are meant to be pixel perfect or fluid, element positioning is the key to any good design. You’ve already learned how to use CSS to control margins and padding in your composition (Chapter 10). With CSS, you can also position elements in the window, either exactly (absolutely or fixed) or in relation to other elements in the document (relatively). You can also set the visibility of any element in the window, making it visible, hidden, transparent, or even clipped on its sides.
This chapter introduces you to the methods you can use to position HTML elements using CSS, including how to stack elements on top of one another and float elements next to each other.
For this chapter’s example, I’ll be using the text and images from Chapter 7 of Alice’s Adventures in Wonderland (Code 11.1A). This also includes the aside “About The Author” that we’ll be styling in this chapter. We’ll be building the CSS file visualformatting-properties.css (Code 11.1B). See the final version of this file at the end of the chapter in “Putting It All Together.”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Alice’s Adventures In Wonderland | Chapter VII</title>
<link href="../css/font-properties.css" type="text/css" rel="stylesheet" media="all">
<link href="../css/text-properties.css" type="text/css" rel="stylesheet" media="all">
<link href="../css/color-background-properties.css" type="text/css" rel="stylesheet" media="all">
<link href="../css/list-table-properties.css" type="text/css" rel="stylesheet" media="all">
<link href="../css/ui-generatedcontent-properties.css" type="text/css" rel="stylesheet" media="all">
<link href="../css/box-properties.css" type="text/css" rel="stylesheet" media="all">
<link href="../css/visualformatting-properties.css" type="text/css" rel="stylesheet" media="all">
</head>
<body id="chapter7" class="book aaiw chapter">
<header class="page">
<hgroup>
<h1>Alice’s Adventures in Wonderland</h1>
<h2>By <cite>Lewis Carroll</cite></h2>
</hgroup>
</header>
<article>
<h2>Chapter VII
<span class="chaptertitle">A Mad Tea-party</span>
</h2>
<p>There was a table set out under a tree in front of the house, and the March Hare and the Hatter were having tea at it: a Dormouse was sitting between them, fast asleep, and the other two were using it as a cushion resting their elbows on it, and talking over its head. "Very uncomfortable for the Dormouse," thought Alice; "only as it's asleep, suppose it doesn't mind."</p>
...
</article>
<aside>
<h2>About the Author</h2>
<p><b>Charles Lutwidge Dodgson</b> (7 January 1832 – 14 January 1898), better known by the pseudonym Lewis Carroll was an English author, mathematician, logician, Anglican deacon and photographer. His most famous writings are Alice's Adventures in Wonderland and its sequel Through the Looking-Glass, as well as the poems "The Hunting of the Snark" and "Jabberwocky", all examples of the genre of literary nonsense. He is noted for his facility at word play, logic, and fantasy, and there are societies in many parts of the world (including the United Kingdom, Japan, the United States, and New Zealand) dedicated to the enjoyment and promotion of his works and the investigation of his life.</p>
</aside>
<footer>
<nav>
<a href="AAIWL-ch06.html" class="prev">Advice from a Caterpillar</a>
<a href="EB9780133132762_6.html">Table of Contents</a>
<a href="AAIWL-ch08.html" class="next">A Mad Tea-party</a>
</nav>
</footer>
</body>
</html>
/*** visualformatting-properties.css ***/
A Web page (also referred to as the document) is displayed within a browser window’s viewport. Everything that you can present to the viewer is displayed in that area, although the document will require scrolling if it is larger than the viewport.
You can open multiple windows (each displaying its own documents in its own viewport), resize and position windows on the screen, or insert smaller viewports called iframes. Everything that you present, however, is displayed within a browser window as part of a document.
Like the elements contained within it (see “Understanding an Element’s Box” in Chapter 10), the window has a width and height, as well as a top, bottom, left, and right. In fact, you can think of the browser window as the ultimate element in your Web design—the parent of all other elements . Browser windows and the documents they contain have several distinct parts:
• Browser width and height refers to the dimensions of the entire window, including any browser controls and other interface items.
• Viewport is the area of the display area. All fixed-position elements are placed in relation to the viewport edges.
• Viewport width and height refers to the live display area of the browser window’s viewport. The live dimensions, obviously, are always less than the full window dimensions. Generally, when I refer to “the window,” I’m referring to the viewport.
• Document width and height, sometimes called the rendered width and height, refers to the overall dimensions of the Web page contained within the body tag. If the document’s width and/or height are larger than the viewport width and/or height, you’ll see scroll bars that let you view the rest of the document.
• The element edge is the edge of an element within the border. Elements are positioned relative to their parent element’s edges if the parent element has also been positioned. Otherwise, the element is positioned relative to the document edge.
• Element width and height should not be confused with content width and height (defined in Chapter 10). This is the total space occupied when border and padding are added to the content width and height.
The document width is most often the same as the viewport width since horizontal scrolling is generally not preferred.
Normal flow refers to where an element will appear in the Web page if no positioning is applied to it.
CSS positioning allows you to set several properties associated with the HTML element’s position not only in 2D but also in 3D, clipping, and visibility. But first, you have to declare how the element’s positing should be treated.
An element can have one of four position values—static, relative, absolute, or fixed (Table 11.1). The position value tells the browser how to treat the element when placing it into the document.
In addition to setting the position of an element, other position-dependent properties include:
• Stacking order, which is available for absolutely and fixed-position elements, allowing you to move elements in 3D.
• Visibility, which hides an element’s content but not the element itself, effectively setting its opacity to 0.
• Clipping, which hides parts of the content, “clipping” its sides.
By default, elements are positioned as static in the document unless you define them as positioned absolutely, relatively, or fixed. Static elements, like the relatively positioned elements explained in the following section, flow into a document one after the next. Static positioning differs, however, in that a static element cannot be explicitly positioned or repositioned, cannot be clipped, and cannot have its visibility changed .
A relative element is positioned in the context of its natural position in the document. A relatively positioned element is offset based on its position in the normal flow of the document. The space it occupied will remain in place but appear empty .
Absolute positioning takes an element out of the normal flow of the document, while leaving no space. An element that is defined in this way is placed at an exact point in the window by means of x and y coordinates relative to its most recently positioned parent element’s edges, or the body if none of its parents are positioned .
Fixing an element’s position in the window is similar to absolute positioning except that it is always in a locked position relative to the viewport edge (rather than its parent). When a document scrolls in the viewport, fixed elements stay in their initial positions and do not scroll with the rest of the document. This allows you to establish constant elements in the screen that do not scroll with the rest of the content .
1. Add the position property to your declaration list. Type position in a rule’s declaration block or in the style attribute of an HTML tag, followed by a colon (:) (Code 11.2).
position:
2. Specify the positioning.
relative;
Type a position-type value, which can be one of the following:
• static flows the content normally; however, none of the position properties can be set for this element.
• relative also flows the element normally, but allows the position to be set relative to its normal position using the values set on the top, left, right, and bottom properties.
• absolute places the element relative to the edge of its most recently positioned parent element. This element will be the body of the document, or the element it is nested within if that element’s positioning has been set.
• fixed places the element relative to the edges of the viewport, independent of any other content on the page and ignoring its parent elements. Unlike an absolutely positioned element, when the window is scrolled, the fixed element stays where it is in the viewport as the rest of the content moves.
/*** visualformatting-properties.css ***/
header, footer {
position: fixed; }
footer nav {
position: relative; }
hgroup h2 {
position: relative; }
aside {
position: absolute; }
strong {
position: relative; }
div.gallery {
position: relative; }
div.gallery figure {
position: absolute; }
• inherit uses the position type of the element’s immediate parent. If no position is set, this will default to static (see the sidebar “Inheriting Position Types”).
Absolutely positioned and fixed-positioned elements take up no space within the parent element. So if you have an element—such as an image—that is absolutely positioned, its width and height are not included as part of the width and height of the parent content.
You can position elements within other positioned elements. For example, you can set the relative position of a child element that is within an absolutely positioned parent or set the absolute position of an element within an absolutely positioned parent.
Remember that the browser adds a default margin to the body of your Web page, but the default value is not consistent across all browsers. To correct this, you should always set your own margin in the body tag, which allows you to position elements consistently. See Chapter 12 for details on using a browser reset.
Positioning can also vary from browser to browser due to rounding errors. It’s generally best to use “clean” numbers, rounded to the nearest even number.
When an element’s position type has been set to anything other than static, you can use JavaScript or other scripting languages to move the element, change the clip, change the stacking order, hide it, or display it.
Browsers that do not understand the fixed position type default to static for the position type.
All positioned elements can have a top value, a right value, a bottom value, and a left value to position the element from those four sides (Tables 11.2 and 11.3). A relative element will be offset relative to its own edges. An absolute element will be offset relative to its parent’s edges. A fixed element will be offset relative to the viewport’s edges.
1. Specify a position type. For details, see “Setting the Positioning Type” earlier in this chapter.
2. Add a position side property to your CSS declaration list. Type left, right, top, or bottom in the CSS rule, followed by a colon (:) (Code 11.3).
top:
3. Specify the position.
0;
Type a value for the element’s offset. You can enter any of the following:
• A length value such as 120px, 2.3em, or 1.25cm.
• A percentage value, such as 1%, which creates a fluid offset.
• auto, which allows the browser to calculate the value if the position is set to absolute; otherwise, the default value will be 0.
/*** visualformatting-properties.css ***/
header {
top: 0;
left: 0; }
footer {
bottom: 0;
left: 0; }
footer nav {
top: 10px; }
aside {
right: 4%;
top: 150px; }
hgroup h2 {
top: 15px;
right: 25px; }
strong {
top: -.15em; }
#f1 {
left: -10%; }
#f2 {
left: 25%; }
#f3 {
right: -10%; }
You don’t have to include the top, right, bottom, and left declarations, but if they are not included, they are treated as auto.
You can use negative values to move the content up and to the left instead of down and to the right.
What happens if you set the top/left and bottom/right positions for the same element? The answer depends on the browser. Internet Explorer always defaults to the top and left positions. But most others will stretch elements that do not have a definite width or height to accommodate the values that are set.
Although the screen is a two-dimensional area, positioned elements can be given a third dimension: a relative stacking order.
Positioned elements are assigned stacking numbers automatically, starting with 0 and continuing incrementally—1, 2, 3, and so on—in the order in which the elements appear in the HTML and relative to their parents and siblings . Elements with higher numbers appear above those with lower numbers. This system is called the z-index (Table 11.4). An element’s z-index number establishes its 3D relationship to other elements in its parent element .
When the content of elements overlap, the element with a higher z-index number will appear on top of the element with a lower number . The z-index is always relative to an element’s siblings, not to its parents.
You can override the natural order of the z-index by setting a value for the z-index property.
/*** visualformatting-properties.css ***/
header, footer {
z-index: 99; }
div.gallery figure {
z-index: 0; }
div.gallery figure:hover {
z-index: 999; }
1. Specify a position type. For details, see “Setting the Positioning Type” earlier in this chapter (Code 11.4).
2. Add the z-index property to your CSS rule. Type z-index in the same declaration block, followed by a colon (:).
z-index:
3. Specify the position number. Type a positive or negative number (no decimals allowed), or 0.
99;
This step sets the element’s z-index in relation to its siblings, where 0 is on the same level.
Alternatively, you can use auto to allow the browser to determine the element’s z-index order.
Using a negative number for the z-index causes an element to be stacked that many levels below its parent.
The visibility property designates whether an element is visible in the window. If visibility is set to hidden (Table 11.5), the element is invisible but still occupies space in the document, and an empty rectangle appears where the element is located .
1. Specify a position type. For details, see “Setting the Positioning Type” earlier in this chapter.
2. Add the visibility property to your CSS. Type visibility in the element’s CSS declaration block, followed by a colon (:).
visibility:
3. Specify how the element’s visibility should be treated.
hidden;
Type one of the following keywords to specify how you want this element to be treated:
• hidden makes the element invisible when the document is initially rendered on the screen.
• visible makes the element visible.
• inherit causes the element to inherit the visibility of its parent element.
Although the properties seem similar, visibility differs radically from display (Chapter 10). When display is set to none, the element is scrubbed from the document, and no space is reserved for it. Visibility reserves and displays the empty space like the invisible man in his bandages.
Generally, display:none is used for JavaScript effects, such as drop-down menus and pop-up text, in which elements are alternately hidden and shown. Because this property will remove the element, it prevents the element from interfering with the layout of the page when not needed.
I recommend using display:none to hide elements, such as navigation, when creating a print style sheet.
One downside to hidden elements is that Web search engines will not see them nor will screen readers used by the vision impaired. If you do hide content, make sure it’s not something that is vital for SEO.
Unlike setting the width and the height of an element, which controls the element’s dimensions (see Chapter 10), clipping an absolute- or fixed-position element designates how much of that element’s content will be visible (Table 11.6). The part that is not designated as visible will still be present, but viewers won’t be able to see it, and the browser will treat it as empty space .
/*** visualformatting-properties.css ***/
aside {
clip: rect(30px, 230px, 60px, 10px); }
aside:hover {
clip: auto; }
1. Specify a position type. For details, see “Setting the Positioning Type” earlier in this chapter.
2. Add the clip property to your declaration list. Type the clip property name, followed by a colon (:), as shown in Code 11.5.
clip:
3. Specify the rectangular clipping region. Type rect to define the shape of the clip as a rectangle, an opening parenthesis ((), four values separated by spaces, a closing parenthesis ()), and a semicolon (;).
clip: rect(30px, 230px, 60px, 10px);
The numbers define the top, right, bottom, and left lengths of the clip area, respectively. All these values are distances from the element’s origin (top left corner), not from the indicated side.
Each value can be a length value or auto, which allows the browser to determine the clip size (usually, 100 percent).
The element’s borders and padding, but not its margin, are clipped along with the content of the element.
Auto should restore an element to its unclipped original state. However, Safari and Chrome will only restore the clip to the outer edges of the border while still slipping the outline or box shadow.
One of the earliest and most widely implemented CSS3 features was the ability to set element opacity, which let you transform an element from opaque to transparent and any translucency in between . However, different browsers implement opacity in different ways.
For example, rather than implementing the W3C CSS syntax, Internet Explorer builds on its existing filter functionality, whereas other W3C-compliant browsers simply add the opacity property (Table 11.7). Because Internet Explorer ignores the other browsers’ code, you can place both declarations in the rule list for an element to control its opacity.
/*** visualformatting-properties.css ***/
aside {
opacity: 0.5; }
aside:hover {
opacity: 1.0; }
1. Add the opacity property to your CSS. To control the opacity of an element, type opacity followed by a colon (:) (Code 11.6).
opacity:
2. Specify the opacity. Enter an alpha value for the opacity of the element, which can range between 0.0 (completely transparent) and 1.0 (completely opaque).
0.5;
You could also use inherit, which will set the element’s opacity to the same value as its parent. So, if the parent has an opacity of 0.75, inherit will cause the child element to reduce its opacity 75 percent in addition to the 75 percent already set for the parent.
Opacity is applied to the entire element and to all of its children, with no way to override it in child elements. However, you can independently set the opacity of two sibling elements and then position one on top of the other.
Opacities are cumulative, so if an element with 0.5 opacity is within an element with 0.5 opacity, it will have a cumulative opacity of 0.25.
Just as with text shadows (Chapter 6), you can add one or more drop shadows to the box of any element on the screen—positioned or not . The term “shadow” is a bit misleading, though, since you can make the color anything you like—including light colors—to create a glow effect.
1. Add the box shadow property to your CSS rule. Type the box-shadow property names, followed by a colon (:) (Code 11.7).
box-shadow:
2. Specify the shadow offset, blur, choke, color, and inset.
1px 1px 5px 1px rgba(0,0,0,.25) inset
Type the following keywords or values (Table 11.8) to specify how you want this element’s shadow to be treated (from right to left):
• x and y offset length values set the position of the shadow relative to the box. Positive values offset the shadow down and to the right, whereas negative values move the shadow up and to the left. These values are required.
/*** visualformatting-properties.css ***/
header { box-shadow: 0 10px 10px rgba(0,0,0,.5); }
article { box-shadow: 5px 5px 10px rgba(0,0,0,.7); }
aside { box-shadow: 1px 1px 5px 1px rgba(0,0,0,.25) inset, 3px 3px 15px rgba(0,0,0,.5); }
figure { box-shadow: 5px 5px 10px rgba(0,0,0,.7); }
• A blur length value is a positive value that increases the fuzziness of the shadow and spreads it out. The higher the value, the bigger and lighter the shadow. This value is optional but defaults to 0 when left unset.
• A spread length value—sometimes called the choke—is a positive value used to specify the break point for the shadow’s fade. It has the effect of increasing the darker area of the shadow before it begins to fade. This value is optional but defaults to 0 when left unset.
• A color value is any of the standard color values outlined in Chapter 7. This value is optional but defaults to transparent when left unset, rendering the shadow invisible.
• inset causes the shadow to appear within the element’s edges, creating an inner shadow. This is optional.
3. Add more shadows as desired.
, 3px 3px 15px rgba(0,0,0,.5);
You can repeat the shadow code as many times as desired to create multiple shadows under or within the element, separating each value list by a comma (,) and always remembering to end your CSS rule with a semicolon (;).
If only one length value is included after the x/y offset length values, it will be assumed to be the blur, not the spread.
The box shadow can do some great effects that might all but replace the border and outline properties. Here are just a few examples that I created classes for:
Frame
The frame effect uses drop shadows with the spread set to 0 to create a frame around the box. This has an advantage over border because you can have multiple borders, and has the advantage of the outline property in that it will not take up any space in the design .
.frame {
box-shadow: 0 0 0 5px hsl(0,100%,0%),
0 0 0 10px hsl(90,100%,20%),
0 0 0 15px hsl(180,100%,40%),
0 0 0 20px hsl(270,100%,80%),
0 0 0 25px hsl(0,100%,80%),
0 0 0 30px hsl(90,100%,100%); }
Inset Frame
Like the frame effect, only the border is inside the element . You cannot do this with the border property.
.insetframe {
background: rgb(53,53,53);
box-shadow: 0 0 0 15px hsla(0,0%,100%,.5) inset,
0 0 0 10px hsla(0,0%,100%,.5) inset; }
/*** visualformatting-properties.css ***/
header, footer {
position: fixed;
z-index: 999; }
header {
top: 0;
left: 0;
box-shadow: 0 10px 10px rgba(0,0,0,.5); }
footer {
bottom: 0;
left: 0; }
hgroup h2 {
position: relative;
top: 15px;
right: 25px; }
article {
box-shadow: 5px 5px 10px rgba(0,0,0,.7); }
aside {
position: absolute;
right: 4%;
top: 150px;
opacity: .5;
clip: rect(30px 230px 60px 10px);
box-shadow: 1px 1px 5px 1px rgba(0,0,0,.25) inset, 3px 3px 15px rgba(0,0,0,.5); }
aside:hover {
clip: auto;
opacity: 1.0; }
figure {
box-shadow: 5px 5px 10px rgba(0,0,0,.7); }
footer nav {
position: relative;
top: 20px; }
strong {
position: relative;
top: -.15em; }
The completed code for visualformatting-properties.css should look something like Code 11.8.