What's new in the Dreamweaver CS5 CSS layouts

In this article, I will concentrate on the new and improved CSS layouts in Dreamweaver CS5—a feature that I was involved in creating.

If you're completely new to CSS and want to understand the basics before reading this article, have a look at Jon Varese's article, Understanding Cascading Style Sheets, and the article I wrote with Adobe's Principal Evangelist, Greg Rewis, called Best practices with CSS in Dreamweaver CS4. (Though there have been numerous enhancements, the methodology of creating CSS hasn't fundamentally changed in Dreamweaver CS5.) Throughout the article, I will provide links to other Developer Connection articles for extra depth on specific topics.

I'd also like to mention how excited I am about the new features in Dreamweaver CS5. After using the beta in my daily work for months and months, I can personally attest to the time savers and productivity enhancements it contains. You can read about the other new features in Introducing Dreamweaver CS5 by Dreamweaver product manager Scott Fegette, or watch the new demo at Adobe TV.

This article covers the following topics:

• Introducing the new layouts
• A quick overview of a CSS layout
• Inspecting Design view
• Inspecting Code view

Introducing the new layouts

Before diving in, a little background on the new layouts will help set the stage.

Why did Adobe create new layouts?

The original CSS Layouts were included in Dreamweaver CS3. In web years, that's a long time ago and recommended best practices change with time. After writing two books (with Greg Rewis) that used those layouts to teach CSS—and while Adobe had conversations with customers about them—the consensus was that they should be simplified and brought up to current best practices. As I always like to say, the beauty of CSS is that there are so many ways to do it. And the frustration of CSS is that there are so many ways to do it. This article explains the choices made in updating and rewriting the CSS layouts as well as how to access and use them.

Where are these layouts?

As before, you can access the CSS Layouts in one of two ways:

• Choose File > New and select the Blank Page pane of the New Document dialog box (see Figure 1).
• On the Dreamweaver Welcome Screen, select Create New column and click the More link at the bottom.

Either method will show you all the choices, beginning with a blank HTML document and going through the one, two, and three column choices, in that order. The choices are grouped by layout type.

Fixed and liquid layouts

If you used the CSS layouts in previous versions of Dreamweaver, you'll notice there are about half the number of layouts available. In talking to Dreamweaver users, Adobe found that less is more. The two types of layouts people were using most often were the fixed and liquid style layouts. Thus, only those two types were updated. If you find you really preferred working with the old style or would prefer to use elastic or hybrid CSS layouts, all those layouts are available as an extension at the Dreamweaver Exchange. You can install them and keep working just as you always have.

As in the past, on the right of the New Document dialog box, you'll see a small image (with a description) that represents the type of layout. These images contain one of two icons and denote what kind of width is being used for the columns within the layout. The lock icon indicates that the column's value is written in a fixed pixel size (called fixed). The spring icon indicates that the column's value is written using percentage-based sizing (called liquid).

In a fixed layout, the values for the overall width, as well as any columns within, are written using pixel units (see Figure 2). The layout is centered in the user's browser window. Fixed layouts are provided in earth tones to help you visually identify them.

In a liquid layout, the values for the overall width, as well as any columns within, are written using percentages (see Figure 3). The percentage is calculated from the size of the user's browser window. This layout is created using a blue palette.

After you select the layout you'd like to start your web page with, you have several other choices to make in the bottom right of the dialog box.

First, you need to choose your doctype—HTML, XHTML, or HTML5.

You'll also need to choose where you'd like the CSS placed. Choosing Add to Head will place the CSS selectors into the head of your document to keep it simple while you're developing your page. Later, you can use the CSS management features to move it to an external file. Choosing Create New File will place the CSS selectors into a new CSS file linked to your X/HTML document. This will show up in the related files bar of your document. Finally, choosing Link to Existing File will allow you to use the link icon to point Dreamweaver to an existing CSS document. Remember though, the selector names in the CSS file you point to will need to match the names within the X/HTML portion of the CSS layout in order for them to have any effect.

A quick overview of a CSS layout

