Welcome to Part 4 of this tutorial series on creating your first website. This tutorial shows you how to add text to the main image area of the index page for Check Magazine, a fictional publication, using a combination of relative and absolute positioning. The tutorial also shows you how to use CSS to format the text.

Locate your files and review your task

In this tutorial, you'll begin with the CSS layout (index.html) you added content to in Part 3, Adding content to pages. If you did not complete that tutorial, you must complete it before proceeding, or download first_website_pt3_completed.zip (474 KB). If you haven't completed Part 1, Setting up your site and project files, you will need to complete that tutorial as well.

Your task in this tutorial is to add a block of text to the main image area of the Check Magazine home page. You'll also learn how to format the text using CSS. Figure 1 shows what the main image area will look like in a browser after you've added the text.

Figure 1. The main image area of the Check Magazine home page with added text.

Basically what you'll do to accomplish this task is add a div with text to the main image area, format the text, and lastly, position the div.

Add the div tag and text

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. If you look at the original design comp again, you'll see that to finish the page, you need to add a block of text at the bottom right of the div. You also need to add a menu bar, but you'll tackle that in Part 5. First, let's deal with the text in the main_image div.

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.

In Dreamweaver, open the index.html file that you created in Part 3, Adding content to pages.
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. All the divs in index.html have been given IDs, so it's just a question of choosing the correct options in the dialog box.
Click Insert Div Tag in the Insert panel, or select Insert >Layout Objects > Div Tag to open the Insert Div Tag dialog box.
Click the down arrow of the Insert pop-up menu to reveal the options (see Figure 2).

Figure 2. 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).

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.
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 3).

Figure 3. Select the main_image div from the list.

