Document Flow and Positioning | Microsoft Expression Web For Dummies

To understand how to get page part boxes (<div> elements) to go where you want them to go, it's important to grasp how they naturally land on the page in the absence of any marching orders. In Figure 8-13, we gave each of the four parts of our Web page a different-colored 1-pixel border (but no other formatting) so that you can picture each <div> element as a CSS box and see the natural flow, width, and position of each one. In the absence of any positioning styles, each box stretches horizontally across the width of the browser window. Each <div> box stacks vertically, one on top of the other, down the page in the order they appear in the document. There's nothing sexy about this page, but it has good "bones"-a logical structure, well-defined page parts, and hierarchical headings.

image from book
Figure 8-13: Each <div> element follows the natural document flow.

You have as many ways to create CSS-based layouts as you have to cook a Thanksgiving turkey, and all Web designers keep a favorite arsenal of styles tucked in their style sheets for this purpose. In this section, we show you a few ways to achieve a few positioning effects so that you can get used to using the positioning properties in Expression Web. See the CSS resources we list in Chapter 7. Chapter 16 offers many more CSS positioning and formatting resources.

Ready, set, layout

Before you start applying CSS positioning properties to your <div> -divided page parts, here are a couple of get-ready tips that make laying out your page in Expression Web easier and save you time and work down the road:

Change the Expression Web CSS sizing, positioning, and floating option: By default, Expression Web writes style information for dimensions (width and height), positioning, and floating as inline styles. (We cover the different types of styles in Chapter 7.) Inline styles cannot be moved to external style sheets. We're pretty sure that you'll want to use your layout on other pages in your Web site after you get it looking the way you want. Why not set it up right in the first place? To change the default layout, choose Tools Page Editor Options and then click the CSS tab. For the Sizing, Positioning, and Floating option, select CSS (classes). We talk about external style sheets in Chapter 9.
Show rulers: Regardless of whether you choose a fixed-or proportional-width layout, rules give you a helpful visual guide while designing your page. Show rulers (in pixels) by choosing View Ruler and Grid Show Ruler. You may also want to turn on the page grid by choosing View Ruler and Grid Show Grid.

Pick a page size: Adjusting the page size in Design view to match a common browser resolution helps you design your page so that it looks good at that resolution. Expression Web lets you pick a page size that matches your monitor's current resolution setting and smaller (but not larger) resolution settings. After you pick a page size, Expression Web sizes its Design view to the width and height in available pixels at that resolution. (The browser takes up some width and height to display scroll bars and borders, for example.) To pick a page size, choose View image from book Page Size and then select a size from the drop-down list. You're welcome to make your layout larger than the page size setting you choose to display in Design view. The page size setting just gives you a rough idea of what your layout looks like at that monitor resolution while you're designing your page.

Tip

Keep your audience in mind when designing your page. Although the most common monitor resolution is now 1024 x 768, many people still use 800 x 600, especially those with older computers or less-than-perfect eyesight.

