Murphy's CSS

I could have called this post Murphy’s Dreamweaver, Murphy’s Code, many things.

Last night, I presented on Web Standards and Dreamweaver to the Chicago Creative Coalition. It was both a challenging yet educational experience. I’ve been using Dreamweaver for 8+ years. However, since I’m a coder, I primarily develop web content in code view. The audience for this presentation was creative folks, very few though who create web sites on a regular basis. My goal was to illustrate the importance of adhering to a web standards approach when designing for the web. The tool for choice in this case, was the Dreamweaver WYSIWYG environment. It, and a surprising effect while creating a horizontal menu, would prove to create that Murphy’s moment.

Here’s the design I was attempting to create.

Ecology 101 Webpage Mockup

Everything was proceeding as expected. However, once I began styling the navigation menu in the masthead area though, things headed south.

I likely would have been able to recover, if it weren’t for the fact that the order of the menu items had reversed. This threw me. Have you ever had 20 people looking over your shoulder (ok, actually sitting back viewing your work projected onto a screen)? I was flustered. And like on Family Fued, I decided to pass.

So this post is to answer the question, “What Happened?” I hope this draws closure for those attendees. I know it will permanently stamp this method in my mind.

What’s wrong with this picture

Here’s the way the header should look:

The Correct Masthead

Here’s what I was faced with:
The Incorrect Masthead
Besides the vertical gap, note the order of the menu items.

After some rest overnight, I revisited the code & styles between the two to resolve the issue.

Let’s take a look at the style, side-by side:

Correct Version Incorrect Version

#nav {
float: right;
width: 500px;
margin-top: 20px;
margin-bottom: 20px;
}

.twoColFixRtHdr #container #header #nav {
color: #FFFFFF;
float: right;
width: 400px;
}

Ok, so while we do have some differences, there’s no breaking code. However, the margins top & bottom likely accounts for the proper spacing above & below.

Updating the styles of the incorrect version now creates more space above and below. Let’s now take a look at the styles for the unordered list:

Correct Version Incorrect Version

.twoColFixRtHdr #container #header #nav ul {
margin: 0px;
padding: 0px;
text-align: right;
}


.twoColFixRtHdr #container #header #nav ul {
margin: 0px;
padding: 30px 0;
float: left;
list-style-type: none;
}

Ah ha! Now we start to see some major issues. First, style to create some space above & below is incorrectly applied to the unordered list (<ul>) as padding. We’ll remove that as we’ve already placed the spacing on the top & bottom margins of the nav div. More importantly, instead of styling the text to be right aligned, I floated the unordered list left, then remove the list style type. The latter should have been applied to the list item (<li>), not the unordered list (<ul>).

After making the adjustments, here’s how our menu looks now:
ecology101_04

Well, we’ve added back our list bullets, that’s all. Let’s visit the list item styling:

Correct Version Incorrect Version

.twoColFixRtHdr #container #header #nav li {
display: inline;
list-style-type: none;
}

.twoColFixRtHdr #container #header #nav li {
float: right;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
font-size: 12px;
}

Ok, I believe this is the core of the problem. It looks like I overcompensated trying to resolve the issue. As mentioned last night, there are two types of elements related to the box model; block & inline. Lists, including the containing unordered list (<li>) and list items (<li>) are block elements. I floated each list item right, instead of just displaying the list item inline. Therefore, the first list item, Home, was floated right, followed by Programs, etc. This explains the reverse display of the menu (I’ll call this a feature of inaccurate CSS). And obviously, the padding noted in the inaccurate version was unnecessary. So let’s update the styles and see what we have.

ecology101_05

Ok, So the menu is accurate, though too cramped and still not positioned properly. Let’s first tackle the cramped menu.

