Web Standards in Dreamweaver Part 3 - The Content Area
(Page 8 of 12 )
Finally, for this simple layout, you need to place the content on the page.
1. Create a new CSS style, select the Advanced radio button, and type #content into the Selector box. You want your content to be liquid and stretch to fill the user’s screen width, so click the Box category, and in the Margin area, clear the Same for all check box and set the following properties:
- Top: 50 pixels
- Left: 260 pixels
- Right: 40 pixels
2. Now click OK, and insert the content after the tag <div id="nav">. You should see the <div> appear in the main area of the page, as shown in Figure 2-44. Add some dummy content.
Figure 2-44. The <div> tag in the page's main area.
As you may have realized, you did not use absolute positioning or anything else to position this content. You simply used a margin to clear it from the navigation, which is absolutely positioned. This works because absolute positioning takes an element out of the flow of the document. The content without any margins applied to it would have simply lain over the top of the navigation as if the navigation was not there.
To display the layout so it is resized with the user’s screen size, make sure that the content leaves space for the absolutely positioned navigation.
This is a very simple layout, but hopefully it has given you an idea of the tools that are available in Dreamweaver to work with CSS layouts. If this is your first experience with CSS, you may find the concepts a little tricky, but the best way to become accustomed to any new way of working is simply to experiment and try things out. The “Resources” section at the end of this chapter lists several sites that provide CSS layouts that you can experiment with. There are also the CSS page designs within Dreamweaver that you can use as starting points for your own experiments.
 This chapter is from ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou (Apress, 2004, ISBN: 1590593480). Check it out at your favorite bookstore today.
Buy this book now. |
Next: Browser and Device Issues >>
More Web Standards Articles
More By Apress Publishing
/ 4 