Select <div id="main_image"> from the list.
Type main_text in the ID text box.
Click the New CSS Rule button at the bottom of the Insert Div Tag dialog box. This opens the New CSS Rule dialog box.
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_cs5.css. If it says "This document only," select check_cs5.css from the Rule Definition list.
Click OK to open the CSS Rule Definition dialog box, and select Background from the Category list on the left.
Click the Background-color color box, and select white (#FFF), as shown in Figure 4.

Figure 4. Set the CSS background-color property for main_text to white.

Select Box from the Category list on the left.
Type 300 in the Width text box, and make sure the pop-up menu alongside is set to px (see Figure 5). This sets the width of the main_text div to 300 pixels.

Figure 5. Set the width of the main_text div to 300 pixels.

Click OK. This saves the new CSS rule, and brings you back to the Insert Div Tag dialog box.
Click OK to close the Insert Div Tag dialog box. This inserts the main_text div with some placeholder text.
Click anywhere in the Document window away from the new div to deselect the placeholder text. The main_image div should now look like Figure 6, with a 300-pixel wide, white box containing placeholder text at the top left.

Figure 6. 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.

Now, it's time to insert the final text. In the Files panel (Window > Files), double-click the text.txt file to open it.
Select the entirety of the last block of text in the file, everything from "OPERATIVE WORDS" up to and including ". . . hiding in his bathroom."
Copy the text by selecting Edit > Copy, by right-clicking and selecting Copy from the context menu, or pressing Ctrl+C/Cmd+C.
Close the text.txt file.
Select the placeholder text for the main_text div, and paste the text from your clipboard by pressing Ctrl+V/Cmd+V, or selecting Edit > Paste.
The text you copied from text.txt replaces the placeholder text, and the main_text div automatically expands vertically to accommodate it (see Figure 7).

Figure 7. The main_text div is now ready to be formatted and positioned.

Select File > Save All Related Files to save index.html and the style sheet.

Rearrange CSS

Before showing you how to format your text, I'd like you to take a look at the CSS. As you've been creating rules, Dreamweaver has been adding the CSS to the external style sheet for you. However, because you've created the rules at different points in the page's development, they are not necessarily in the most logical order. I like to have my CSS ordered logically so that if I want to edit the style sheet later on, I'll have an easier time scanning and finding the rule I'm interested in.

Click check_cs5.css in the Related Files toolbar to open the style sheet in Split view (see Figure 8).

Figure 8. The styles you have created so far.

Scroll down to the bottom of the CSS file, and note that the #main_text rule is the last rule on the page. That's because you just added it in the previous section. Also note that the body rule is third from the bottom.
Because the body rule affects the entire page (corresponding to the <body> tag of the HTML document), it's usually the first rule in the CSS file. But since you created it after you created some of the other rules, Dreamweaver placed it farther down in the file.

Similarly, the #main_text rule goes hand-in-hand with the #main_image rule, and doesn't belong at the bottom of the CSS file. In other words, if you were looking for all of the rules that affect that central section of the page, you'd want to see these two rules grouped together in the CSS file.

Another problem is that the body and #main_text selectors (on lines 25 and 31 in Figure 8) are on the same line as the closing brace of the previous rule. This happens if you don't leave a blank line at the bottom of the style sheet when creating a new rule manually. It doesn't affect the way the browser handles the style rules, but untidy code is difficult to read, and could lead to mistakes. It's better to reformat it.

You could work directly in the CSS file, cutting and pasting until you get the file to look the way you want. However, I'm going to show you another way.
Select Commands > Apply Source Formatting. Dreamweaver sweeps through the style sheet, putting rules on lines of their own, and tidying up any indenting problems.
If the CSS Styles panel isn't already open, click its tab to open it.
Click the All button to make sure All mode is selected.
You'll see all of your rules listed. The order of the rules in the CSS Styles panel follows the same order as the style sheet (that is, #main_text is last, body is third from the bottom).
Select the body rule and drag it to the top of the rules list, above the #container rule (see Figure 9).

Figure 9. Drag the body rule to the top of the rules list in the CSS Styles panel.

Look at the style sheet in Split view. The body rule has been moved above the #container rule (see Figure 10).

Figure 10. The body rule has been moved in the style sheet as well.

Note: Don't worry if you see the comment text /* CSS Document */ in between the body rule and the #container rule (see line 7 in Figure 10), you can go ahead and delete it. This is just descriptive comment text that Dreamweaver adds to the file by default.

Next, select the #main_text rule and drag it up the list, dropping it just below the #main_image rule, as shown in Figure 11.

Figure 11. Drag the #main_text rule.

Your rules now follow a more logical order: first comes the body rule, which governs the entire page, then the #container rule, which also governs the other rules, since all of the elements associated with those rules exist within the container div. Then come the rules associated with each element on the page, ordered as those elements appear on the page: the main image, the main text, and the columns at the bottom.

Save the style sheet.

Format the text

Next you'll format the text inside the main_text div.

The index.html file should still be open in the Document window. If it isn't, double-click its icon in the Files panel to open it.
Click the Design view button so that you are no longer in Split view.
Place the Insertion point after WORDS at the end of the first line in the main_text div, and press Enter (Windows) or Return (Mac OS X) to divide the text into separate paragraphs.
Press the down arrow key once so that the Insertion point is before the word Stumbling, and press the Backspace key once to delete line break. This is the same technique as you used when breaking up the text you pasted in Part 3 of this tutorial series.
Place the Insertion point after the word Circle at the end of the second line in the main_text div, and press Enter (Windows) or Return (Mac OS X) to create a new paragraph.
Press the down arrow once to place the Insertion point before the capital letter T in the word The, and press the Backspace key once to delete the line break. There should now be three separate paragraphs in the main_text div (see Figure 12).

Figure 12. The text has been split into three paragraphs.

Make sure the Property inspector is open (Window > Properties) and that the HTML button on the left of the Property inspector is selected.
In the main_text div, place the Insertion point in the OPERATIVE WORDS line (anywhere in the line will do), and note that the Format is set to Paragraph in the Property inspector. This is the format Dreamweaver automatically created when you pressed Enter/Return to separate the lines of text.
Select Heading 2 from the Format pop-up menu of the Property inspector.
Note that you do not need to select the entire line of text before applying a format. This is because Dreamweaver is formatting the text by changing the text's entire tag (from a paragraph tag to an h2 tag).
Place the insertion point in the second line, the Stumbling line.
Select Heading 3 from the Format pop-up menu of the Property inspector.
Click the Split view button so that you can see the new tags (see Figure 13).
Note: If the style sheet is still visible when you open Split view, select Source Code in the Related Files toolbar just below the page's tab.

Figure 13. The h2, h3, and paragraph tags in Code view.

These tags are important. You'll use them in the CSS to define the rules that will format the text.

Click the check_cs5.css button in the Related Files toolbar to display the contents of the style sheet.
In the CSS file, place the Insertion point after the closing brace of the #main_text rule and press Enter/Return a bunch of times to create some space (see Figure 14).

Figure 14. Creating space in the CSS file.

Move the Insertion point back up until it's just below the closing brace of the #main_text rule (you can use the up arrow key on your keyboard, or the mouse), and type the following empty rules into the file:

        #main_text h2 {
}
#main_text h3 {
}
#main_text p{
}
    

