Structuring the Form

You can deduce now that you need to move the label element out of the document flow. Because this means that the element is no longer affected by its surrounding elements, you are theoretically on the right track.

Figure 3 shows you the result of adding a left float to the label element. This is not good, not good at all! Things have really gone awry. Not to worry; you aren't as far away as you might think from achieving your desired layout.

Figure 3. Floating the label element

Here I show you how the rules you have used so far were set, and reveal the final bit of the puzzle to complete the desired layout. The following Captivate demo picks up with the StylingFormElements.html page and FormStyles.css file you created in Part 1.

• View the movie: Structuring the Form

Alternatively you can complete the following steps:

1. Press Shift+F11 to open the CSS panel.
2. Select the Label rule and then select the Add Property option.
3. Select Background Color from the pop-up menu, click the color picker, and select #CC0000.
4. Choose the Add Property option and select Float from the pop-up menu.
5. Select Left for the value from the pop-up menu.
6. Open your FormStyles.css file. You can see the newly added property and values.
7. Save the FormStyles.css file.
8. Open your StylingFormElements.html page in Code view.
9. Before the opening label tag for textfield, type <div>
10. Locate the closing /> for the text field form elements and type </div>
11. Switch back to Design view. Notice how the div has brought the two elements together?

12. Switch back to Code view and select the Layout tab from the Insert bar. You now have access to the Insert Div Tag icon (see Figure 4).

    

    Figure 4. Insert Div Tag icon

13. Highlight the Select Form element and its label.

14. Click the Insert Div Tag icon to open the Insert Div Tag dialog box.

    

    Figure 5. Insert Div Tag dialog box

    You have no need to select a class or ID; you can leave those fields blank. You will affect these div tags with CSS using a descendant selector.

15. Click OK to close the dialog box.
16. Repeat Steps 13–15 for each form element and label pair on your page.
17. When you have completed setting the div tags, switch to Design view.
18. Press Shift+F11 to open the CSS panel.
19. Select the Label rule and click the Add Property option.
20. Select Width from the pop-up menu.
21. Set the value to 140px.
22. Save your work.

During this process you used divs to act as a container to each label and form element pair. Divs are an ideal candidate for this situation because they have no semantic meaning. You could have used p tags to confine the elements but this would have been semantically incorrect because they would not have represented paragraphs. It is always best to use semantically correct markup.

Your StylingFormElements.html page should now look like Figure 6. The dotted lines running across the page depict each element's height. These lines are shown or hidden by setting CSS Layout Outlines to be visible or not. While it is not necessary to switch on this visual aid, I tend to work with it all the time because it gives me a visible representation of exactly what is going on with each element, and I find that invaluable.

Figure 6. StylingFormElements.html showing the CSS layout outlines

As I mention in other tutorials, the CSS Layout Backgrounds feature is another invaluable tool. Switch it on now from the Visual Aids icon on the Document tool bar (see Figure 7).

Figure 7. StylingFormElements.html showing the CSS layout backgrounds

Just think how you once had to set a background color for each element in your CSS file to achieve this visual effect prior to Dreamweaver 8. I've said it before and I'll say it again: This is a fantastic addition to Dreamweaver 8.

Page 3 of 4

Previous Page

Next Page