Section 12.3. Tutorial: Positioning Page Elements

12.3. Tutorial: Positioning Page Elements

This tutorial lets you explore a few different ways to use absolute positioning, like creating a three-column layout, positioning items within a banner, and adding captions on top of photos. Unlike the previous chapter, where you wrapped chunks of HTML in <div> tags and added ID or class names to them, in these exercises most of the HTML work has already been done for you. You can focus on honing your new CSS skills.

To get started, download the tutorial files located on this book's companion Web site at www.sawmac.com/css/.

12.3.1. Enhancing a Page Banner

First, you'll make some small but visually important changes to a page banner. You'll create styles that refer to HTML tags with IDs or classes applied to them. (Again, that part's been taken care of for you.)

1. Launch a Web browser and open the file chapter_12 index.html .

   On this CosmoFarmer.com Web page (Figure 12-13), start by repositioning several parts of the banner.

   Figure 12-13. This page has it allbanner, nav bar, main story area, sidebar links, and ads. But there's not much visual structure. Just normal, static HTML with everything running from top to bottom of the page. You can make it more readable by organizing the contents into columns .

   

2. Open the index.html file in a text editor. Place your cursor between the opening and closing <style> tags .

   Along with the <style> tags for an internal style sheet, the page already has an attached external style sheet with some basic formatting. Start by moving the small CosmoFarmer 2.0 badge to the left side of the banner. To help break up the boxy look that's typical of CSS designs, break this graphic out of the banner's borders, so it looks like a slapped-on sticker.

3. In the internal style sheet, add this new style :

    <style type="text/css"> #banner #badge {     position: absolute;     left: -18px;     top: -18px; } </style> 

   
   

   The graphic is inside of a <div> with an ID of banner , and the graphic itself has an ID of badge . This style positions the top left corner of the graphic 18 pixels to the left and 18 pixels above the top of the page.

   Preview the page now and you'll see a couple of problems. First, the graphic hangs off the edge of the page but you really want it to hang off the edge of the banner area. You'll tackle that problem now.

4. Add this style above the one you just created :

    #banner {     position: relative; } 

   
   

   It's good practice to place the CSS code for styles that control a general section of a page (like this # banner style) above the code for styles that format just parts of that section (like the style you created in step 3). Also, grouping styles for related sections makes it easier to find styles when you need to analyze or edit a page's CSS. In this case, the # banner style goes first in the internal style sheet because it applies to a large chunk of HTML. But you should keep the # banner #badge style near it as you add more styles to the page. (You can read more about techniques for organizing your CSS in Section 14.2.)

   The # banner style creates a new positioning context for any nested tags. In other words, the relative setting makes any other positioned elements inside this tag place themselves relative to the edges of the banner. This change in positioning shifts the placement of the style you created in step 3. Now it's 18 pixels above and to the left of the banner box. The badge still hangs off the page just a little bit, so you'll add some margins around the page to accommodate the graphic.

5. Add a style for the body tag. Place it in the internal style sheet above the other two styles you created :

    body {     margin: 20px; } 

   
   

   This margin adds enough space around the edges of the page so the entire graphic is visible (Figure 12-14). But now you have another problemthe CosmoFarmer logo is partially hidden underneath the badge. Overlapping elements is one of the hazards of absolute positioning. In this case, you can fix the problem by adding a little margin to the logo.

   Figure 12-14. Making a graphic break out of a box, like the CosmoFarmer badge in the upper-left corner of this banner, is a cinch with absolute positioning. By crossing over the borderlines of the banner, the graphic helps soften the boxy look of the rest of the banner, and lends dynamic energy to the design.

   

6. Add a new style for the logo to the internal style sheet. Place it below the other styles you've created so far :

    #banner #logo {     margin-left: 60px; } 

   
   

   Like the badge graphic, the logo already has an ID applied to it logo . This style moves the logo far enough to the left so that it's out of the way of the absolutely positioned graphic. However, a weird thing happens if you view this in Internet Explorer (including IE 7, as of this writing): When you mouse over the navigation bar, the logo jumps back to where it was before. Huh? Fortunately, the problem's easily fixed.

7. Edit the # banner #logo style you just created by changing its positioning to relative :

    #banner #logo {     margin-left: 60px;  position: relative;  } 

   
   

   Adding relative positioning doesn't actually move the logo anywherethat would happen only if you added a left, top, right , or bottom value. For reasons known only to Microsoft, though, it knocks IE upside the head and makes it behave.

   The banner's looking good so far, but the two links Subscribe and About Us look awkward sandwiched between the logo and the nav bar. There's plenty of space in the right side of the banner, so you'll move them there. (The links are actually an unordered list that gets its formatting from the page's external style sheet. See Section 9.1.1 for details on how to turn an unordered list into a horizontal navigation bar.)

