Adobe
Sign in Privacy My Adobe

by David Powers

David Powers

Content

Created

19 November 2012

Page tools
CSSDreamweaverHTMLsite setupstylingwebsite
 
Thanks for your feedback.

Prerequisite knowledge

Before starting this tutorial, read and complete the steps in

User level

Beginning

Required products

Sample files

Welcome to Part 3 of this six-part tutorial series on creating your first website. This tutorial shows you how to style the main heading using Adobe Edge Web Fonts, a library of hundreds of free fonts that you can use in your website. You’ll also learn how to eliminate the gap that often appears at the top of web pages, and how to convert an unordered list of links into a horizontal menu bar. The menu bar and main text will be maneuvered into position using a combination of relative and absolute positioning.

Locate your files and review your task

In Part 1 and Part 2 of this tutorial series, you defined a site for Check Magazine, a fictional publication, and created the basic structure for the home page. If you completed the first two parts, continue working with your existing files. If you’re not sure whether your HTML and CSS is correct, you can download the first_website_pt3_begin.zip sample file, and use its contents to replace your existing files.

At the end of Part 2, the page was still very bare (see Figure 1).

Figure 1. Design view shows that apart from the main image, the page is still completely unstyled.
Figure 1. Design view shows that apart from the main image, the page is still completely unstyled.

In this tutorial, you'll style the header section, and add the main text area. Figure 2 shows what the page will look like in a browser when you’re done with Part 3.

Figure 2. The page is beginning to look like the original design concept.
Figure 2. The page is beginning to look like the original design concept.

Style the main heading and tag line

You’ll start by using a web font for the main heading.

Styling the heading with an Edge Web Font

The main heading uses a font called Sarina, which is not available on most computers, but you can add it to your web page using Adobe Edge Web Fonts, a vast library of free web fonts from Adobe, Google, and designers around the world.

  1. Open your browser and go to http://html.adobe.com/edge/webfonts/ (see Figure 3).
Figure 3. Adobe Edge Web Fonts give you free access to a wide range of attractive fonts.
Figure 3. Adobe Edge Web Fonts give you free access to a wide range of attractive fonts.

To access the full range of fonts, you need either a subscription-based or free Creative Cloud membership. However, you can access a limited range even without signing up, so that’s what you’ll do in this tutorial.

  1. Scroll down to the Preview Edge Web Fonts section, and select Sarina.

The editable area below shows a preview of the font together with instructions on how to use it (see Figure 4).

Figure 4. The Edge Web Fonts site gives simple instructions for embedding the font.
Figure 4. The Edge Web Fonts site gives simple instructions for embedding the font.
  1. Copy the <script> tags from the Edge Web Fonts site, and paste them into the <head> section of index.html in Dreamweaver just above the <link> that attaches the style sheet like this:
<head> <meta charset="utf-8"> <title>Check Magazine</title> <script src="http://use.edgefonts.net/sarina.js"></script> <link href="styles/check_cs6.css" rel="stylesheet" type="text/css"> </head>
  1. Also copy the CSS from the Edge Web Fonts page, and paste it into check_cs6.css after the existing styles. The example provided by the Edge Web Fonts site is for a level 1 heading, so it doesn’t need changing, but you would need to change the CSS selector if you want to use the font for other text elements.
  2. Save both index.html and the style sheet.
  3. Unfortunately, the Dreamweaver Design view and Live view don’t support Edge Web Fonts. So, press F12 (Windows) or Opt+F12 (Mac OS X) to launch index.html in your default browser. As long as you’re connected to the Internet, the heading should now be styled using the web font (see Figure 5).
Figure 5. The web font completely changes the look of the heading.
Figure 5. The web font completely changes the look of the heading.
  1. The heading is too small, so amend the h1 style rule by setting font-size to 96px like this:
h1 { font-family: sarina, serif; font-size: 96px; }
  1. The background color of the header needs to be black, and the color of the text should be white.
    In Design view, put your insertion point anywhere inside the header <div>, and click the New CSS Rule icon at the bottom-right of the CSS Styles panel.
  2. The New CSS Rule dialog box suggests a compound selector depending on where your insertion point is. The styles need to apply to the whole of the header <div>, so change the value of Selector Type from Compound to ID. Dreamweaver CS6 automatically changes the value of Selector Name to header.

    Note: If you’re using an earlier version of Dreamweaver, changing Selector Type to ID clears the Selector Name field. You need to type header manually.

  3. Make sure Rule Definition is set to check_cs6.css, and click OK to open the CSS Rule Definition dialog box.
  4. With Type selected in the Category list on the left of the CSS Rule Definition dialog box, click the color box alongside the Color field, and select white (#FFF) from the color picker (see Figure 6). This sets the color of the text.
Figure 6. Choosing the text color in the CSS Rule Definition dialog box.
Figure 6. Choosing the text color in the CSS Rule Definition dialog box.
  1. Select Background in the Category list on the left of the CSS Rule Definition dialog box, and use the color picker to set Background-color to black (#000).
  2. Click OK to close the CSS Rule Definition dialog box.
  3. Save the style sheet, and refresh index.html in your browser. The header should now have white text on a black background (see Figure 7).
Figure 7. The colors have changed, but there’s a big gap at the top of the page.
Figure 7. The colors have changed, but there’s a big gap at the top of the page.

Although there is nothing above the header, it has been pushed down the page, leaving an ugly white gap at the top. Also, the links in the unordered list haven’t changed to white like the rest of the text. Both issues need to be fixed. First, you’ll deal with the gap above the heading.

Fixing the gap above the header

In this section, you’ll use Inspect Mode to investigate and fix the cause of the gap at the top of the page.

  1. With index.html open in the Document window, click the Live button in the Document toolbar. Although Live View doesn’t display the Sarina font, there’s still a big gap at the top of the page.
  2. Click the Inspect button to turn on Inspect Mode, and move your mouse pointer over the Check heading. Inspect Mode highlights margins in yellow. As Figure 8 shows, the heading has large top and bottom margins that browsers add by default.
Figure 8. Inspect Mode reveals that the heading’s top margin causes the gap.
Figure 8. Inspect Mode reveals that the heading’s top margin causes the gap.

An unusual feature of CSS is that adjacent vertical margins merge to the height of the largest one. As a result, the heading’s top margin extends beyond the header <div>, pushing it away from the top of the page.

Notice also that there’s a narrow white strip above the top margin. That’s caused by browsers adding a default eight-pixel margin around the <body> element. You need to fix both issues.

  1. Click the heading to freeze Inspect Mode. The Inspect button pops out, but the highlighting remains in Live View.
  2. In the CSS Styles panel, make sure that the All button is selected. Then select h1 in the All Rules pane to display the properties for the heading.
  3. In the lower pane, click Add Property (see Figure 9).
Figure 9. You can add new properties to a style rule through the CSS Styles panel.
Figure 9. You can add new properties to a style rule through the CSS Styles panel.
  1. In the text field that opens, start typing mar. Then click the down arrow to the side of the field to reveal a list of CSS properties, and select margin.
  2. Type 0 in the field that opens to the right of the property name (see Figure 10).
Figure 10. Setting the margin property to 0.
Figure 10. Setting the margin property to 0.
  1. Press Enter (Windows) or Return (Mac OS X) to confirm the value. This removes the margins on all sides of the heading.
  2. Check in Live View. The heading is still highlighted in blue, but the yellow margins have gone, and there’s only a narrow gap at the top of the page.
  3. You now need to create a rule for the <body> element to remove the default margin around the page. Click the New CSS Rule icon at the bottom right of the CSS Styles panel.
  4. In the New CSS Rule dialog box, set Selector Type to Tag (Redefines An HTML Element).
  5. Click the down arrow on the right of the Selector Name field, and select body.
  6. Make sure Rule Definition is set to check_cs6.css, and click OK to open the CSS Rule Definition dialog box.
  7. Most rules set on the <body> element are inherited by the rest of the page. So, in addition to removing the default margin, it’s a good idea to set the default font, text color, and background color.
    With Type selected in the Category list, click the down arrow to the right of the Font-family field, and select Trebuchet MS, Arial, Helvetica, sans-serif.
  8. Accessibility experts recommend against using pure black text on white because the contrast is too strong. So, I’m going to use a dark gray for the text.
    Type #3B3B3B in the Color field. (Don’t forget the hash sign at the beginning—it’s part of the hexadecimal code for the color.)
  9. Click the Apply button to see the effect of the changes. Notice that the font has changed for all the text except the main heading. Also note that the color of the text in the header <div> is unchanged because you set a different color in the #header style rule earlier (see Figure 11).
Figure 11. The color of the header text is not affected by the body rule.
Figure 11. The color of the header text is not affected by the body rule.
  1. Select Background in the Category list on the left of the CSS Rule Definition dialog box, and use the color picker to set Background-color to white (#FFF).
  2. Select the Box category. Leave the Same For All check boxes selected, and type 0 in the Top field under Margin. Then click Apply. This removes the default margin on each side of the page, and the gap at the top disappears.
  3. Click OK to close the CSS Rule Definition dialog box.
  4. Choose File > Save All Related Files to save the changes to the style sheet.

Styling the tag line

The Fashion + Lifestyle tag line needs to sit alongside the Check heading. The tag line is in a paragraph, while the heading is in an <h1> tag. CSS treats both as block-level elements that occupy a new line. To move them alongside each other, you need to apply the float property to the heading. This moves it to the side, allowing other elements to move up alongside. Once the tag line moves into the space next to the heading, you can adjust its padding and margins to move it into position.

  1. In the CSS Styles panel, select h1 in the All Rules pane.
  2. Click Add Property in the lower pane, and type float.
  3. Press Tab to move into the field alongside the property name, and click the down arrow on the right of the field to reveal the available values. Select left.
    Don’t worry that the header moves away from the top of the page. It’s because the Fashion + Lifestyle tag line has moved up alongside the heading, and its top margin now overlaps the header <div>.
  4. Click anywhere inside the Fashion + Lifestyle paragraph. Make sure Live View is turned on.
  5. Click the New CSS Rule icon at the bottom-right of the CSS Styles panel.
  6. The New CSS Rule dialog box suggests #container #header p as the Selector Name. You don’t need #container. So, click Less Specific once to change the selector to #header p.
  7. Make sure Rule Definition is set to check_cs6.css, and click OK.
  8. In the Type category of the CSS Rule Definition dialog box, set Font-family to Lucida Sans Unicode, Lucida Grande, sans-serif.
  9. Set Font-size to 30px.
  10. Set Font-variant to small-caps.
  11. Select the Box category from the list on the left of the CSS Rule Definition dialog box.
  12. Deselect the Same For All check box under Margin, and type 0 in the Top and Bottom fields.
  13. Click Apply. Setting the top margin to 0 removes the gap at the top of the page, but the tag line is too high.
  14. Deselect the Same For All check box under Padding, and type 15 in the Top field.
  15. Click Apply. Your settings and the page should look like Figure 12. Padding is added inside an element, so the tag line moves down, but no longer causes a gap at the top of the page.
Figure 12. The tag line is moved into place using padding and margins.
Figure 12. The tag line is moved into place using padding and margins.
  1. Click OK to close the CSS Rule Definition dialog box, and save the style sheet.

Style the navigation bar

The final stage of fixing the header <div> involves converting the unordered list of links into a horizontal navigation bar. You’ll start by giving the the links a different color and font styles.

Giving links a unique style

The links in the navigation bar need to have a style that won’t be shared by other links in the page. You do this with a selector that targets only links in the header <div>.

  1. Click anywhere in one of the links in the header <div>, and then click the New CSS Rule icon at the bottom-right of the CSS Styles panel.
  2. The New CSS Rule dialog box suggests #container #header ul li a as the Selector Name. Although this does what you want, it’s more efficient to simplify the selector.
    Click Less Specific once to change the selector to #header ul li a. Again, this is accurate, but all you need to target links inside the header <div> is #header a.
  3. Click inside the Selector Name field, and delete ul li. As you edit the selector, the description below the field changes to show you which elements will be styled (see Figure 13).
Figure 13. The amended selector targets links inside the header <div>.
Figure 13. The amended selector targets links inside the header <div>.
  1. Click OK to open the CSS Rule Definition dialog box.
  2. Set the following values in the Type category:
    • Font-size: 20px
    • Font-weight: bold
    • Font-variant: small-caps
    • Color: #FFF (white)
    • Text-decoration: none
  3. Click OK to close the CSS Rule Definition dialog box and apply the new styles. Setting Text-decoration to none removes the underline from the links, which are now displayed in bold, white, small capitals.
  4. Select some of the placeholder text in one of the columns at the foot of the page, and type # in the Link field of the Property inspector. It’s styled differently from the links in the header because the #header a style rule that you have just created affects only links in the header <div> (see Figure 14).
Figure 14. The links in the header have a unique style of their own.
Figure 14. The links in the header have a unique style of their own.
  1. Save index.html and the style sheet.

Converting the unordered list into a navigation bar

To convert the links in the unordered list into a horizontal navigation bar, you need to remove the bullets, give the links a width, and turn them into block-level elements so that the full width of the link becomes clickable. Finally, you need to float them to the left.

  1. Click anywhere inside one of the links in the header <div>. Then select <ul> in the Tag selector at the bottom of the Document window (see Figure 15). This highlights the whole unordered list.
Figure 15. The Tag selector shows where the insertion point lies in the HTML hierarchy, making it easy to select specific tags.
Figure 15. The Tag selector shows where the insertion point lies in the HTML hierarchy, making it easy to select specific tags.
  1. Click the New CSS Rule icon at the bottom-right of the CSS Styles panel. Dreamweaver suggests #container #header ul as the Selector Name.
  2. Click Less Specific once to change the Selector Name to #header ul. Then click OK to create a style rule for the unordered list in the header <div>.
  3. You need to remove all margins and padding from the list, so select Box from the Category list in the CSS Rule Definition dialog box. Leave Same For All selected for both Padding and Margin, and type 0 in both Top fields.
  4. Select the List category, and set List-style-type to none.
  5. Click OK to close the CSS Rule Definition dialog box and apply the styles. The bullets disappear from the unordered list.
  6. You need to add some extra properties to the style rule for the links, so select #header a in the All Rules pane of the CSS Styles panel. Then click the Edit Rule icon at the bottom-right of the panel (see Figure 16) to reopen the CSS Rule Definition dialog box.
Figure 16. Click the Edit Rule icon to reopen the CSS Rule Definition dialog box for the selected rule.
Figure 16. Click the Edit Rule icon to reopen the CSS Rule Definition dialog box for the selected rule.
  1. In the Block category, set Text-align to center, and Display to block.
  2. In the Box category, set Width to 100px.
  3. Click OK to close the dialog box and make the changes. The links are now stacked under the main heading.
  4. Click inside any of the links in the header <div>, and select <li> in the Tag selector at the bottom of the Document window. This selects the whole list item so you can define a style rule for list items in the header.
  5. Click the New CSS Rule icon at the bottom-right of the CSS Styles panel, and click the Less Specific button once to change the Selector Name to #header ul li. Then click OK.
  6. The list items need to be floated left. So, select the Box category, and set Float to left.
  7. When you click OK, don’t panic if the design goes haywire. It should look similar to Figure 17.
Figure 17. Floating the menu items destroys th-e layout—at least temporarily.
Figure 17. Floating the menu items destroys th-e layout—at least temporarily.

The problem is caused by both the main heading and the navigation bar floating. When items float, they’re no longer constrained by the element they’re nested inside—in this case, the header <div>.

  1. Select #header in the All Rules pane of the CSS Styles panel, and click the Edit Rule icon.
  2. In the Box category, set Height to 100px, and click Apply. The navigation bar should reappear and the main image move further left (see Figure 18).
Figure 18. Adding a height to the header <div> brings the menu back into view.
Figure 18. Adding a height to the header <div> brings the menu back into view.

Note: Don’t worry that the main image is still off to the right. Design view doesn’t always show an accurate representation of page layout.

  1. Click OK to close the dialog box, and activate Live view. The main image should be centered under the header.
  2. Save the style sheet.

Use absolute positioning

The layout design calls for the menu to be at the bottom-right of the header.  To move it into position, you’re going to use absolute positioning. Before showing you how to do it, I must sound a word of warning. Many beginners fall into the trap of trying to lay out their entire design with absolute positioning (or AP Elements, as Dreamweaver calls them).

Note: Earlier versions of Dreamweaver called absolutely positioned elements Layers or AP Divs. However, any HTML element can be absolutely positioned. It doesn’t apply only to <div> elements.

The attraction of absolute positioning is that you can place an element precisely on a page, making web design feel almost like desktop publishing. However, the web is a fluid medium. People view pages on different size screens, and at different resolutions. Absolutely positioned elements behave in a very different way from other elements. They stay where you put them, and don’t interact with the rest of the page. This often creates the illusion that the absolutely positioned element moves. In fact, the opposite happens; the rest of the page moves in relation to the absolutely positioned element. Also, an absolutely positioned element might disappear off screen on a mobile device without generating a scrollbar, making vital information inaccessible.

Although absolute positioning presents problems for laying out entire pages, it can be very effective when you want to align an element with another. You specify the position as one or two offsets from the element’s sides. For example, if you set the left offset to 150px and the top offset to 100px, the left and top sides of the element are positioned exactly that distance away from the element’s containing block (see Figure 19).

Figure 19. The offsets of an absolutely positioned element are calculated from its containing block.
Figure 19. The offsets of an absolutely positioned element are calculated from its containing block.

Note: The offsets can be positive or negative. As Figure 19 shows, a positive 150px left offset moves the element 150px to the right away from the left of the containing block. A negative offset moves the element in the opposite direction outside its containing block, which is simply the point from which the offsets are calculated.

The secret to using absolute positioning successfully is understanding the principle of the containing block. Usually, an element’s containing block is the nearest block-level element higher up the HTML structure. In the case of the navigation bar, this is the header <div>. However, absolute positioning is different. The containing block is the nearest element higher up the HTML structure that has its position property set to absolute, fixed, or relative. If no such element exists, the page becomes the containing block.

To fix the navigation bar at the bottom-right of the header, the bottom and right offsets need to be set to 0. However, without first defining a containing block, the navigation bar would end up at the bottom-right of the page. To calculate the offsets from the header <div>, you need to set its position property to relative. Relative positioning is similar to absolute positioning, except the offsets are calculated from the element’s normal position in the document. So, if you make an element relatively positioned, but don’t set any offsets, it remains in its normal position, but with the crucial difference that it acts as the containing block for any absolute elements nested inside. It sounds complicated, but it’s very simple to implement.

Moving the navigation bar into place

So much for the theory. Now you can put it into practice to dispel any doubts you might have about the preceding explanation.

  1. In the All Rules pane of the CSS Styles panel, select the rule that controls the unordered list, #header ul, and click the Edit Rule icon.
  2. In the CSS Rule Definition dialog box, select the Positioning category and set the following values:
    • Position: absolute
    • Placement Right: 0px
    • Placement Bottom: 0px
  3. Click OK to make the changes and close the CSS Rule Definition dialog box.
  4. If the navigation bar is still visible, click the Live button to activate Live view. The menu disappears. It’s actually at the bottom-right of the Document window, but you likely can’t see it because the text is white.
  5. To verify what’s happened to the menu, select the rule that styles the links in the navigation bar, #header a, in the All Rules pane of the CSS Styles panel.
  6. Move your mouse pointer to the left of the color property in the lower pane to reveal an icon with a tooltip that reads Disable CSS Property. Then click the icon to temporarily disable the color of the links. You should now see the navigation bar at the bottom-right of the Document window (see Figure 20). The navigation bar doesn’t have a positioned containing block, so the offsets are calculated from the bottom and right of the page rather than the header <div>.
Figure 20. With the link color disabled, you can see the navigation bar at the bottom-right of the Document window.
Figure 20. With the link color disabled, you can see the navigation bar at the bottom-right of the Document window.
  1. Click the icon alongside the color property again to re-enable the property.
  2. To anchor the navigation bar inside the header <div>, you need to make the <div> relatively positioned. Select the #header rule in the All Rules pane of the CSS Styles panel.
  3. Click Add Property in the lower pane, and type position in the field that opens.
  4. Press Tab to move into the field where you set the property’s value, click the down arrow to reveal the available options, and select Relative. The navigation bar jumps into place at the bottom right of the header <div> (see Figure 21).
Figure 21. In Live view, the menu is now absolutely positioned at the bottom-right of the header.
Figure 21. In Live view, the menu is now absolutely positioned at the bottom-right of the header.
  1. Exit Live view, and save the style sheet.

Note: Design view sometimes gets confused by positioned elements. If the header disappears in Design view, close and reopen index.html.

Position text over the main image

Although the main_image <div> looks as though it’s filled with a large image, there’s actually nothing inside the <div>. The image is simply the background. The design calls for a block of text with a white background to be placed close to the white cross at the bottom-right of the image. You’ll use the same technique as for the navigation bar to move the text into position using a combination of relative and absolute positioning.

Adding the text

The text consists of two headings and a paragraph, so you need to create a <div> to hold them all together, and nest it inside the main_image <div>.
The most accurate way of inserting a new <div> is to use the options in the Insert Div Tag dialog box. It doesn’t matter where the Insertion point is, the options enable you to insert the <div> accurately, as long as your page elements have IDs.

  1. Open the Insert Div Tag dialog box by clicking Div or Insert Div Tag in the Insert panel.

    Alternatively, use the Insert menu. In the Creative Cloud update, choose Insert > Div. In earlier versions of Dreamweaver, choose Insert > Layout Objects > Div Tag.

  2. Click the down arrow of the Insert pop-up menu to reveal the options (see Figure 22).
Figure 22. View the options for where to insert the new <div> tag.
Figure 22. View the options for where to insert the new <div> tag.

The options available are:

  • At insertion point. The new <div> is inserted wherever the Insertion point currently is.
  • Before tag. The new <div> is inserted immediately before the specified element’s opening tag.
  • After start of tag. The new <div> is inserted immediately after the specified element’s opening tag.
  • Before end of tag. The new <div> is inserted immediately before the specified element’s closing tag.
  • After tag. The new <div> is inserted immediately after the specified element’s closing tag.
  • Wrap around selection. This option is displayed only when something is selected in the document window. The new <div> is wrapped around the selected element(s).
  1. The new <div> needs to be nested inside the main_image <div>, so it needs to go after the starting tag of main_image. Set the Insert pop-up menu to After Start Of Tag. (Because the main_image <div> is empty, you could also use Before End Of Tag in this case.)

    This activates a new pop-up menu to the right of the Insert pop-up menu.

  2. Click the down arrow of the new pop-up menu to reveal its contents. It lists the <body> tag, along with all other page elements that have an ID (see Figure 23).
Figure 23. Select the main_image <div> from the list.
Figure 23. Select the main_image <div> from the list.
  1. Select <div id="main_image"> from the list.
  2. Type main_text as the ID.
  3. Click New CSS Rule at the bottom of the Insert Div Tag dialog box. This opens the New CSS Rule dialog box.
  4. Dreamweaver automatically selects the correct values for Selector Type (ID) and Selector Name (#main_text). However, you need to check that Rule Definition is set to check_cs6.css. If it says This Document Only, select check_cs6.css from the Rule Definition list.
  5. Click OK to open the CSS Rule Definition dialog box, and select Background from the Category list on the left.
  6. Click the Background-color color box, and select white (#FFF).
  7. Select Box from the Category list on the left.
  8. Type 300 in the Width text box, and make sure the pop-up menu alongside is set to px. This sets the width of the main_text <div> to 300 pixels.
  9. Click OK. This saves the new CSS rule, and brings you back to the Insert Div Tag dialog box.
  10. Click OK to close the Insert Div Tag dialog box. This inserts the main_text <div> with some placeholder text.
  11. Click anywhere in the Document window away from the new <div> to deselect the placeholder text. The top-left of the main_image <div> should now have a 300-pixel wide, white box containing placeholder text (see Figure 24).
Figure 24. The main_text <div> has been nested inside the main_image <div>.
Figure 24. The main_text <div> has been nested inside the main_image <div>.

The white background of the main_text div covers the background image, so the text can be clearly read.

  1. Now, it’s time to insert the final text. In the Files panel (Window > Files), expand the assets folder, and double-click the main.txt file to open it.
  2. Select the entirety of the last block of text in the file, everything from "OPERATIVE WORDS" up to and including ". . . hiding in his bathroom."
  3.  Copy the text by choosing Edit > Copy, by right-clicking and selecting Copy from the context menu, or by pressing Ctrl+C/Cmd+C.
  4. Close the main.txt file.
  5. Select the placeholder text for the main_text <div>, and paste the text from your clipboard by pressing Ctrl+V/Cmd+V or choosing Edit > Paste.

    The text you copied from main.txt replaces the placeholder text, and the main_text <div> automatically expands vertically to accommodate it (see Figure 25).

Figure 25. The main_text div is now ready to be formatted and positioned.
Figure 25. The main_text div is now ready to be formatted and positioned.
  1. Choose File > Save All Related Files to save index.html and the style sheet.

Moving the main text into position

The main_text <div> will be absolutely positioned with the main_image <div> as its containing block. Although the technique is the same as used for the navigation menu, you need to work out the offsets from the bottom and right of the main_image <div>. You could try to judge the distance by eye and keep adjusting the values until you get it right. A more efficient way is to use guides in the Dreamweaver Document window to measure the distance accurately.

  1. Make sure the Document window is in Design view. Click the Design button if it isn’t.
  2. (Optional) Press F4 to hide the panels. You need a good view of the page layout, particularly of the main image.
  3. Choose View > Rulers > Show. This adds rulers measured in pixels at the top and left of the Document window.
  4. Click inside the top ruler and drag down. As you drag, you’ll see a thin, green, horizontal line move down the page, with a yellow tooltip indicating how many pixels it is from the top of the page (see Figure 26).
Figure 26. Dragging a horizontal guide from the ruler at the top of the page.
Figure 26. Dragging a horizontal guide from the ruler at the top of the page.
  1. Continue dragging until the green line is flush with the bottom of the main image (around 485px).
  2. Drag another guide from the top ruler until it’s in line with the position above the white cross where you would like the bottom of the main_text <div> to be. The exact position isn’t important. Use your eye to judge what looks good.
  3. Make sure your cursor pointer is between the green guides you have just positioned on the page, and hold down the Ctrl key (Windows) or the Cmd key (Mac). Dreamweaver displays the distance in pixels between the two guides (see Figure 27).
Figure 27. Measuring the distance between the guides.
Figure 27. Measuring the distance between the guides.
  1. Make a note of the value.
  2. Drag two guides from the left ruler, and position them in line with the right edge of the main image and where you would like the right edge of the main_text <div> to be.
  3. Position your cursor pointer between the vertical guides and hold down the Ctrl key (Windows) or the Cmd key (Mac), and make a note of the distance.
  4. The white cross is equidistant from the bottom and right edges of the main image, so the horizontal and vertical distances should be the same. I find that 60 pixels is about right.

Note: If you have difficulty positioning the guides, double-click one of the guides to open the Move Guide dialog box, and set the position by typing a value in the Location text box. Use 425px for the horizontal guide. The value for the vertical guide will depend on the size of the Document window. Double-click the guide on the right edge of the main image to find its position, subtract 60, and use that value for the main_text vertical guide.

  1. You need to make the main_image <div> the containing block for the main_text <div>, so select #main_image in the All Rules pane of the CSS Styles panel.
  2. Click Add Property in the lower pane, type position in the field that opens. Then press Tab, and select Relative from the list of values in the list on the right.
  3. Select #main_text and click the Edit Rule icon to reopen the CSS Rule Definition dialog box for the #main_text style rule.
  4. Select Positioning from the Category list on the left, and add the following settings:
    • Set Position to Absolute.
    • Type 60 in the Right and Bottom text boxes under Placement, and make sure the pop-up menus alongside are set to px.
  5. Click OK to close the CSS Rule Definition dialog box, and choose File > Save All Related Files to save the style sheet.
  6. Activate Live view by clicking the Live button. The main_text <div> should move into position.
  7. Turn off Live view. The right and bottom edges of the main_text <div> should be aligned precisely with the green guides, as shown in Figure 28.
Figure 28. The main_text <div> has been accurately positioned against the guides
Figure 28. The main_text <div> has been accurately positioned against the guides

Note: If the main_text area still doesn’t move. Try closing index.html and reopening it.

  1. You no longer need the guides, so dismiss them by choosing View > Guides > Clear Guides.

Where to go from here

The Check Magazine home page is beginning to take shape, but it needs more content. You’ll add that next in Part 4: Inserting images and styling text.

Comments are currently closed as we migrate to a new commenting system.  In the interim, please provide any feedback using our feedback form. Thank you for your patience.

Products

Download

Support & Learning

Buy

Company

Choose your region

Copyright © 2013 Adobe Systems Incorporated. All rights reserved.

Terms of Use | Privacy | Cookies

Reviewed by TRUSTe: site privacy statement