The selectors for these rules (that is, the names outside the braces that define the rules) are called descendant selectors because they target HTML elements that are descendants of another element (in other words, nested inside it). The first of these selectors targets <h2> tags inside the #main_text div. What this means is that any styles defined in this rule will have no effect on the <h2> tags in the columns at the bottom of the page.

The second rule affects <h3> tags only if they're inside the #main_text div. And the last one formats paragraphs ( <p> tags) only if they're inside the #main_text div.

Note: When using the New CSS Rule dialog box to create descendant selectors, you need to set the Selector Type pop-up menu to Compound. This is Dreamweaver's way of describing CSS selectors that are created using multiple elements.

The CSS file should now look as shown in Figure 15.

Figure 15. The CSS file with the new empty rules.

Now, add the following properties and values to the empty rules so that they look like this:

        #main_text h2 {
    color: #00b4e1;
}
#main_text h3 {
    font-size:16px;
}
#main_text p {
    font-size: 14px;
}
    

Once you've added properties to all three rules, press F5 or click once in Design view to refresh the display.
Look what happened to the text. The h2 heading has turned blue; the h3 heading has been resized, and now fits on one line; and the paragraph text has been reduced in size (see Figure 16).

Figure 16. The main_text div text after applying new rules.

Note: For many years, it was recommended not to use pixels for the font-size property because the world's most popular browser at the time, Internet Explorer 6, made it difficult for people with poor eyesight to resize the text. However, Internet Explorer 7 introduced a zoom feature, and issue is becoming less of a problem as Internet Explorer 6 gradually dies away.

You're not quite there yet. The three sections of text are still a bit too spread out, and the paragraph text is bumping right up against the walls of the main_text div. You need to add a few more properties and values to fix that.

Add three more properties and values to the #main_text rule, so that it looks as follows:

        #main_text {
    background-color: #FFF;
    width: 300px;
    line-height: 1.2;
    font-family: "Myriad Pro", Helvetica, Arial, sans-serif;

    padding: 12px;}
    

The line-height property will increase the vertical space between all lines in the main_text div. (Yes, you do actually want to increase the general line height in the div—you'll see why in a moment.) The font-family property will change the font of all the text in the div, and the padding property will add a 12-pixel padding inside the div.

Note: When you have a single value for padding, it acts as a shorthand value for top, bottom, left, and right. It is the equivalent of saying:

        padding-top: 12px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 12px;
    

Refresh Design view by clicking inside it or pressing F5 to see how the new properties have affected the text.
Lastly, get rid of some of the vertical space between the blocks of text, and condense the div.
Add a margin property to the #main_text h2 rule, the #main_text h3 rule, and the #main_text p rule, so that the rules look as follows:

        #main_text h2 {
    color: #00b4e1;
    margin: 0 auto;
}
#main_text h3 {
    font-size:16px;
    margin: 0 auto;
}
#main_text p {
    font-size: 14px;
    margin: 0 auto;
}
    