Because I want to provide the greatest area for the user to click, and since these would be links, I’m going to make these menu items links, then add padding to those links to enlarge the area that acts as a hyperlink. I select the list item (clicking on the list item), then enter a pound sign (#) in the link box in the Property Inspector in Dreamweaver. I then click on the anchor tag (<a>) in the breadcrumb tag area in the active window.

ecology101_06

Now I select the New CSS Rule button on the CSS Styles Panel. The default selector is .twoColFixRtHdr #container #header #nav a, which is fine. Click OK.

I’m going to set the following properties:

Category Properties
Type Color:#FFFFFF
font-weight: bold;
text-decoration: none
Box padding: 5px;
margin-right: 5px;
margin-left: 5px;

Now, one more enhancement to the navigation links. To communicate to a user that the link is being hovered upon, we are going to change the color of the text. To do that, we select one of the menu items, and as above, I click on the anchor tag (<a>) in the breadcrumb tag area in the active window. Now I select the New CSS Rule button on the CSS Styles Panel. The default selector is .twoColFixRtHdr #container #header #nav a. We are going to add to this string. Immediately after the “a,” we’re going to add the follow – :hover. This is a psuedo selector that will change the style when the link is hovered on by a mouse. Click OK. Now, under the Type category, change the follow to a Yellow, say #FFFF66. Click OK. Once you save the changes, now when you hover over the links in the navigation bar, the color of the text changes.

ecology101_071

Now, to address that nagging gap between the logo & navigation bar. A simple solution, that I totally overlooked. I simply floated the <h1> tag to the left. Ta Da!

ecology101_08

I want to thank everyone that came out for my presentation on Monday, Jan. 26, 2009. I hope that everyone took away the importance of leveraging web standards for your web design efforts. And I hope I didn’t scare you off with my inability to show how easy it is to use Dreamweaver to create a web page.

Below, I’ve included a copy of the presentation as well that covers web standards.

Advertisements

3 Comments

Filed under Cascading Style Sheets, Dreamweaver, Web Design

3 responses to “Murphy's CSS

  1. arn213

    Trying to figure out why I now have several lines of text which appear above my Header and first appeared as a result of deleting a WP plugin that dealt with supposedly insuring that each page only has one URL. It’s a Local install of WP2.7 using WAMP. If this isn’t the right place to ask this question, please let me know

  2. Dennis Deacon

    Well, not that this would be the wrong place to ask the question, just off topic. 🙂

    I’m not a PHP/Wordpress expert. However, if you use the Firefox web browser, you might try the Firebug extension. In a separate panel, it will should you block elements and the space that take up. It has helped me troubleshoot many an issue. Good Luck!

  3. Perhaps another adage that you could have applied here would be Occam’s razor, which I’ll paraphrase as “the simplest solution is the best.” Many times I’ve found the cause of an unexpected display problem is overcomplicated code. That said, you may wish to consider another solution.

    First, I’d think you could probably drop the extra div (#nav) wrapped around your unordered list (‘ul’). Unless it’s required by some design detail not discernable in the screenshots, you can get by with just the ‘ul’ – give that the #nav ID and apply your overall positioning, sizing, and spacing there.

    The core of the problem was indeed floating the list items (li) to the right. But I would recommend you avoid using display-inline on the list items. You get the same results with simple floats and it is a more cross-browser compatible method.

    Specifically, you would instead float the list items to the left, putting them all in a horizontal line, and you could then apply margins to achieve the spacing. ‘display:inline;’ could still be served to IE6 only via conditional comments to fix its double-margin float bug, but at 5px (10px to IE6), it’s hardly noticeably in your particular design.

    You would then float the ‘ul’ to the right. This would remove the need to use text-align for positioning, which is a bit of a hack. Floating the ‘ul’ to the right would handle both the positioning and clear / contain its floated children, the list items.

    You would of course need to clear the floated ‘ul’ at some point – the easiest way is to use overflow clearing method: apply an explicit width and ‘overflow:hidden;’ to its parent container, in this case the “header” div that houses both your h1 and ul#nav.

    So assuming your markup is stripped down to simply the h1 (floated left as you mentioned) followed immediately by the unordered list, here’s the basic positioning-related CSS for the nav:

    ul#nav {
    float:right; /* position, contain floated descendents */
    margin:20px 0;
    list-style:none;
    }
    ul#nav li {
    float:left;
    margin:0 5px;
    }
    ul#nav li a {
    display:block;
    padding:5px;
    }

    Very clean, valid, and cross-browser compatible – that’s web standards! 😉

    I think it’s very good of you to be out there promoting Web Standards, particularly in relation to producing code with WYSIWYG tools like Dreamweaver. Web authors who might otherwise only every use the “design view” option should know what’s going on “under the hood” to ensure a better online experience for all of us, and I applaud your efforts to that effect.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s