Using the Liquid CSS Layouts in Dreamweaver CS4

This chapter is from the book

Mastering CSS with Dreamweaver CS4

Learn More Buy

This chapter is from the book

This chapter is from the book 

Mastering CSS with Dreamweaver CS4

Learn More Buy

Creating the Horizontal Navigation Bar

Back in the old days, a horizontal navigation bar like the one in our comp would be created entirely with images. If we wanted to add functionality to show a hover state or which page a user was currently on, we'd use JavaScript. Using CSS, however, is much more lightweight and accessible. You can simply use text within a list to get the same image-like look.

The horizontal navigation is composed of a gradated orange horizontal bar. The designer used two single lines at the top and bottom of the bar to make it appear to have more depth. We'll discuss in a moment how the look will be re-created with CSS, but first, we'll build the semantic, XHTML structure for our navigation.

Figure 4.12 The horizontal navigation at 400%—notice the top and bottom lines.

Our header div visually matches the comp. Since we used margins on the image for proper spacing, we can add an unordered list of links after the image. The list doesn't need a class or ID or even to be housed within a separate div. Keeping it within the header lets us use a descendant selector to target only the unordered list we'll be styling as our horizontal navigation. We won't affect any of the other lists within the document as long as all our rules that pertain to the horizontal navigation begin with #header.

1. Place your cursor immediately after the logo image and tap the Enter key.

2. Type:

   • Regional Living
   • Regional Business
   • Regional Chamber

3. Select all three entries and click the Unordered List button in the Properties inspector.

   We are not yet sure what page our navigation will actually go to, but we want to style them as links now; using a pound sign or hash mark (#) in the link field will make them display as if they were links.

   Our list looks like this in Code view:

   <ul>
    <li><a href="#">Regional Living</a></li>
    <li><a href="#">Regional Business</a></li>
    <li><a href="#">Regional Chamber</a></li>
   </ul>

   When we pressed Enter to move to the next line after the image, Dreamweaver wrapped the image in a <p> element. Since the <p> element is unnecessary in our semantic markup, we'll need to remove it.

   

   Figure 4.13 The semantically structured list of links.

4. Click to select the logo on the page, and on the tag selector, right-click on the <p> tag surrounding it and choose Remove Tag.

   Clean, simple, and straightforward, right?

Styling the Menu Container

In the world of menus, or any element for that matter, it's always better to allow an increase or decrease in size to happen organically. This allows a user with his or her browser's default set to a different font size to comfortably view the element. In the case of the menu, we could slice the orange bar from top to bottom and assign a height. But if the user's text was larger, the links within the menu could spread outside the orange bar, creating an unsightly mess. There is a creative way to get around this by including the top two lines with the overall image slice and using an orange background color for the rest. This creates a seamless transition between the image and the color. The bottom two lines are then created with CSS.

In your comp, slice from the very top edge of the orange bar down to the area where the gradation ends. We sliced nearly down to, but didn't include, the bottom two lines. Due to the gradient, this should be exported as a jpg. Name it nav_bar_back.jpg.

As we mentioned before, we like to keep our code clean, semantic, and as small as possible. For this reason, the container for our menu is actually the ul element itself. Why add an extra container, like a div, when you don't have to? The ul will have two other descendants contained within it and both give us styling hooks: the li element and the a element. Each of these will be given declarations that will, in the end, duplicate the look the designer wanted with no JavaScript or images within the XHTML.

Remember that previously we created an element selector that removed the margin, padding, and list markers for all ul elements in the site. Those values will cascade and be applied to this list in the header. Let's start the transition to a navigation bar look. This will require the background image we sliced.

1. Create a selector called #header ul.

   As we mentioned before, the principle behind creating this navigation bar so that it can adjust to the user's font size is to not limit the height. Remember we only sliced the image with the top two lines included? We'll set that background image to repeat on the x axis (across the page) and we'll use the orange color our graphic ends with as the background color. Wherever the repeating graphic ends, the orange that matches will show through seamlessly. We sampled the color using the techniques we discussed earlier and came up with #FFAD00.

2. For the Background color use #FFAD00. Navigate to the nav_bar_back.jpg and set the Background repeat to repeat-x.

Our rule now looks like this:

#header ul {
  background: #FFAD00 url(images/nav_bar_back.jpg) repeat-x;
}

Figure 4.14 The color runs all the way across, but it's too tall!

The color is now completely enveloping the li elements. But they're still stacked up like a regular list.

Choosing Our Horizontal Method

There are two ways to make list items display horizontally—setting their display to inline or floating them. We'll outline the general constraints of each. What you choose when creating your own menus will depend on the type of styling you need to create.

