← Back to 3. Fluid CSS Page Border
Continue to 5. Footer Layout →
← ← Jump back to Design Demo: Medieval Scroll Index

Main Points

Well, we've done most of the initial layout, and derived the CSS to put a border of background images around the edge of the page. Now it's time to put in some time with usability and accessibility best practices. Now that we know the design is technically possible, and we've mitigated our risk, we can get down to the nuts and bolts of optimizing the layout using universal design principles. The main piece of the puzzle is to finish the for the navigation for the user interface. As a prelude to UI development, I nudged the padding on the #innerContainer down to 2em left and right so that the text overlaps the images. I realized it's not the actual edge of the image border, but the apparent edge of the scroll that matters.

Main Points Boxout UI

The technical title of this section was (and should be) Main Points Boxout, which is the technical webby name for this feature. However, by Earth Chronicle coding standards that made the id for the heading the same as the id for the boxout itself. A strict XHTML no-no, so I held to my coding standards and modified the heading. This code is all fairly straight forward as you can see.

/* Navigation: Main Points Boxout */

#mainPointsBoxoutWrapper {
float: right;
width: 38.26%;
}

#mainPointsBoxoutSpacer { /* Spacer holds content below the Main Points */
display: none;
}

#mainPointsBoxout h2 {
text-align: center;
}

#mainPointsBoxout ul {
list-style-type: none;
}

I float the Main Points to the right and the spacer which follows it was pushing the content below it's bottom margin. Therefore I applied display: none; to the spacer's id, and the content fell in nicely to the left of the boxout. Everything else is just usual CSS appearance rules to make the UI look good. Note the use of the golden ratio, Φ. I told you it would pop up now and again.

Skip to Main Points

The navbars are one of the trickiest pieces of CSS styling, yet of all the difficult components, I think I'm most pleased with how they came out. The work to get it into shape was tough going, but once refactored, it's the lightest and most elegant UI component compared to the other difficult structures.

/* ////////////////////////////////// */
/*
/* Navbar Navigation
/*
/* ////////////////////////////////// */



/* Navbar Position */

#specificNavbarWrapper {
position: absolute;
top: 0;
margin: 25px 0;
}

/* Internal Navbar Structure */

#specificNavbarWrapper ul, #siteWideNavbarWrapper ul {
list-style-type: none;
margin: 0;
padding: 0;
}

We have our standard header for the Navbar section. The first style rule positions the top navbar. Since all the navigation comes at the end of the XHTML file, we use a position: absolute; declaration to remove it from the normal webpage flow and then the top: 0; declaration moves it to the top of the webpage. I've applied just enough margin to clear the boundary of the scroll in our background images. The position: absolute also does another important job, it allows the navbar to ride over the top of the extraDivs. z-index was useless to move the navbar on top of the extraDivs; until it took position. With a position: absolute declaration set, setting a z-index of 2 cleared the problem right up. Therefore, I applied a position: absolute; declaration to the siteWideNavbarWrapper as well, and it worked for that purpose. However, you don't see it there now do you?

Unfortunately, when the browser window becomes narrow, the postion: absolute; holds the top left corner of the navbar in place relative to the extraDivs at the bottom of the page. As the floated navButtons tuck underneath one another, they create a gap between the bottom of the background images and the bottom of the browser window. (though strangely, the bottom right corner image inside the extraDiv <span> remained in place) After struggling with this, I simply removed the style rule for the siteWideNavbarWrapper entirely and took advantage of the fact that there's enough whitespace to prevent the bottom nav appearing in the same space as the image border. I would have liked it a little closer to the bottom edge of the scroll; however, if I can't, I'm not going to cry about that.

Finally, good semantic, accessible navbars are marked up as lists. However in this case I wanted neither the default bullets that browsers apply to lists, nor the margins and padding I've applied in my stylesheet. Therefore, I set list-style-type: none; to deactivate the bullets and removed the whitespace applied by my own stylesheet.

.navButton {
float: left;
width: 10em;
border: 1px solid #000000;
}

.navButton a {
display: block;
padding: 0.5em 1em;
background: #FFFFFF;
}

.navMenu {
display: none;
position: absolute;
float: left;
width: 12em;
border: 1px solid #000000;
}

.navMenu a {
display: block;
padding: 0.25em 1em;
border: 1px solid #000000;
}

