8. Using Styles for Layout
In This Chapter
In Chapter 7, you saw how to use CSS (Cascading Style Sheets) and the CSS Designer panel. Now that you’ve learned how to use them, it’s time to take them out for a test drive.
This chapter covers creating pages using Dreamweaver’s CSS layouts, and then how to modify them to match your designs.
CSS Layout Basics
When CSS first started becoming popular (that is, when enough browsers supported it consistently), its primary use was for styling text, and web designers were thrilled to say goodbye to the font tag. Besides styling text, it’s also possible to use CSS to define how your page is laid out, and thankfully, modern browsers now have sufficient market share that CSS layouts are standard.
The box model
When you lay out a page using CSS, you’re using the box model—that is, you’re creating boxes (usually done by adding a div) and laying them out on your pages. Each box contains several elements 
: margin, border, padding, and content. Using CSS, you can set rules for each element. If you want, you can (for example) set different rules for the top, right, bottom, and left sides of an element.
The CSS box model, broken down into parts.
Let’s say that you want to put a line above and below your text. You can set the border around your text (that is, to the tag that contains your text) to 1px black solid just for the top and bottom. If you don’t set the other sides, they’ll be set to 0 by default.
Positioning your boxes
When you’ve created boxes on your page, you’ll want to place them. To do that, you need to understand two new concepts: position and float.
The position of a box can be static, relative, inherit, absolute, or fixed 
.
An example of an absolutely positioned box with set width.
Static: The simplest position is static; it just means that the box ends up wherever it would normally end up, all on its own. Any left or top offsets you give it are ignored.
Relative: The next simplest is relative, which is just like static except that you can set its left and top positions.
Inherit: Inherit is used when you want a box to automatically inherit the properties of its parent (that is, its container). Wherever that box happens to be, it just takes on the position rules based on its container.
Absolute: Absolute and fixed are similar in that you can specify exactly where on your page you want the box to appear. The difference between the two involves their frame of reference: an absolutely positioned box is positioned in reference to its container. If you have an absolutely positioned box placed 100 pixels from the top of a page, and another absolutely positioned box inside that box that is also set to be 100 pixels down, the interior box will be 200 pixels down, not 100—because its frame of reference is to the box that it’s inside.
Fixed: Fixed positioning, on the other hand, is based on the page itself. If you set a box to be fixed at 100 pixels down, it will always be there, even if you scroll the page. When you scroll, that box will move down with you so that it’s always 100 pixels down from the top of the visible page.
Floating your boxes
Alternatively, a box can be set to float, such that its contents stick to one side or the other of its containing element 
. The values for float are left, right, none, and inherit.
This div (and the navigation area it contains) is floated to the left.
Left: A box that is floated to the left causes everything else on the page (everything that isn’t explicitly told to be somewhere else, that is) to wrap around it to the right.
Right: A box floated to the right causes everything else to wrap around it on the left.
None: This is the default, but it’s sometimes useful to be able to explicitly tell a box not to float (usually when trying to work around browser bugs).
Inherit: If you want a box to inherit the float value of its container, just set float to inherit.
Tip
All browsers released in the last several years handle positioning and floating boxes well. Older browsers may have varying degrees of difficulty with these concepts. As always, we recommend testing your site in as many browsers (and versions and platforms) as possible.
Tip
The information about the box model here is just a quick and dirty definition. Many pages (and some entire books) have been written on the intricacies of the box model.
Using the Included Layouts
Initially, you might think that it’s difficult to get started using CSS for layout, but fortunately, Dreamweaver has included two CSS layouts to make getting started as easy as can be. These files are flexible, professionally developed HTML5 templates that make a great starting point.
To use the included layouts
1. From Dreamweaver’s menu, choose File > New. The New Document dialog appears .
The familiar New Document dialog contains handy CSS-based page designs to get you started. Look at the preview column to decide which of the designs you want to use as the basis for your page.
2. If it wasn’t chosen by default, select the category Blank Page, and select HTML from the Page Type menu. You should see two designs listed in the center column. Choose either of these to see a preview in the right column. Directly below the preview is a short description of the design.
3. If you see a design you like, click Create. A new, untitled Dreamweaver document opens in the chosen design . You now have a template for your site that’s entirely CSS-based. You can modify the page content and its styles.
Here’s your new page, ready to receive your content.
4. Save the new layout by choosing File > Save or by pressing Ctrl-S (Cmd-S).
Tip
When creating a new page based on an included layout, you’re given the option of putting the required CSS in the head of the document, in a new file, or in an existing file. When you put your site online, your CSS should be in an external file, but it’s easier to test and debug when it’s in the head of the document. If you decide to start with it in the head, you’ll want to check out Chapter 9, which covers moving internal styles to an external file.
Tip
Don’t forget to add a title to your page in the Title field of the Document toolbar.
Tip
Even if none of the included design files suit your taste, take a look at them and check out how they work. They’re a good way to learn how to use CSS to lay out a page, as they contain numerous comments explaining just why certain rules are needed.
Tip
If you’ve previously used Dreamweaver, you might be wondering where most of its included layouts went. The answer is that while it was great that there were so many options, the sheer number of them (elastic, fixed, liquid, hybrid, and so on) ended up confusing people. Some of them, sadly, were so complex that they were brittle—that is, they could break when new browser versions shipped. Back in CS5, Adobe pruned the list, keeping only those that are commonly used and rock solid. They also rewrote the templates to use cleaner code and to include instructions in the layouts that make it easier for you to understand how the different parts of the layouts work. In CC, they pruned the list down again to its current two layouts.
Laying Out Your Page
Here’s where things get interesting: now that you’ve got the theory, it’s time to put it into practice. With the included CSS layouts, it’s straightforward.
Before you start laying out your page, you need to think about what you want on that page and where you want it to go. As discussed in Chapter 2, the best way to do that is with pencil and paper. That should tell you what styles you’ll need—for instance, a header, footer, content area, and navigation area. Once you have a design in mind, look through the included CSS layouts to see which best fits your idea .
You’ll want to have a plan before you start laying out your page; here’s our planned design.
Now you’re ready to start. In this case, we’ll start with the 2-column fixed layout, with a right sidebar, header, and footer, as seen in 
of the previous task. The fixed part of the name means that the page content area stays the same width as the browser windows expands or contracts.
To lay out your page
1. Choose the “2-column fixed, right sidebar, header and footer” layout, and Dreamweaver gives you a bare-bones page to start, shown in 
of the previous task.
2. Almost all your work will be done in the CSS Designer panel . The first thing we want to do is change the sidebar from the right side to the left, and to do that, we need to change two rules: one for .sidebar1 and one for .content. In both cases, change the float to be left 
instead of right 
.
The CSS Designer panel, currently featuring the .sidebar1 class.
3. The body styles are all fine except for the background color—we want it to be a lighter shade of gray instead of the default, so we’ll change its value to #666666.
The styles for the body tag only need a single change.
4. Next is the .container rule 
, which applies to the one large div that contains all the content on the page. Again, we only want to change the background color; now it will be a light shade of gray, #EBEBEB.
Next, change the styles for the class named .container.
5. The .content area is the section that will contain (as you might guess) the bulk of the page content. For easy readability, we want its background to be #FFFFFF (that is, white). This section doesn’t have a default background color, so we have to add it 
.
The .content style needs a white background, which we added here.
6. The default page assigned a background color to the sidebar, which we don’t want. To remove the default, select the background-color property (found under .sidebar1) and click the trashcan icon 
.
Click the trashcan icon in the CSS Designer panel to delete a property and its value.
7. Our page header has two parts: the foreground banner and the background color. The banner image is named header.jpg, and it simply needs to be dragged into the header area. Next, delete the dummy logo image placeholder that came with the layout, and change the green background to a shade that blends into the header graphic (#91A43D). And finally, add a text-align style declaration with a value of center to center the banner horizontally within the header area 
.
Once you’ve set up the header, you’re a long way toward having your webpage just the way you want it.
8. All that’s left to change is the background color of .footer to a shade of gray, #DDDDDD 
.
Styling the footer finishes the page.
Tip
Setting the background color for .sidebar1 by letting the background color for .container show through is a technique called faux columns. To produce the desired effect (a sidebar with a background color going from the header to the footer), each page needs to have enough content so that the main content area is longer than the sidebar’s content. Thankfully, our navigation needs here are minimal enough that that isn’t a problem.
Tip
You don’t really need to know that white is #FFFFFF—you can just select the color you want from the color well in the panel.
Laying Out Your Navigation
The previous task laid out the entire page except for one small section: the navigation menu. While the menu is only a small section of the webpage, it’s a vitally important part to your visitors. Here’s how to personalize it to match the rest of your design.
1. Start by removing the one unwanted style rule: the border-bottom on the nav li selector.
2. The only change the nav ul needs is to the top border’s color, and that’s done by changing the value of border-top-width to 1px; border-top-color to #EBEBEB; and border-top-style to solid .
Here you’ve changed the standard nav ul rule.
3. The changes to the nav a, nav a:visited selector are a little more complex. Start by changing the selector to apply to nav a:link instead of nav a . Then, set background-color to #336666.
Changing the selector from nav a to nav a:link works around a problem with the cascade.
Next, add several new properties: color, which should be set to #EBEBEB; font-weight, which should be set to bold; border-bottom-width, which should be set to 1px; border-bottom-color, which should be set to #EBEBEB; and border-bottom-style, which should be set to solid .
Once you’ve changed the rules for your links, you can see how the navigation will look.
4. You may think you’re done , but you still need to handle rollovers. That’s where users get feedback so they know where to click.
The almostcompleted navigation section before styling the rollovers.
The selector to change is nav a:hover, nav a:active, nav a:focus. Change the color to #336666 and the background color to #EBEBEB: the same colors you used in the last step, just reversed. When you roll the cursor over a link, it will go from gray text on a green background to green on gray .
Swapping the color scheme from gray on green to green on gray means you’re almost there.
5. Make the links look like buttons by setting their padding and border values . To achieve the desired button-like effect, you have to do a little bit of calculating.
Adding a border to the right and bottom makes your links look like 3D buttons.
For each side of the button, add together the width of the padding and the width of the border for the non-hovering (inactive) version of the button. Then for the hover state, the width of the padding added to the width of the border must be the same sum as the non-hover version.
In this example, look at the bottom of any navigation link: when inactive, the padding is 5px and the border is 1px, for a total of 6 pixels. So when you’re hovering, the sum of the padding and the border must also be 6 pixels—if not, the button will appear to jump around. With the border and the padding each set to 3px, you get the effect you want.
Now look at the right side. The inactive state has 5px padding and no border, for a sum of 5 pixels. To get a nice even button when hovering, set the right border to 3px, which means the padding needs to be 2px.
Now that you have the values you need, all you have to do is add them to the nav a:hover, nav a:active, nav a:focus selector. Set both the border-bottom and border-right properties to 3px #999999 solid. And finally, add padding-bottom with a value of 3px and padding-right with a value of 2px .
Here you’ve set the necessary properties to make the rollover happen.
Tip
Don’t forget that you can inspect any element on the page by Alt-clicking (Opt-clicking) to show the Code Navigator, including the rules that apply to that element. Hovering over a selector, as in , shows all the rules that make up the selector. The tool tip also shows the values (if any) of float, position, top, right, bottom, left, width, height, and overflow. See Chapter 7 for more about using the Code Navigator.
Hovering over a style in the Code Navigator gives you useful information about that element.
Tip
Not seeing the rollovers? Turn on Live view, which shows your site the way a browser would display it.
Tip
The figures show the borders using shorthand, so your pane might not appear identically. Just remember that the shorthand for border properties has the order: width, color, style.
Modifying Your Navigation
You now have your page just the way you want it—or so you think. After working with it, you realize that the left sidebar needs to be used for other purposes, and you want the navigation horizontally along the top. Back to the drawing board to start all over again, right? Nope; here’s where the power of CSS really comes through.
To modify your navigation
1. Using the tag selector, select nav , and then drag the selection to just after the header and before the sidebar. This can be a little tricky, so use Edit > Undo until you get it right. The result should look like . But don’t panic because of the way it looks—you’re not done yet.
Select the nav element from the tag selector, and then carefully move it to its new home.
Now the navigation is above the content, but the buttons still go down instead of across.
2. Now you just need to modify the CSS, so you start by changing the nav ul selector :
Delete the margin-bottom and border-top properties.
Add the property height with a value of 1.8em.
Add the property background-color with a value of #336666.
Add the border-left and border-bottom properties with values of 1px #EBEBEB solid.
Add the property padding-bottom with a value of 3px.
A few modifications to the nav ul selector will fix some of the issues.
3. Make these changes to the nav a:link, nav a:visited selector :
Delete the border-bottom property.
Add the property float set to left.
Add the property border-right with a value of 1px #EBEBEB solid.
Change the width of the padding-bottom property from 5px to 3px.
Add the property width set to 22%.
Tweaking the link selector takes you most of the way there.
As shown in , the navigation has now taken shape. Floating each link to the left caused them to display in a single horizontal line.
Looks good—all that’s left to do are the rollovers.
4. Make these changes to the nav a:hover, nav a:active, nav a:focus selector :
Change the padding-bottom property from 3px to 0px.
Change the padding-right property from 2px to 3px.
The rollover selector needs some changes to the right and bottom padding.
Your menu should now look like , with button-like links spread evenly across the page under the header.
And here’s the finished product.
Tip
We gave the buttons a width of 22% to spread them out. You could also have done this by setting the width to a specific pixel size, but using a percentage makes them expand and contract with the rest of the layout. However, you’ll need to remember to lower that number if you want to add another navigation button.
Tip
We did the same calculation here as in the previous task to make sure that the bottom and right sides appear button-like. The bottom has 3 pixels of padding and no border when inactive, and no padding and a 3-pixel border when active. The right has 5 pixels of padding with a 1-pixel border when inactive, and 3 pixels of padding and a 3-pixel border when active.
Tip
You might be wondering if you could have just left out the declaration setting padding-bottom to 0px. In this case, no—you need that declaration of zero pixels of padding to explicitly override the three pixels of padding set in the previous step. If you left out the declaration, the browser would use the inherited padding, throwing off your button layout.