Inline

When using inline formatting for your menu, the list items are laid out horizontally, one after the other from the top of their containing element. We can only set their horizontal margin, padding, and borders. Vertical margin, padding, and borders will be ignored. A width property will not be respected. Instead, the list item will be as wide as the text it encloses plus any side padding. It will be held away from other list items with side margin. A large line-height (200-300%) can be used to create vertical height on the menu item. This is a simpler menu to use, but it has its limitations.

Floated

When using floats to horizontally place the list items, they retain their block display. You may remember that a block-level element takes up 100% of the width of the parent element. However, when we float an element, the browser will shrink the float as small as it can and they will line up within the parent. Even though they're originally shruken down around their text, much like using the inline element, there is a greater number of properties that can be applied to them. Both vertical and horizontal margins, padding, and borders will be respected. A width can be set if desired. The text-align property can be set to the right or middle.

Using a floated menu can be slightly more complicated due to floating and clearing issues. Still, overall it's a more flexible method and thus more commonly used. Our menu in this comp isn't very complicated. We could likely use the inline method with some line-height and make it work nicely. However, for reasons of illustration and because you'll likely find this technique more useful, we'll use the floated method here.

1. Add a rule called #header li and float the list elements to the left. Adjust the font-size to match the comp by setting it to 110%.

   #header li {
    float: left;
    font-size: 110%;
   }

Figure 4.15 Wow! What in the world just happened to our page?

This is one of those little float gotchas we talked about in Chapter 3. Now that the list elements are floated, the ul doesn't "see" them, and so it's not containing them. The list elements interact with each other, so they're not taken completely out of the flow of the document as they would be if they were absolutely positioned, but the container is unaware of their presence. This means the background color and image on our ul element no longer shows since the element believes there's nothing inside it. You'll also notice that the floats (the document's columns) that follow them in the flow of the document have moved up to the same line where the floated list items end. They believe there's room for them there and quite frankly, there is, but that's not where we want them.

We could use a clearing element (as we discussed in Chapter 3) to force the container to "see" the floated elements within, or we could float the parent ul and give it 100% width since a float will contain child floats. In this simple case, though, we'll use a quick little remedy that won't require that we use a clearing element at all (yet another float clearing method for you to add to your arsenal). We'll add the overflow property with an auto value to the float's container. This causes the parent to expand and contain all the child floats. Overflow with the hidden value will work as well.

2. Add the overflow: auto declaration to the ul rule in the header and see what effect it has.

   #header ul {
    background: #FFAD00 url(images/nav_bar_back.jpg)
   repeat-x;
    overflow: auto;
   }

Figure 4.16 Our floated list items are now contained in the ul, but we still don't see the background color.

Don't panic. There's nothing wrong with your code. What you're seeing is one of those rare occasions where Dreamweaver's Design view simply doesn't render the property correctly. That used to be a real pain, but these days, we have a new tool to fight the rendering bugs—Live View.

3. Click the Live View button on your toolbar and take a look at the page.

Figure 4.17 We still have work to do, but in Live View we can see our background color.

Styling the Anchors as Buttons

Now that the navigation bar runs the full width of the page, we can complete the look our designer created. There are a few things to be aware of to make your links act like buttons and to avoid creepy, crawling bugs.

In menus, if you want the link to act like a button in Internet Explorer—activated by the mouse for its entire height and width, not only on the text itself—you'll need to add the display:block declaration to the rule for the a elements. Changing the a element to block display also allows us more styling control. We can place the padding on the link that then expands the shrink-wrapping float.

Right now, the links are all running together and that's certainly not the plan. There's a possible bug in IE that, with a little wise planning, we can completely avoid. It's called the doubled float margin bug and is caused by using a margin on the same side the element floats toward. We'll avoid using a margin by using padding instead.

Now, the amount of padding required is where the rocket science enters in. How do we determine the padding values to use for our a element? We could get out our ruler and measure the exact spacing, making allowances for font sizing and such—and if you have an advanced mathematics degree from Stanford or MIT this might be a choice. But we find that guessing at it works just as well. After all, we're using a method that will allow the text to expand if it's necessary for our user, so simply coming close to what our designer had in mind is what matters.

Our first guess is 10px, which, of course adds 10 pixels of padding to all sides of the element. In viewing our page in Live View and then comparing it to the comp, 10px seems to be slightly too tall and doesn't add enough space between each link. Using 8px for the top and bottom and 12px for the left and right sides does the trick in our eyes.