8. Add this new style to the bottom of the internal style sheet :

    #banner ul {     position: absolute;     right: 60px;     bottom: 5px; } 

   
   

   This style is a descendent selector that targets unordered lists inside the banner. (There's just one list in this case.) Since the <ul> is absolutely positioned, it's removed from the flow of the page, letting the nav bar scoot up just under the banner.

   Also, remember this tag is inside the banner, which you earlier set to a relative position. Accordingly, the Subscribe and About Us links are positioned relative to the tag. They're placed an exact amount from the right and bottom edges of the banner unless you're viewing this inyou guessed itInternet Explorer 6 or earlier. As discussed in Section 12.1.4, IE 6 has problems positioning elements using the bottom coordinates of relatively positioned elements (like this banner). It ends up using the bottom coordinates of the entire page. Luckily, the fix is easy.

   ---

   Tip: If you're following along in IE, you can actually see the links in IE if you scroll down to the very bottom of the Web page.

   ---

9. Add an IE-only style below the # banner style you created in step 4 :

    * html #banner {     height: 1px; } 

   
   

   This style uses the * html hack (Section 7.6) to create a style that only Internet Explorer 6 and earlier pay attention to. It's really just nonsense code, but in IE 6, it fixes the problem.

10. Preview the page in a Web browser .

    The finished banner should look like Figure 12-15. This exercise is a good example of using absolute positioning to achieve small, subtle changes that add a lot to a page's visual appeal .

Figure 12-15. Absolute positioning is a big help in placing small elements like the Subscribe and About Us links in the right of the banner. Unlike floats, the exact position of the links in the HTML code isn't important, giving you a lot of layout flexibility. You can achieve the same effect without absolute positioning, but it would be harder.

12.3.2. Adding a Caption to a Photo

In Chapter 8, you learned one way to add a caption to a photo (Section 8.6.2). In the examples from that chapter, the captions sat underneath the photos, which is what you want most of the time. But someday, you may want to add a caption directly on a photo, like the subtitles TV news shows love to display across the lower third of the screen.

1. Open index.html in your text editor .

   Notice the graphic of the original CosmoFarmer home page. Currently it's aligned to the right using the align attribute of the <img> tag, but that's so 2001. You'll align it using CSS instead, but first you need to edit some HTML.

2. Locate the <img> tag that inserts the graphic old_home.jpg , and then delete the HTML code align="right" .

   Here's what the entire tag looks like. You want to remove the part that's bolded:

    <img src="images/old_home.jpg" alt="The Original Cosmo Home Page" width="200" height="186"  align="right"  /> 

   
   

   Now that you've gotten rid of the old HTML, you need to create a containera <div> tagto hold the CSS for both the image and its caption.

3. Immediately before the <img> tag, add < div class="figure" >. After the closing </p> of the caption (which appears right after the <img> tag), add the closing </div>. When you're done, the HTML should look like this :

     <div class="figure">  <img src="images/old_home.jpg" alt="The Original Cosmo Home Page" width="200" height="186"/> <p>The Original&nbsp;CosmoFarmer Home&nbsp;Page</p>  </div>  

   
   

   All the code for the photo and caption are in one box that you can align and format as a unit.

4. Create a style to format the newly added <div> :

    #main .figure {     float: right;     width: 200px;     margin-bottom: 2px;     margin-left: 10px; } 

   
   

   The properties in this style should be old news by now ( especially if you read Chapter 8). This style aligns the box to the right edge of the page, and the bottom and left margins add a little space between the photo box and the text that wraps around it.

   The plan is to move the caption paragraph out of the normal flow of the page and place it on top of the photo. To do so, you'll position the caption relative to the edges of the photo. However, since the <img> tag is self-closing (meaning it doesn't have both an opening and closing tag), you must position the caption relative to another element. Here's another use of the figure <div> you just addedto provide the positioning context for the caption.