To get a feel for the new layouts, a good first step is to create one and examine it.

Exploring a fixed layout

Follow these steps to create a document with a two-column fixed layout:

1. In Dreamweaver, choose File > New.
2. In the New Document dialog box, select the 2 column fixed, left sidebar, header and footer layout.
3. Select the XHTML 1.0 Transitional as the DocType.
4. Select Add to Head from the Layout CSS choices.
5. Click Create.

In Design view, you'll notice a few changes. The grey color scheme, which was used with the older layouts, has been replaced by earth tones (for the fixed layouts) to give you a visual cue between the layout styles—and, well, because I was bored with the grey. They're still not meant to be beautiful though. They are all simply structural—your job is to add the glamour! There's an image placeholder in the header where a logo would typically go and a new starter menu in the side column.

Switch to Code view and you'll see that, as before, the CSS is heavily commented, with notes on individual properties as well as a large block of information describing the basic structure of the layout. You can remove these comments when you're ready by using David Powers' free extension (scroll down to Stored Query To Remove CSS Comments to download it). If you add your own comments during development and want them for future reference, make a duplicate copy of your CSS and remove the comments from the version you place on your server. If you're an expert and prefer to never have the comments, there is an extension with non-commented CSS layouts available at the Dreamweaver Exchange.

Note: If you prefer a different style of CSS formatting (for example, if you like to put each CSS selector on a single line before uploading), you can change the CSS formatting in Dreamweaver. Choose Edit > Preferences, then select Code Format and click CSS to set your preferred format. Then, while you have focus in your CSS document, choose Commands > Apply Source Formatting.

Simple selectors

To make the CSS simpler and more succinct, the class on the body element that gave previous versions the long descendent selector names (for example, .twoColFixLtHdr ) was removed. The IDs on the structural divs have been replaced with classes. While you may agree or disagree with this approach, let me just say that this does not mean IDs are evil. It simply means you can reuse the divs as you'd like. Perhaps you want to stack two or three separate sidebars on top of each other instead of nesting extra divs in a single sidebar. Remember, you can have a class and an ID (for example, <div class="sidebar1" id="foo"> ) on a single element. An element can also have multiple classes (for example, <div class="sidebar1 foo1 foo2"> ). This new class naming structure gives you more flexibility.

Inspecting Design view

Next, return to Design view and take a closer look and some of the updates. Probably the most noticeable change in Design view is that the new CSS layouts include no Lorem Ipsum placeholder text. Believe it or not, some users didn't discover—or at least read—many of the instructions that were included in the previous versions of the layouts. Granted, these instructions had to be read in Code view and some Dreamweaver users don't pay as much attention to the code as they should. In discussing the proposed CSS changes, the team felt the user would be better served with additional instructions outside what could be placed in the comments. The sample text is always replaced so it's an effective way to get the attention of those who rarely look at code.

Clearing methods

One of the major changes to the layouts involves the clearing method specific to the layout which you have chosen. If you just thought, "What in the world is clearing?", the short answer is that clearing is a method used to let a parent container know where the floated content within it ends—so it can completely contain them. In the previous layouts, a combination of static and floated elements were used, however in these new layouts, all divs creating the columns are floated. This means that unless you use a clearing method, the div.container will not show its styling all the way around the floated child divs. (You can read more about floating in my article about the original CSS Layouts in the section called Clearing Floats in the #mainContent div.)

Using clear:both

The simplest way to clear the floats in a container is by using an element that follows them, such as a footer. If you're using a footer that is within the container, you can safely use a clear:both; declaration within the .footer rule, and no matter how wide the footer is, it will follow all your columns. It will also force the div.container to contain everything within it. Internet Explorer 6 has a little quirk requiring position:relative; to give the footer the proprietary hasLayout property it needs to work like other browsers. (I won't take the space here to explain the hasLayout property in detail. It's complex and has been removed in Internet Explorer 8 and above. If you are really concerned about Internet Explorer 6 and aren't familiar with hasLayout , then you should take some time to learn more about the hasLayout property from one of the many online articles and posts written about it.)