1. Create a new rule called #header li a. In the Block category, choose block from the Display values. In the Box category, set the top and bottom padding to 8px and the left and right to 12px. Finally let's remove the underlines from the links in the Type category.

   All links in our page, both menu and text, will be white, so we'll go ahead and create that rule globally. For a brief moment, until we place the background colors on our divs, any links in the page will appear to disappear. They'll be back in a bit.

   So we can properly view the menu, we'll stay in Live View while we work on it. And yes, Live View will allow us to create new CSS rules.

2. Create an element selector for the a element. Simply give it a white color.

   The new selectors should look like this:

   #header li a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
   }
   a {
    color: #FFF;
   }

Figure 4.18 It's starting to shape up nicely!

Putting the Final Tweaks on the Horizontal Navigation

Let's move to the final details of our navigation. The alignment in our navigation should match the logo above. You may remember that was 40px from the left. We'll need to subtract the 12px of padding on the left of our links from the total amount needed. Grabbing a wandering fourth grader, we quickly figure out that 28px of left padding on the ul will be needed to hold the links away from the edge of our document 40px.

You'll also remember from the comp that we need two subtle lines on the bottom of the navigation bar. You can't put two borders on an element. However, we have two elements at our disposal—the ul and the header div it is within—so we'll get creative and use both.

1. The first border, the darker purple (#575691) will go on the inner element—the ul. The second border, the light purple (#9290BF) will be placed as a bottom border on the header.

2. Our adjusted code looks like this:

   #header {
    background: #FFF url(images/logo_background.gif)
   no-repeat right;
    border-bottom: #9290BF 1px solid;
   }
   #header ul {
    padding: 0 0 0 28px;
    background: #FFAD00 url(images/nav_bar_back.jpg)
   repeat-x;
    overflow: auto;
    border-bottom: #575691 1px solid;
   }

Preview your page in a browser this time (Firefox or Safari—don't go to IE yet). This will allow you to increase the size of the text to see the effect. No matter how large the text gets, as the horizontal navigation grows vertically, it's a seamless transition—from background graphic, to background color to the two borders. It's as if the artist's original vision was able to stretch. This is the beauty of CSS!

Figure 4.19 Even with giant text, the navigation doesn't fall apart!

Creating the Hover and Focus States

Now that our menu is all set, let's create a hover state for the links there. Since the navigation bar is orange with white text, a good hover indication color would be the deep blue we used for our page background. It's dark enough to give good contrast but still blend with the page.

Since we want to allow people who navigate in a variety of different ways the same visual indication of where their focus is, we'll use more than just the typical :hover pseudo-class. The :hover pseudo-class works for a user navigating with a mouse. But what about the person using keyboard navigation? For them to see the same change in color when a link has focus, we'll need to use the :focus pseudo-class. But wait, using those two would be too simple. For some reason, Microsoft decided to use the :active pseudo-class for keyboard navigation instead (most other browsers use :active as you're activating or clicking the link).

• Create a grouped list of selectors for this rule. It looks like this:

  #header li a:hover, #header li a:active, #header li
  a:focus {
   color: #1B1A52;
  }

  The above rule selects a link with focus that is a child of a list element that is within the header div. All three selectors are there, separated by commas, so the same color is applied and indicates focus with any method of surfing.

  In Live Preview, hover over the links in the menu to be sure your hover state works.

  

  Figure 4.20 The middle button shows the hover/focus state for our button.

  In order to work properly, the hover, active, focus order must be honored. Be sure not to put a comma after the last selector in a list since that will cause the rule to fail.

Current Page Indicator (or You Are Here)

A common way to show a user what page or section of a site he or she is on is by placing a class on the link you want to indicate. In that scenario, each XHTML page has a class on a different menu item. But what if we're using server-side includes or Dreamweaver templates where the navigation menu is in a locked region? We couldn't move the class to a different menu item on each page (unless we did it programmatically).

CSS saves us. (Of course!) With a unique ID on each list item, we can easily create a descendant selector that controls our page indicator and never touch the actual menu again. We'll add a class to the body element that matches the ID on the menu.

We discussed earlier that it was a best practice not to use class and ID names that were specific to the placement or look of the element they're placed on. Well, rules are made to be broken. Since it will actually help us track the proper page later, now is the time to break this rule.

Using the same name for both the body class and the list item ID keeps us from getting confused later and makes it easy to write the selectors needed. For example if the Regional Living list item is given an ID of living—we'll add a class of the same name on the body element. There's no problem having a class and ID of the same name—as long as it doesn't confuse you. Lest you get completely confused now, let's just do it!

1. Choose Source Code on the Related Files toolbar. In the actual code, place your cursor into the first link of the menu—Regional Living.

   We're doing this in the code because, in Live View, if we click into the menu item, we see the hover state and can't actually select the link so that we can access it on the tag selector.

2. On the tag selector, right-click the <li> and select Quick Tag Editor.

   A dialog appears that lets you set the ID and name. (You could, of course, also type this directly in the code if you prefer.) The Quick Tag Editor works very much like Code view in that it uses code completion.

   Since all of the links here begin with the word Regional, we'll drop the word Regional on each and simply use the second word to identify the link.

3. In the ID field, type living.

4. Continue in the same way with the next two list items, naming them business and chamber respectively.

   <ul>
    <li id="living"><a href="#">Regional Living</a></li>
    <li id="business"><a href="#">Regional Business</a></li>
    <li id="chamber"><a href="#">Regional Chamber</a></li>
   </ul>

   Now, with the IDs placed on the list elements we can write a selector to target them.

5. Create a descendant selector to target any link descending from an item with an ID of #living that is a descendant of an element with a class of .living.

   .living #living a

6. In the Type category, set the color to #1B1A52 and set the font-weight to bold.

7. We'll also place the .living class on the body element.

   The current page indicator rule and the XHTML code for the body element look like this:

   .living #living a {
    color: #1B1A52;
    font-weight: bold;
   }
   <body class="living">

We'll create a grouped list of selectors for each page, or section, for which we'll need an indicator. In the case of our horizontal navigation, we'll create three. To activate these, we place the appropriate class on each page's body element.

.living #living a, .business #business a, .chamber
#chamber a {
 color: #1B1A52;
 font-weight: bold;
}