5. Add position: relative to the style you just created :

    #main .figure {     float: right;     width: 200px;     margin-bottom: 2px;     margin-left: 10px;  position: relative;  } 

   
   

   Now you can position the caption relative to the <div>, which for all intents and purposes is the same as positioning it relative to the photo.

6. Add a new style after the # main .figure style you created in the last step :

    #main .figure p {     position: absolute;     width: 168px;     left: 10px;     bottom: 10px;     background-color: #FFF; } 

   
   

   This new style positions the paragraph 10 pixels from the bottom and 10 pixels from the left edge of the <div> tag. The width property constrains the paragraph so it doesn't span across the entire photo, and background-color makes the text legible. All that's left are a few formatting details to improve the look of the caption.

7. Edit the style you just created, so that it looks like this :

    #main .figure p {     position: absolute;     width: 168px;     left: 10px;     bottom: 10px;     background-color: #FFF;  border: 1px dashed #666666;     font-size: 1.1em;     font-weight: bold;     text-align: center;     padding: 5px;     margin: 0;  } 

   
   

   You need to attend to one small detail. It's something you may never notice, but some browsers position the caption just a few pixels lower than other browsers. (To see for yourself, check the page out in IE and then in Firefox.) Browsers position inline elements (like images) differently relative to the baseline of other elements around them (Section 10.2.1). (Also, you can see a similar problem with images in table cells in Section 10.2.1.) At any rate, the fix is simple: Using CSS, force the image to display as a block-level element.

8. Add one more style to the internal style sheet :

    #main .figure img {     display: block; } 

   
   

   Preview the page. The caption should appear centered across the lower portion of the photo, as in Figure 12-16.

Figure 12-16. Only absolute positioning lets you layer one element on top of another, like the caption on top of this photo.

12.3.3. Laying Out the Page

Now it's time to turn your attention to the structure of this page. As it is now, you need to scroll down the page to read the latest news in the sidebar, and scroll even farther to see the ads. (Advertisers hate that.) In this section, you'll use absolute positioning to create a three-column flexible layout that brings all content up to the top of the page (and keeps your sponsors from canceling their accounts).

