Pseudo problems

This page is from 2009... We now have Dreamweaver CS5 in the lab, so the discussion of CS3 and CS4 here is strictly a historical cobweb. The basic CSS styling for the two menus is still valid. However, Dreamweaver's own layouts already include fully-coded menus, which makes the "pseudo class" anchor coding much simpler.

Past users of Dreamweaver CS3 will discover that the "pseudo class" settings for anchor tags are handled a little differently in CS4, which we have in our lab in 2009. If you're switching between the two systems, these notes may help. Or you may want to use them to explore making menus like the one on the right and the one at the bottom of this page -- just CSS, no images, scripting or "Spry" widgets required.

• In the past, I've pointed to this free video about Creating anchor tag pseudo classes in DW CS3.
• It's still very good at explaining the basic concepts, but Dreamweaver CS4 has changed the user interface enough to be confusing. The video makes reference to an "advanced" menu item that is no longer part of the CS4 menus.

Stylish anchors

• When you select an anchor tag in Dreamweaver, the "New CSS Style" dialog box presents you with its address as a "Compound" selector ending with the "a" tag, but it doesn't make it obvious where to find the "pseudo classes" that make rollover menus possible in CSS .
• Caution: If you choose states like "hover" and "active" from that compound-selector drop-down menu, they will replace your whole compound selector -- and affect every anchor tag on your page, which may not be what you want.
• Important: Always watch the top line of the "CSS Rule Definition" dialogue box to make sure you are editing what you think you are editing.
• If you are using a Dreamweaver layout like the one I used for this page, the whole compound selector can look complicated. For the menu items in the top corner of this page, mine looks like this:
  .oneColElsCtr #container #mainContent #menu1 ul li a
1. Meaning of that last line, from right to left: This style change will affect ONLY <a> anchor tags that appear as <li> items in this <ul> list, which is within the "menu1" division of the page. The menu is inside the "mainContent" division of the "container" division of the body of this page.
2. The whole body of the page has a "class" name of ".oneColElsCtr". That is not an HTML or CSS requirement. Dreamweaver gives distinctive class names to all of its layouts to remind you of the original design -- in this case, one column, elastic and centered. (To streamline your code, it's OK to delete those layout-name class tags. I didn't on this example.)
• To add the different states of the anchor tag, add a colon and the "pseudoclass" or "state" name at the end of that compound selector, like this:
  .oneColElsCtr #container #mainContent #menu1 ul li a:hover
  then click OK to set the style rules with Dreamweaver's many menu panels.
  • Use the compound selector ending in "a" by itself for style settings you want for all states of the link. Those styles usually include font family, color and size. Many menus also remove the underlining that anchor links get by default.
  • Use separate "a:link" and "a:visited" selectors to set the color of unvisited and visited links. If you don't you'll get the browser defaults: Blue for unvisted and maroon for visited.
  • Add "a:hover", "a:active" styles to change background and foreground colors when you mouse over or click on a link, or to put back that underlining when someone hovers over a link. You can also transform text to all uppercase, add a background image, or experiment with other effects.
• See the menu block at the top right for an example. For testing purposes, most of the links are all coded to go nowhere, so you can see how the style changes when you click on them.

Turning lists into menus

• The whole menu at the top of this page is a "UL" list, within a division called "menu1". The menu at the bottom is another UL list, in a division called "menu2".
• That menu1 "div" is floated to the right of whatever text comes after it on the page. The list items are set to a display style of "block" (rather than "inline) to make them stack like blocks.
• A "UL" list usually has bullets, but I've removed them using the #menu1 ul selector in CSS, by adding a setting of list-style-type: none;
• Because most of the other lists on this page are not in the #menu1 div, they still have bullets.
• At the bottom of the page, I've made a copy of the same menu, renamed it #menu2 and changed the CSS to remove the left float.
• I added "text-align: center" to the CSS for #menu2 div, so my whole "ul" section now floats to the center of the page.
• I also changed it from "block" style to "inline" to make it horizontal.
• I changed a couple of the "hover" characteristics too...
• I also demonstrated in the CSS that you don't really need the detailed "compound selector" address. The item is an "id" selector (marked with a "#"), and there should be only one of each "id" on a page. That makes the CSS section for #menu2 much simpler than #menu1. If you look at the code, you will see a simple #menu2 ul li a:hover instead of the Dreamweaver-inserted
  .oneColElsCtr #container #mainContent #menu1 ul li a:hover
• Final point: Why restyle a bullet list to make a menu? Because someone viewing the page without any styling will still see a bulleted list, which is a reasonable way to view a menu. Use the "View/Page Style/No Style" menu item in Firefox to preview this page with and without styles. Compare a "No Style" view of my home page, where the menus are just styled anchor tags. Making a menu out of a list is much neater.