Figure 4.21 Users of the site will have a visual indication of which page or section they're in.

Clean Up One More Time

This would be a great time to do another round of CSS cleanup.

Switch the CSS Styles panel into All view again and organize your rules as we discussed earlier. When complete, go back to the Current view.

We moved all the rules beginning with #header to the #header section of the page. Though it's certainly a matter of preference, we placed the grouped selector for the current page indicator there—since it's related to the menu in that section. Finally, we moved the a element selector up under the body selector.

Figure 4.22 Our rules before and after their organization.

Using Design-time Style Sheets

It's starting to look pretty good in Live View, huh? You remember we had a little issue with the menu in Design view (the background doesn't show). Now that we've styled our links with the white color they'll need for the navigation bar, switching back to Design view (to work on the HTML) makes the links invisible. That's not very useful. We've got a tool in Dreamweaver we can use to make the links show again. The tool we'll use is a Design-time Style Sheet. It won't make the color on the navigation come back, but it will make the links visible.

For those unfamiliar with Design-time Style Sheets (DTSS), they're a separate CSS document, attached within Dreamweaver, and only rendered within Dreamweaver. They affect nothing on the server or in a browser. Though Dreamweaver's rendering has gotten substantially better with each release, it still occasionally has odd moments. Attaching a DTSS allows you to correct the rendering of your page, within the Dreamweaver design environment, without affecting your browser view. Let's do it:

1. Create a new CSS document using File > New > CSS or by right-clicking inside the files panel and choosing New File.

   We've named our document dtss.css so we don't forget what it is later. Inside this document, we simply need to give our anchor element a dark color to show up on the white background.

2. Create a rule just like our menu's link rule, #header li a, and make it black (#000). Add the !important declaration.

   Here's what we placed in our dtss.css document:

   #header li a {
   color: #000 !important;
   }

   The !important declaration tells DW to always render this rule within DW: otherwise, because the rule has the same specificity as the one in your regular style sheet, the styles will conflict.

   Alternatively, another property that will show the background color and fix Dreamweaver's Design view, is overflow:hidden; Use that in the Design-time Style Sheet instead of the color and don't forget the !important declaration.

3. To attach this style sheet, click on the new Design-time icon on the Style Rendering toolbar or use the contextual menu in the top right-hand corner of the CSS Styles panel and choose Design-time.

   The Design-time Style Sheets dialog will open.

   The specs from the W3C say that an author's style sheet always overrides a user's style sheet. However, the !important declaration takes precedence over a normal declaration. If both style sheets contain an !important declaration, then the user's declaration wins out. This is a change from CSS1 where the author's won.

   

   Figure 4.23 The new Design-time icon on the Style Rendering toolbar.

4. Select the + sign in the "Show only at design time" drop-down list and navigate to dtss.css.

   You'll notice that you can also hide an entire style sheet in this same dialog—though this is usually only necessary in the rare occasion of extremely complex pages that Dreamweaver just can't handle. (And we haven't seen those in a long while.)

5. Click OK.

   The words are now visible in the links. This keeps your navigation area, within Dreamweaver, more like the final browser or Live View version.

Figure 4.24 Our modified navigation bar in Dreamweaver.