If you'd like to see what happens if the clearing property isn't used, one of the new features in Dreamweaver CS5 will quickly show you; follow these steps:

1. Click anywhere in the footer.
2. On the Tag selector at the bottom of your document, select <div.footer> .
3. In the CSS Styles panel, hover to the left of the position property and you'll notice a grey icon appears.
4. Click the icon (it will turn red) to disable the property.
5. In the same way, disable the clear property.

The page doesn't look very nice now does it? For further proof of the necessity of clearing, remove a large chunk of the text in the main .content div so that it has substantially less than the sidebar. Notice how the sidebar now protrudes outside the .container . Because the header and footer are the only elements in the container that are not floated, they also are the only elements that the container can see.

Using overflow: hidden

Not all designs have a footer, or at least a footer that's within the .container . In the CSS layouts that don't have a header and footer, the chosen clearing method is placing the declaration overflow: hidden; on the .container . Using the overflow property with either the hidden or auto values will also force the .container to contain its floated content. This method is the one I most commonly use when creating grid-like structures. If a footer is added to this type of layout, and it's within the .container , the overflow clearing method will fail. You will need to switch back to the previous method ( clear:both ).

Follow these steps to see the effect of overflow:hidden :

1. Create a new document using any layout without headers and footers.
2. Click anywhere in the document.
3. On the Tag selector, choose the <div.container> .
4. In the CSS Styles panel, disable the overflow:hidden property.

As before, disabling the clearing method causes the white background of the .container to disappear. Also, as noted in the layout, if you have a large element that protrudes outside the .container , it will appear to be cut off. Using overflow: hidden means just that—it will hide anything that flows outside (or is larger than) the .container . For the same reason, you also won't be able to use negative margins or absolute positioning with negative values to pull elements outside the .container . The portions outside the .container will simply disappear.

Using the .clearfloat class

Both types of CSS layouts, the ones with and without headers and footers, describe a .clearfloat class that exists as fallback if the default clearing method doesn't work in your layout. This is the method used in the old CSS layouts and requires that you add a little bit of markup to your page. The actual CSS class is already written for you.

Directly after the last floated column, but before the .footer if one exists or the close of the .container if it doesn't, add either <br class="clearfloat" /> or <div class="clearfloat"></div> . This element will have the same effect as the previous methods, allowing the .container to understand where the floated elements end so it can completely contain them.

Logo replacement

To make it easier for new users to achieve success with these layouts, they now include instructions for adding a logo to the page. Due to the way some browsers treat images with empty source ( src ) attributes (which is used as the image placeholder), an inline style ( display:block ) had to be used so that the placeholder doesn't collapse in those browsers on preview. It may be easiest to simply delete the image placeholder and then insert your logo image though instructions are given in the CSS layout for replacing it with the Property inspector. It's a best practice to link the logo to your site's home page since research shows many users expect that behavior; therefore a dead link ( # ) has been created, which should be either modified or replaced to link to your home page.

Internet Explorer Conditional Comments

Create a new document using the three column liquid layout with header and footer. The first difference you'll notice is the blue color palette. Outside that, much of the instructions and comments are the same. The biggest difference is that the liquid layouts contain Internet Explorer Conditional Comments (IECC), which are proprietary to, and only seen by, Internet Explorer. Other browsers simply view them as comments (as does Dreamweaver since it doesn't render them or show them in the CSS Styles panel). In liquid layouts, they're in a style block in the head of the document. They allow you to serve different styles to Internet Explorer to fix its many quirks. When you're done with development though, it's best to move the style block into a linked CSS file within the IECC for easier maintenance.

Here is an example of linking to an IE-specific CSS document in your IECC:

The fixed layouts were created without an IECC, but in the liquid layouts it couldn't be avoided. This is partially due to the differences in how browsers treat rounding errors, as well as Internet Explorer's proprietary hasLayout property mentioned earlier. You can read about this in more detail in the text of the liquid CSS layouts themselves.

Full-height backgrounds on the columns