Create a style rule for the whole page: To avoid having to specify fonts for each element on the page, create a style rule that uses the <body> tag as the selector, and set the "font family" there. All the text on the page uses that font unless you define a more specific rule that overrides the page font. This is also a great place to eliminate the bit of space in the upper-left edge of the browser window that all browsers insert to offset the page content from the top and left edges of the browser window. (Look at Figure 8-13 and notice that the content doesn't sit exactly in the upper-left corner.) Some browsers use margins, and some use padding to insert the space. Set margins and padding for the <body> style to 0 to override browser settings. If you want, you can also specify a page background color or image in this style rule, and set the text color to something other than the default black.

GLANCE AT THE CODE

Here's an element-based style rule that we set for our sample page. (It uses the <body> tag as the selector.) This style rule sets the font family and scales down the overall font size a bit (to .8em, or 80%). It also sets the background color to a very light gray (#EEEEEE) and eliminates the page's default margins and padding by setting them both to 0 (we use this body style in the rest of the screen shots in this chapter):

 body {           font-family: Arial, Helvetica, sans-serif;           font-size: .8em;           background-color: #EEEEEE;           padding: 0px;           margin: 0px; }

Creating and positioning a page content "container"

You probably see Web sites where the page appears to sit on top of a colored (or textured) background and the page content is centered in the browser window. Many Expression Web templates are designed this way. Web designers achieve this effect by wrapping all the individual page parts (the <div> elements that make up each section) in one big "mega-<div>" (often given an ID, such as "container"-<div id=“container”>). This makes the whole content area of the page into one big CSS box, whose overall width can be set to either an absolute, or fixed, width (in pixels) or a proportional width, specified as a percentage of the browser window. In a proportional -width layout, the content width stretches and shrinks as the visitor changes the browser window. Fixed-width layouts set an absolute width in pixels that stays the same no matter what size the browser window is.

If you choose to use a fixed-width layout, realize that if your design is too wide for a particular visitor's browser, that visitor is forced to scroll horizontally to read your text. If you ever had to do this, you know how annoying it can be. Pick the lowest common screen width that your visitors are likely to use, and set the width to fit well in that amount of space. (For example, the useable width for an 800 x 600 monitor resolution is 760 pixels.)

REMEMBER

When we use the term content area, we're referring to all the visual elements of the Web page grouped together as a whole, not just the "content" <div> element.

To wrap container <div> tags around all the other <div> elements in the page, follow the instructions in the section "Wrapping <div> tags around existing page content," earlier in this chapter.

GLANCE AT THE CODE

Here's how the page part <div> elements nest inside the mega-<div> for our sample Web page (we replaced each <div> element's content details with a short description for brevity):

 <div >           <div >(page heading)</div>           <div >(links)</div>           <div >(content)</div>           <div >(copyright)</div> </div>

After you wrap the container <div> tags around your page content and give it an ID, you're ready to create a style for it that positions the container in the center of the browser window and sets its width. To do so, follow these steps:

Choose Format New Style or, in the Manage Styles or Apply Styles task pane, click New Style.

The New Style dialog box appears.

In the Selector box, type #container (or whatever ID you gave the container <div> element).

REMEMBER

If you didn't yet give the <div> element an id value, cancel the New Style dialog box and select the <div> element in Design view. Then open the New Style dialog box again (refer to Step 1). Type the selector (refer to Step 2) and make sure that you select the Apply the New Style to Document Selection check box.

No space should appear between the # character and the ID name.

In the Category list, select Box.
In the margin area, deselect the Same for All check box.
For right and left margins, select Auto from the drop-down list box.

This step centers the container in the browser window.
From the Category list, select Position.
In the Width text box, enter the container's total width.

For a proportional -width layout, enter the width value as a percentage (such as 90 for 90 percent) and then select % for the unit of measure, as shown in Figure 8-14.

Figure 8-14: Set a proportional width for the container in the Position category.

For a fixed -width layout, enter the width value in pixels.

For both proportional- and fixed -width layouts, refrain from setting a Height value. This action lets the page get as long as it needs to if the text content and size get bigger (for example, if a near-sighted visitor makes the text really large).
Set any other properties you want for the container.

Figure 8-14 shows that we set the container background to white so that the container stands out against the light gray page background (in the Background category). In the Box category, we also set the top margin to 5 pixels, to bring the top of the container down slightly from the top of the browser window. Although Figure 8-14 shows just the Position category, all other properties that we set in other categories appear in the Description area.
When you finish setting properties for your style rule, click OK.

Figure 8-15 shows our sample page, centered and with a proportional width set to 90 percent.

image from book
Figure 8-15: Our sample page container, as it appears in a browser.

Here's the style rule for our sample container <div>:

 #container {           margin: 5px auto 0px auto;           background-color: #FFFFFF;           width: 90%; }

REMEMBER

Depending on which style properties you set, your style rule may look different from ours. For example, the individual margins for each side may be listed separately (margin-top: 5px; margin-right: auto; margin-bottom: 0px; margin-left: auto;).

Obviously, we would need to set many more style properties to make the content of each part look good, but the overall layout is in place, with the main container set to be resized with the browser window. Because each page part <div> element gets its width from its containing element (the container <div>), all the parts are resized as a whole. It's a simple, functional layout. With a little more work, some background colors, a floated picture, and some styles that format the list of hyperlinks so that it looks like a link bar, our layout is beginning to take shape (although it isn't finished, by any stretch of the imagination). Take a look at Figure 8-16.