Next we style the navbar from scratch. I've floated the navButtons left so they line up horizontally across the page, yet when the browser window narrows, they wrap nicely underneath one another. While this is not the optimal solution, it's much superior to the horizontal scrollbars which appear otherwise. You'll note the navMenus are also floated left though for a completely different purpose, so they automatically line up nicely underneath their navButtons. When floated left, their left border lines up with the navButton's left border; when floated right, their right border lines up with the navButton's right border. I've allowed the content to determine the height of the elements, but I do specify the width of each to make sure there's more than enough space for the content to lie on one line. It's a stylistic choice, but I did not want my links wrapping to a second line.

Finally, the links of both the navButtons and the navMenus use a display: block; declaration to increase the clickable footprint of the link so that users do not have to mouse over the text itself, but anywhere on the footprint. (except in IE6) You can increase the footprint as much as you like by increasing the padding. I also applied a number of thin borders and background colors to define the area of the navbar visually for people to see. These styles will be removed from the "Structure" stylesheet before go live and moved to the Styles.css stylesheet. These were simply some quick styles necessary for me to be able to get them built and working properly.

Skip to Main Points

CSS-only Drop Down Menus

With the introduction of IE8 and Microsoft's big push to implement it, I'm at last comfortable enough to switch to a CSS driven menu system for my main stylesheet. Now that I'm testing with it, there are a few surprises. The information I'd read is correct to a point, IE6 does not respect the :hover pseudo class in the sense that it will activate the menu. However, the :hover I've applied to the navButton and navMenu links do trigger the change in background color that lets you know you can trigger the link. I'm also not leaving IE6 out in the cold. There are still lots of people using it. I'm going to use a second conditional IE statement to add in an IE6 javascript after I pull in my main javascript, just like I pull in the IE6 stylesheet in the <head> right after my main stylesheet. I'll keep my javscript for driving the menus there and remove it from my main script. Instead, this is literally all I need to drive the menus with CSS. Wow!

.navButton:hover .navMenu { /* Toggle Menus On and Off */
display: block;
}

I'd read over demonstrations of CSS only menus and knew they were not that difficult. However, apparently I did not really pay close attention since I didn't plan on using them. There is a lot of code in both my example and the examples I looked at, so it was only last night that I understood 90% of it is for styling the menu. This lone style rule is all that drives the drop down functionality. When someone hovers their mouse over the navButton, the navMenu which previously was styled with a display: none; declaration, is now restyled with a display: block; declaration. That's it! When the user moves their mouse away, this style rule is no longer called and the original display: none; rule is invoked making it disappear. I was pretty stunned that this one line makes all the magic happen. Even then, I assumed that at the very least I would need two selectors, one for .navButton:hover .navMenu and one for .navMenu:hover. However, it was unnecessary; the menus automatically stay open. The navMenu must count as part of the navButton as far as the hover is concerned, apparently because the navMenu is an unordered list nested inside the navButton list item. This is so neat and clean, you'll have to forgive me a cheer for web standards. Yes!

A quick note. While working on some additional footer items for DMS05FooterLayout.aspx, I realized the accessible links in the footer are a set of separate unordered lists. Since that page uses the same master page as this one (and since I haven't styled those at all before now), then this page is "technically" the one which introduces the new XHTML for the accessible links. Like the navbars, the page links are now one list, with a number of nested lists inside. Consider this a preview of what's coming as I continue to develop the navigation along universal design principles.

[chroniclemaster1, 2009/07/02]

This demonstrates a lot of the universal design prinples that need to go into a good UI. All navigation is marked up as lists and drop down menus are executed using CSS-only to ensure maximum accessibility for text and alternative browsers. I'll be attacking the accessible page links on the next page to address people who have special needs but are still browsing with CSS on (which hides the drop down menus). That covers accessibility issues for those with special challenges and / or alternative equipment; for everyone else we're still following good usability design. Drop down menus are an excellent way to minimimze navigation space on the page while still putting all links easily at people's disposal. For those with fully functional mouse and monitor, this makes navigating easy, while maximizing space for content in the crucial area above the fold.

Skip to Main Points
← Back to 3. Fluid CSS Page Border
Continue to 5. Footer Layout →
← ← Jump back to Design Demo: Medieval Scroll Index