Before you get started, get an overview of the page structuresee Figure 12-17. Each section of the page is wrapped in its own <div> tag, with an appropriate ID applied. The page's main contents, sidebar, ads, and copyright notice are enclosed in a <div> with the ID contentWrapper (#4 in Figure 12-17). All of the tags in the page's body are wrapped in a <div> with an ID of wrapper (#1). That may seem like a lot of <div> tags, but they each serve an important purpose.

Your mission is to arrange the three <divs> ( sidebar, main , and adverts ) into three columns. You need to use absolute positioning on only two elementsthe sidebar and the advertising section (see #6 and #7 in Figure 12-17). You'll take them out of the normal flow of the page (where they appear near the bottom) and stick them at the left and right edges of the page just below the banner. Absolute positioning also causes those elements to float above the page, and on top of the main content area (see #5). To make room for the sidebars, you have to add a little margin to the left and right of the main area.

Figure 12-17. The secret to absolutely positioned layoutsless is more. Using the minimum amount of positioning to get the job done isn't only less work, it also creates less troubleshooting for different browsers. You usually need to position only a couple of elements to create a basic page layout. Use padding or margins to handle other spacing issues (like moving an item a few pixels to the left).

1. Create a style for the <div> tag that encloses the main contents of the page (#3 in Figure 12-17). Add it as the last style in the internal style sheet :

    #contentWrapper {     clear: both;     position: relative; } 

   
   

   The clear property helps the # contentWrapper clear the navigation bar, which was created using a left float. (As explained in Section 7.6.2, you should always clear elements that need to appear under a float.)

   The position property comes in handy for placing the sidebars. Setting its value to relative lets you position both sidebars relative to the four edges of the content wrapper, not the four edges of the browser window. (See step 3 in Section 12.2.3 for more on why this is useful.)

2. Create a style for the left sidebar, placing the CSS code under the style you created in step 1 :

    #sidebar {     position: absolute; } 

   
   

   This style takes the sidebar out of the normal flow of the page, but it doesn't yet position it anywhere . It's still near the bottom of the page, but if you view it in a browser, you'll see it's floating on top of the advertisements. To position it, use the top and left properties.

3. Add top and left properties to the style you just created by :

    #sidebar {     position: absolute;  top: 15px;     left: 0;  } 

   
   

   Since this sidebar is positioned relative to the content wrapper <div>, a left position of places it flush with the left edge. The top value is determined by aesthetic judgment ( otherwise known as trial and error). A top value of would make the sidebar touch the bottom of the nav bar; the 15 pixels of space bring the sidebar's top more in line with the story headline.

   One thing's missing: Most of the time when you position something, you also want to give it a width. That's true in this case, since at this point the sidebar spreads almost across the entire page, covering nearly all of the content.

4. Add a width to the # sidebar style .

   The final style looks like this:

    #sidebar {     position: absolute;     top: 15px;     left: 0;  width: 170px;  } 

   
   

   Next, repeat the process to position the advertising area of the page.

5. Add an # adverts style to the bottom of the style sheet :

    #adverts {     position: absolute;     top: 15px;     right: 5px;     width: 125px; } 

   
   

   This style works just like the one for the sidebar, except that you place the ads relative to the right edge of the page. That works much better than trying to put the ads at some point relative to the left edge of the page. When you specify a right value, the ads always stay the same distance from the right edge of the content wrapper. If you change the width of the browser window, the ads stay in position.

   At this point, the page should look like Figure 12-18, with both the sidebar and ads covering the main story of the page. Adjust that main area's margins to prevent this overlap.

6. Below the # adverts style you just created, add a style for the main story area of the page :

    #main {     margin-left: 170px;     margin-right: 135px; } 

   
   

   This # main style indents the main story area so that it clears the left and right sidebars. Now just a few design enhancements remain .

7. Add some padding and borders to the #main style :

    #main {     margin-left: 170px;     margin-right: 135px;  padding: 0 15px 15px 20px;     border: 1px solid #666666;     border-top: none;     border-bottom: none;  } 

   
   

   The padding adds some space inside of the div, so the text doesn't touch the sidebars or the bottom of the div. You can actually achieve the same thing by increasing the left and right margins from the previous step, but this way you also get to add a nice border to the left and right edges of the div, helping to visually divide the three columns.

   Notice the little productivity shortcut in this style. First, the border style declaration sets up a border on all four edges of the div; the last two declarations turn off the border at the top and bottom. You can achieve the exact same effect with two style declarations ( border-left and border-right ), but then you'd have to repeat the values ( 1px solid #666666 ). If you want to change the color, thickness , or style of both borders, then you have to edit two properties. This way, only one declaration takes care of both the left and right borders.

   The layout's nearly complete. There's just one last thing: When you preview the page in IE 6, you see the left sidebar is off by a lot185 pixels too far to the right to be exact! Yep, another IE bug. Fortunately, there's an easy fix. To make the left sidebar line up and fly right (#4 in Figure 12-17), give its containing <div> tag that mysterious IE-only property known as layout (see Section 11.1).

8. Add a width to the # contentWrapper style :

    #contentWrapper {     position: relative;     clear: both;  width: 100%;  } 

   
   

   Figure 12-18. Absolute positioning can pose some problems. Since absolutely positioned elements (like the two sidebars here) float on top of the page, separate from the main flow of the HTML, they can cover up and hide other elements.

   

   The page now falls correctly into three columns (Figure 12-19), with fewer steps than the modifications you made to the banner. Preview the page in a Web browser and expand the browser window. You'll see the page's flexible design lets it fit any width window.

   Figure 12-19. Building a flexible, three-column design with absolute positioning requires just a few steps, but the basic concept breaks down to this: Position the two outer columns, and indent the left and right margins of the middle column.

   

   If fixed-width designs are your cup of tea, the basic structure of this page makes it easy to set a fixed width. Just set a width for the <div> that wraps all of the other tags on the page (#1 in Figure 12-17) like this:

    #wrapper {     width: 760px; } 

   
   

A completed version of this tutorial is in the chapter_12_finished folder.