image from book
Figure 8-16: Our page with some content areas styled.

GLANCE AT THE CODE

Of the many ways that we could use to format hyperlinks into a horizontal bar, we used the following style rules (for other ways, check out some CSS books and online tutorials, as well as Expression Web template style sheets):

 #navigation ul {           padding-left: 0px;           list-style-type: none;           width: 100%;           float: left;           background-color: #808080;           margin: 0px; } #navigation li  {           display: inline; } #navigation ul a  {           display: block;           float: left;           padding: .2em 1em .2em 1em;           text-decoration: none;           color: #FFFFFF;           background-color: #808080;           border-right-style: solid;           border-right-width: 1px;           border-right-color: #FFFFFF; } #navigation ul a:hover {           color: #000000;           background-color: #EEEEEE; }

TECHNICAL STUFF

In these style rules, we bolded a few positioning properties that are useful for styling hyperlinks into navigation bars. The CSS property display: inline changes block-level elements into inline elements so that they appear on the same line. Conversely, display: block changes an inline element into a block-level element, which makes it into a CSS box complete with content, padding, border, and margin possibilities. In these style rules, list items (<li>) are changed from block to inline, and hyperlinks (<a>) are changed from inline to block. See Chapter 14 for more information about block and inline elements. Note that the selector for each of these style rules starts with #navigation. This ensures that these style rules target only the unordered list (<ul>), list items (<li>), and hyperlinks (<a>) that are located inside the navigation <div> element (<div id=“navigation”>).

Using float to create a two-column layout

The CSS float property is useful for moving CSS boxes (your page part <div> elements) into a side-by-side, two-column layout. When you float a page element, it moves up and over in the direction you tell it, as far as it can go, to either the left or the right. If there's room, the next element in the document flow moves up beside it to "wrap" around it. (We show you how to use float to wrap text around a picture in Chapter 5.) In Figure 8-17, we borrowed some style rules from the Expression Web template Organization 5 to create a fixed-width, two-column layout with our four <div> elements (header, navigation, content, and footer) nested inside their container <div>. Both the navigation and content <div> elements are floated to the left. The footer has the property clear: both set in its style rule to force it to fall below the floated elements.

image from book
Figure 8-17: A two-column layout with floated navigation and content <div> elements.

This layout takes a little math to get it lined up correctly, and you need to call on your CSS box savvy to make sure that you correctly add together all the widths of all the margins, padding, borders, and content areas. The width of the container <div> element is set to 700 pixels so that it fits easily in an 800 x 600 browser window. It still centers itself in the browser window, thanks to the left and right margins set to auto. The widths of borders, margins, padding, and content areas for the two floated <div> elements (navigation and content) are carefully calculated so that the two columns line up perfectly under the page header. To take a closer look at the various style rules and their properties, create a Web site from the Organization 5 template (we tell you how in Chapter 1) and look at the style3.css style sheet.

Tip

A floated element must have a specified width, although the width can be set to a percentage of the element's containing body-either a containing <div> or the browser window-or as a fixed pixel width, as in this example. Pictures have preset widths and heights, so they work as floated elements without using a style rule to specify their width. In Figure 8-17, the piano picture is floated to the left inside the content <div> element.

To float a <div> element, follow these steps:

Choose Format New Style or, in either the Manage Styles task pane or the Apply Styles task pane, click New Style.

The New Style dialog box appears.

If you already have an ID-based style rule for the <div> element you want to float, in the Apply Styles task pane, click the down arrow next to the style rule and select Modify Style from the drop-down list. The Modify Style dialog box appears. Skip to Step 3.
In the Selector box, type # idname (where idname is the id value you gave the <div>).

In our example, we floated the navigation and the content <div> elements, so we used #navigation for one style rule and #content for the other.
From the Category list, select Position.
Set the width for the <div> element you're floating.

Remember that this measurement applies to the width that the <div> element's content occupies. Padding, borders, and margins are added to this value.