The CSS layouts contain information about the default behavior of backgrounds in CSS. But what if you want the column color or pattern to go all the way to the bottom of the page no matter which column is tallest? The technique most commonly used to create this effect is called faux columns. When you create faux columns, you simply place a graphic on the .container instead of the column itself. This graphic, a 5–10px tall slice that can be repeated on the y-axis of the .container, creates the look of columns that span the full height of your layout. You can read more about this technique in the Enter Faux Columns section of Creating a simple three-column design, which I wrote for the Developer Connection last year, and in the Creating Equal Length Columns section of Understanding the new Dreamweaver CS3 CSS Layouts.

The linked article talks about adding faux columns to a fixed-width layout. If you're using one of the liquid styles it might seem impossible to use faux columns because you would need a way to anticipate the actual width of the column in pixels. There's actually a great technique to create the same effect using percentages of a graphic. Greg Rewis and I wrote about it in chapter 4 of our book, Mastering CSS with Dreamweaver CS4 and it's available on the Developer Connection for download.

Footer

You'll see a note in each layout that contains footers stating position:relative has been added to the .footer rule in order to tame Internet Explorer 6. It has no effect on other browsers; however, if there is an issue in your layout with this property, you can move it to an IECC shown only to Internet Explorer 6.

Sidebar navigation

On the document toolbar, click Live View. The previous layouts did not include starter navigation. However, since navigation is a common element in every site, you can save time by using the quick starter navigation list here. Notice how hovering over any of the menu items changes its styling. If you intend to use side navigation on your site, you can simply change this styling to match your design. If your design requires a top horizontal navigation style instead, you can move the ul.nav into the space your design requires—either in the header next to the logo or between the .header and .sidebar1 divs. Then change the CSS to create a horizontal menu instead of vertical.

The markup is very clean and simple, just an unordered list with a class:

If you will be using dropdown or flyout menus, you may want to replace this with a Spry, jQuery, or other widget or menu-builder. The Spry menus are available from the Spry tab of the Insert bar within Dreamweaver. If you don't have something you commonly use, you can also find extensions at the Dreamweaver Exchange. If these require their own markup, you can remove the whole CSS style block for the included menus from the CSS code (they're commented). To find them, click anywhere in the menu. In the CSS Styles panel, right-click one of the ul.nav styles and click Go To Code. Remove the entire block of commented code.

Follow these steps to remove the HTML markup:

1. In Design view, click the menu.
2. Select the <ul.nav> on the Tag selector.
3. Press Delete.

Now you can easily add your own menus.

Inspecting Code view

Now that you've looked at the information in the Design view of the layouts, it's time to take a closer look at the code. Don't worry if that's not usually where you work, this will be an easy walkthrough. Start by creating a new document and select the three column, fixed width, with header and footer layout.

In Code view, you can see that the code begins by setting the basic styles for the body element. This ensures that even if browsers have differing default values, everyone starts on the same level playing field.

Element and tag selectors

The next group of selectors is marked with this comment:

These selectors are basic resets for these elements. None of them contain actual styling. You'll see that no colors or sizes are set for text elements. There are comments on these rules to remind you of their use.

The comma between each selector in the code above means that each element receives the CSS properties given in this rule—it's a form of shorthand called a grouped selector. It's a best practice to zero your margin and padding in lists due to differing browser defaults. Many times I also remove the list markers and then add custom list markers in specific areas of the page. If that's your plan, you can add list-style: none; to this rule.

Again, the properties in the rule above apply to all the grouped elements. I have removed the top margin from all these elements. This is due to something called margin collapse. Margin collapse is not a bug—believe it or not. The simple explanation is that when two elements have top or bottom margins that are touching, the larger of the two will take precedence and the other will collapse (in other words, it will be ignored). This is good and expected behavior. However, there's a little idiosyncrasy that you need to takeinto account. When an element with a margin is enclosed in another element (forexample, an h1 that is the first element in a containing div), themargin from the enclosed element can escape outside its containing element.This can create a space outside the parent div that can be baffling. There areseveral methods to keep this from happening:

• If the parent element has even 1 pixel of padding between its edge and the child element's margin, the child element's margin will be contained.
• If the parent element has a border between its edge and the child element's margin, the child element's margin will be contained.
• If the child element has the margin removed, it cannot escape. If space is needed where the margin was removed, many times it's possible to use padding in its place.

You'll also notice the left and right padding placed on this rule. In the new layouts, there's no padding within the divs themselves. This avoids having to deal with box model issues, especially the troubling differences in the Internet Explorer 5 box model. (Fortunately, there's little need to consider that browser any longer for most websites.), Placing the padding on the elements within the divs means that the width you give to a div is its actual width (unless you've added a border which will need to be considered in the math).

The rule above is one of the few descendant selectors. To translate, this rule selects any image that is within an anchor (link) element. In some browsers, putting a link on an image will produce an unsightly blue border around the image. This rule removes that border by setting the border property to none .

Styling for your site's links

The next section begins with the following comment:

Hopefully, this section is self-explanatory. However, I would like to point out one selector:

Many times people only create styles for the :hover pseudo class. That's great as long as your user is using a mouse. But if youruser is tabbing through the page, then your hover styles no longer show. Inaddition, some people use a CSS reset that removes the focus styles from the pagegiving them no visual indication of where their focus on the page is as theytab. By using :hover and :focus, people who tab through will seethe same style as people who are using a mouse. And :active is addedbecause Internet Explorer uses :active instead of :focus . Be sure to keepthem in the proper order. If you are not already employing these techniques inyour designs, you should be.

Fixed width container surrounding all other divs

The next section begins with:

In the new version of the layouts, the fixed width on the . container has been increased to 960px to accommodate today's larger monitors. This is the div you would place the previously mentioned faux column on if you choose to use that design method.

Columns for the layout

The next section of interest begins as follows:

There is a large block of text describing the column section of the CSS layouts. Please read through it for the structural information. Be aware that in this new set of layouts, all columns are floated (in the original layouts, the main content was margined area away from the side columns). This gives you more flexibility to change the source order if needed.

Space for lists in the .content area

Remember how the margin and padding in all the lists is set to zero? The grouped selector above is where you can add the specific spacing you want for the lists in your .content div.

Note: If you want to add a custom list marker (perhaps using a background image), you will need to create a new selector with only the .content ul portion of this grouped selector. If you add it to this entire rule, you'd have that custom list marker on your ordered lists as well—more than likely not what you want.

You should also be aware that if you add a Spry, jQuery, or other widget that contains an ordered or unordered list into the .content area, this rule may affect that widget (depending on the specificity of its selectors). For instance, a Spry Tabbed Panel widget uses an unordered list to create the tabbed area at the top.

By default there's no placement styling for the Spry tabs. So when the widget is placed in an empty page, the tabs line up with the left edge of the widget. The rule in the CSS layouts will cause the tabs to begin 40px from the left edge. If you prefer the left alignment, adding .content to the .TabbedPanelsTabGroup selector in SpryTabbedPanels.css will make the rule more specific and override the .content ul rule; for example:

Navigation list styles

This is the section that controls the navigation list. If you're going to use a pre-built widget or a Spry menu, feel free to remove this section. If you plan on modifying it, note that there is a background color with borders separating the list items (buttons) and a visual change when hover or focus are triggered.

Notice that a class of .nav was placed directly on the ul element, not on a div containing the unordered list. If you need the div for styling purposes, feel free to place a div around the ul , but otherwise, there's no need for it. You can easily style the ul as the container for your list items (buttons). No width was given to the ul.nav , which allows it to fill 100% of its parent element (the .sidebar1 div). The list items themselves have a border on the top and bottom, but actually placing a border at the top and bottom would double that border to 2px between buttons. For this reason, border-top was placed on the ul.nav to target only the first button and border-bottom was placed on each list item within.

Note: If you're still learning about selectors, you may wonder why the CSS for the menus is written as ul.nav while the descendant selector was written as .content ul . The selector .content ul selects any unordered list within the .content section. The selector ul.nav selects any unordered list on the page with a class of .nav placed on it.