The syntax for the margin property above is another short-hand notation, much like the one for padding in the previous step. When you declare only two values for the margin property, the first value declares the top and bottom values, and the second value declares the left and right values. By declaring a top and bottom margin of 0 for all three of these rules, you are effectively saying that there should be no extra space (other than the 1.2 line height) between the h2, the h3, and the paragraph text. The auto value in this case simply specifies the default value for the right and left of the h2, h3, and paragraph elements.

Tip: For more information about any CSS property, check the O'Reilly reference guide included with Dreamweaver. To display the guide, select Help > Reference and select O'Reilly CSS Reference from the Book pop-up menu in the Reference panel.

Refresh Design view to see how the margin properties have affected the text (see Figure 17).

Figure 17. The main_text div after you have added margin properties and applied the rules.

The text is looking pretty good, but before you go ahead and position the div, let's check to see what the text formatting looks like in Live view.

Click the Live view button.
Design view displays the page in Live view (see Figure 18).

Figure 18. The formatted main_text div as it appears in Live view.

Hmm . . . that's not exactly what I wanted. Monitors might differ, but on my screen the OPERATIVE WORDS h2 text still seems a little too close to the h3 text in Live view. Let's fix that by adjusting the margin of the h2 heading one last time.

Leaving Live View active, go back to the CSS file, and change the #main_text h2 rule to this:

        #main_text h2 {
    color: #00b4e1;
    margin-top: 0;
    margin-bottom: 10px;

}
    

Refresh Live View by clicking back inside or pressing F5, and note the change (see Figure 19).

Figure 19. The main_text div after adjusting the margin properties for the h2.

That's much better!

Click the Live View button to exit Live View.
Select File > Save All Related Files to save the CSS file.

Position the main_text div

Now that you have the main_text div looking exactly the way you want, the final task is to position it on the page. There are several ways of doing this.

The approach taken in the original version of this tutorial series was to add padding to the top and left of the main_image div. This achieved the desired result, but many readers found it difficult to follow, because of the way CSS treats width and height when padding is added to an element. The CSS box model adds padding outside the width and height, not inside. As a result, to move the main_text div to the bottom right of the main image, you needed to subtract from the width and height of the main_image div the same amount as you added in padding. In other words, to add 100 pixels of padding to the top of the div, you needed to subtract 100 pixels from its height, so that the total of padding plus height still came to the same amount. Moreover, positioning the main_text div like this was possible only because the main_image div was empty. If you wanted to put more than one block of text inside the main_image div, the calculations became even more complex.

The approach I have decided to adopt this time is 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 Divs, as Dreamweaver calls them). 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 monitors, 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. So, it the user resizes the browser, an absolutely positioned element might disappear off screen. The browser doesn't generate a scrollbar when this happens, so vital information might become inaccessible.

However, if used carefully, absolute positioning can be very effective, particularly when you want to align an element with a background image. In this case, the plan is to position the bottom right corner of the main_text div slightly above and to the left of the white cross at the bottom of the main image (see Figure 1).

Click the Design button to view index.html in Design view.
(Optional) Press F4 to hide the panels. You need to get a good view of the page layout, particularly of the main image.
Select View > Rulers > Show. This adds rulers measured in pixels at the top and left of the Document window.
Click inside the top ruler and drag down. As you drag, you should 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 (circled in Figure 20).

Figure 20. Dragging a horizontal guide from the ruler at the top of the page.

Continue dragging until the green line is flush with the bottom of the main image (around 491 px).
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.
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 OS X). Dreamweaver displays the distance in pixels between the two guides (see Figure 21).

Figure 21. Measuring the distance between the guides.

Make a note of the value.
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.
Position your cursor pointer between the vertical guides and hold down the Ctrl key (Windows) or the Cmd key (Mac OS X), and make a note of the distance.
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.
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 431 px 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.
Open the CSS Styles panel by clicking its tab, or by selecting Window > CSS Styles.
Make sure the All button is selected to view the panel in All mode.
Double-click #main_text to reopen the CSS Rule Definition dialog box for the #main_text style rule.
Select Positioning from the Category list on the left, and add the following settings:
- Set the value of the Position pop-up menu to absolute.
- Type 60 in the Right and Bottom text boxes, and make sure the pop-up menus alongside are set to px.
- Click Apply.