In our example, we set the width of the navigation <div> to 148 pixels and the content <div> to 518 pixels.
From the Category list, select Layout.
From the Float drop-down list, select the desired value. (For example, select Left to float the element to the left.).

In our example, we floated both the navigation <div> and the content <div> to the left.
Set any other properties you want for the container.

In Figure 8-17, we set the background color for each individual <div> element to white rather than set the background for the container <div> to white. If we had kept the container background white, it would have been shown in the margins between each <div> element. We also changed the borders for each of the four page part <div> elements to dark gray.
When you finish setting properties for your style rule, click OK.

To force a <div> element to appear below one or more floated elements (as we did for the footer <div>), in the Layout category, set clear to both; clear: both ensures that it appears below all floated elements, whether it's floated to the left or to the right.

Tip

It takes time to get the hang of using the float property. Check out the excellent online Floatorial by Max Design at http://www.css.maxdesign.com.au/floatutorial.

GLANCE AT THE CODE

Here are all the style rules for the page shown in Figure 8-17:

 body {           font-family: Arial, Helvetica, sans-serif;           font-size: .8em;           background-color: #EEEEEE;           padding: 0px;           margin: 0px; } #container {           margin: 10px auto 0px auto;           width: 700px; } #header {           border: 1px solid #808080;           text-align: center;           width: 698px;           background-color: #FFFFFF; } #navigation {           border: 1px solid #808080;           background-color: #FFFFFF;           position: relative;           float: left;           width: 148px;           margin-top: 10px;           margin-bottom: 10px; } #content {           padding: 10px;           border: 1px solid #808080;           float: left;           width: 518px;           margin-top: 10px;           margin-bottom: 10px;           margin-left: 10px;           background-color: #FFFFFF; } #footer {           padding: 0px;           border: 1px solid #808080;           background-color: #FFFFFF;           width: 698px;           clear: both;           text-align: center; } #navigation ul {           list-style-type: none;           width: 100%;           display: block;           padding: 0px;           margin: 0px; } #navigation li {           display: block;           margin: 0px;           padding: 0px;           border: 1px solid #FFFFFF; } #navigation a {           color: #000000;           text-decoration: none;           display: block;           padding: 5px;           border: 1px solid #FFFFFF;           background-color: #FFFFFF; } #navigation ul a:hover {           color: #FFFFFF;           text-decoration: none;           border: 1px solid #808080;           background-color: #808080; } #footer p {           padding-top: 0px;           padding-bottom: 0px;           margin: 5px 0px 5px 0px; }

Beyond the basics

Here are a few more tips for working with CSS positioning properties:

You have other ways to achieve multicolumn layouts with CSS positioning (such as using position: absolute to make columns stay at a specified place on the page). The best way to find out about them is to experiment. Try some of the online tutorials we suggest in Chapter 7 and Chapter 16. Also look through the style sheets that come with the Expression Web templates for layouts that you like, to see how they were done.
Preview, preview, preview. Different browsers often display CSS slightly differently, as do the same browsers on different operating systems. Make sure your layout holds up in at least the most popular browsers, but don't neglect a few older browsers, just to see what your page looks like.
You can use many CSS tricks for creating hyperlink lists that look like horizontal or vertical navigation bars. Creating the different style rules that format each part of the navigation bar can get tricky. To get started, take a look at the style sheets included with the Expression Web templates. Also, visit the excellent list resource Listamatic at http://www.css.maxdesign.com.au/listamatic/index.htm for all sorts of ways to style navigation bars, both horizontally and vertically.
When setting styles for content, remember that many elements have defaults already set to make a nonstyled Web page look decent. For example, headers and paragraphs both have default margins that insert space between the heading or paragraph text and the next element. Any styles you specifically set for the element override the default settings. If you don't want any margins, set the margin property to 0.
Don't be afraid to make mistakes and muck about, making a mess. Create a backup of your well-structured raw page content so that you can always revert to a clean copy if you can't find your way out of a snarl. Remember: The Undo command is your best friend. Memorize the keyboard command for it (Ctrl+Z), and don't be afraid to call it into service!