The selector above the anchor element creates the button look. The parent ul.nav li merely contains the bottom border. Since an anchor (link) is an inline element, I've changed the display property to block so that it fills out the entire parent li . The background color is placed on the anchor so it can be changed on :hover and :focus . If you were only changing the text, and not the background, the background color could be placed on either the parent li or even the ul .

Note: The width merely makes Internet Explorer 6 behave—other browsers don't require it. Pay attention to the width though. The sidebar is 180px wide. The anchor is set to 160px. That's because the real width of any element is the width of the content (160px) plus the width of the padding (5px + 15px) plus the width of the borders (0px). So in this case, those three properties add up to the 180px area to fill.

Miscellaneous float and clear classes

This final area contains miscellaneous classes that can be used throughout your page as needed. If you need to float images or other elements left or right, you can use the .fltrt and .fltlft classes. The .clearfloat class is to use as an alternative clearing method fallback as discussed in the section above on clearing.

Differences in the liquid layouts

There are slight differences between the fixed and liquid layouts. Clearly, the widths of the overall .container and columns within are all defined in percentages, not pixels. Outside of the obvious, here are the other differences:

• .container: The .container is given a width of 80%. This is 80% of the width of the user's browser viewport (usable area). So the real width is determined by the size of your user's monitor and whether they maximize their browser width or not. In some cases, the width could get very wide and the resulting line length could be difficult to read. For that reason, there's a max-width of 1260px and a min-width of 780px. (These two properties do not work in IE6, but they do work in all other browsers.) Feel free to change the values if you prefer different content limitations. There's also a rule within the IECC to fix the rounding errors discussed previously (with further details given in the text of the page itself). That rule is:

• ul.nav a, ul.nav a:visited:– As you may recall from examining the fixed width navigation, width was given to the anchor for IE6. This was to make the entire button a clicking target, not just the words. But when using percentage sizing, adding pixel-based padding values will yield an unpredictable outcome. The good news is there's always more than one way to do things with CSS. And though a width will give IE the fix it needs, so will Microsoft's proprietary zoom property. Though other browsers simply ignore the zoom property, if you want your page to validate (always a great way to troubleshoot) you should place it in an IECC so that only IE sees it. So, in the IECC in the head of your document, you'll see:

Where to go from here

I hope you enjoyed a peek inside the workings of the new CSS layouts. The website I coded for the Adobe CS5 launch demo materials began in just this way—with a comp from the agency and a fixed width layout. In Live view, type http://www.local-mag.com/ in the Address box of the Browser Navigation toolbar to open the website in Dreamweaver CS5. This will enable you to examine all the related files within Dreamweaver (just remember to turn on Live Code to see the actual HTML markup).

The CSS layouts aren't just for beginners. Even if you are an experienced professional, they're a fast way to create a structure for a new page. In fact, there is rarely a project that I work on today that I don't begin with one of these layouts. Feel free to poke around under the hood to see just how easy it is to extend them as your design requires.

When you're done building your site, it's time to make sure all browsers are behaving. You can use Dreamweaver CS5 to send a specific state of your static page, your blog, or content management system directly to BrowserLab to compare between browsers. If you find trouble spots, the first step is to validate your page to be sure there isn't any user error you need to correct. Then you can use CSS enable/disable and CSS Inspect to help you troubleshoot within Dreamweaver and send the page back to BrowserLab as needed.

You should be aware that if you run the Check Browser Compatibility command in the liquid layouts, it will give you two warnings about min-width and max-width not being supported in all browsers. It will also give you a warning about an Extra Whitespace in List Links Bug. Since Dreamweaver sees IECCs as comments, it doesn't realize that the issue has been resolved with the zoom:1; declaration there.

If you'd like your pages to print nicely as well as display well on screen, I wrote an article, From screen to print: Creating a print CSS in Dreamweaver, which will walk you through the steps I take to create a clean, printable page that gives your user just the information they want to print. Happy coding!