Figure 22. Using absolute positioning for the main_text div.

Don't worry if the main_text div remains stubbornly at the top-left of the main image div. Click OK to close the CSS Rule Definition dialog box, and select File > Save All Related Files to save the style sheet. The main_text div should move into position with its right and bottom edges aligned precisely with the green guides.
Note: If the main_text area still doesn't move. Try closing index.html and reopening it.
Click the Live View button to verify the text is in the correct position (see Figure 23).

Figure 23. Live View confirms that the text is correctly positioned.

With Live View still active, select #main_image in the CSS Styles panel, and move your cursor pointer over the left side of the Properties pane until you see the Disable CSS Property symbol next to the position property (see Figure 24).

Figure 24. Temporarily disabling a property in the CSS Styles panel

Click once to disable the position property. A red symbol appears alongside the property to indicate that it has been disabled.
Note: The ability to disable style rules temporarily is new to Dreamweaver CS5. If you are using an older version of Dreamweaver, you will need to open the style sheet and manually comment out the position: relative; declaration.

Look what has happened to the main_text div. It has moved from its previous position(see Figure 25).

Figure 25. The position of the main_text div is no longer relative to the main_image div.

The actual position of the main_text div depends on the size of your Document window. Instead of being positioned relative to the bottom and right of the main_image div, it's now 60 pixels from the bottom and right edge of the Document window.

Click the Disable CSS Property icon alongside the position property to re-enable it. The main_text div jumps back into place.
What's important to understand here is that the main_text div is nested inside the main_image div. In CSS terms, #main_text is the child of #main_image , and #main_image is the parent of #main_text . By setting the position property of the parent to relative , the child is absolutely positioned relative to its parent. When you disabled the position property in #main_image , the absolute position of #main_text was calculated relative to the bottom and right edges of the browser window (in this case, Live View).
Select File > Save All Related Files to save the page and the style sheet.
Open the BrowserLab panel by clicking its tab, or by selecting Window > BrowserLab, and click Preview. Verify that the page looks as expected in all major browsers. Even Internet Explorer 6 plays ball.
Select View > Guides > Clear Guides to remove the green guide lines from Design view.

Used in moderation, absolute positioning can be very helpful in situations like this. By using the bottom and right offsets, the bottom-right corner of the main_text div will remain in the same position, but it will grow taller if you add more text. A common mistake with using absolute positioning is the failure to realize that web pages are designed to be flexible. If you use absolute positioning for text elements, adding extra text is likely to result in one element overlapping another. It's also important to understand the principle of anchoring an absolutely positioned element inside its parent by setting the parent's position property to relative .

You have one more task to accomplish before the page is complete. In Part 5: Adding the Spry menu you'll add a Spry Menu Bar widget to the top of the page so that users can navigate the website.

Tutorials and samples

Tutorials

Samples

Dreamweaver user forum

04/23/2012	Resolution/Compatibility/liquid layout
04/20/2012	using local/testing server with cs5 inserting images look fine in the split screen but do not show
04/18/2012	Ap Div help
04/23/2012	Updating

Dreamweaver Cookbook

11/07/2011	Simple social networking share buttons
09/20/2011	Registration form that will generate email for registrant to validate
08/21/2011	Spry Accordion - Vertical Text - Auto Start on Page Load - Mouse Over Pause
08/17/2011	Using cfdump anywhere you like

Creating your first website – Part 4: Adding the main image text

by David Powers

Content

Created

Page tools

Requirements

Prerequisite knowledge

User level

Required products

Sample files

Locate your files and review your task

Add the div tag and text

Rearrange CSS

Format the text

Position the main_text div

Tutorials and samples

Tutorials

Samples

Dreamweaver user forum

Dreamweaver Cookbook

Products

Solutions

Industries

Help

Learning

Ways to buy

Downloads

Company