Creating the Design


As is usually the case, we'll start at the top of the document and work our way down. After getting the masthead put together, we'll move on to the main content and sidebar. This will let us effectively divide the layout into two zones: "masthead" and "the rest of the page." While it's true that the main content and sidebar will be placed in relation to each other, they'll both be placed in relation to the masthead, so in many ways it is the most important aspect of the design.

Two Images Behind the Masthead

Since the masthead is a key portion of the design, it stands to reason that it should look pretty. It's hard to create beautiful Web design without images, and in this case, we have two images to use in the masthead. They're shown in Figure 9.3.

Figure 9.3. The images available for use in the masthead.

graphics/09fig03.jpg

All right, so it's really two variants of the same image, masthead.jpg and mh-light.jpg, the latter of which is a washed-out version of the former. We'll be able to use them together to create a translucency effect, as we did in Project 4, "Positioning in the Background."

First let's get the h1 element styled. It will be getting masthead.jpg for its background, so we need to match its background color to the background of the image. We're also going to be placing the image to the right edge of the element.

 @import url(project08.css); #sitemast h1 {background: rgb(45%,65%,45%) url(masthead.jpg)    100% 0 no-repeat;} </style> 

For reasons that will become clear later (and were explored in Project 4), we need to explicitly set the font-size of the h1 and define any margins or padding. These will all be set using ems for the sake of consistency…and also to make life easier for us later on. Let's do the padding and margin first.

 #sitemast h1 {margin: 0; padding: 1.5em 0.5em 0 0;   background: rgb(45%,65%,45%) url(masthead.jpg) 100% 0 no-repeat;} 

Now for the size of the h1 font. Making it twice as big as that of its parent element (the sitemast div) seems like a good size. That's large enough to be easily noticeable but not so large as to completely overwhelm everything else. For consistency, let's also make the font family the same as the titles in our weblog. That leads us to make the following addition:

 #sitemast h1 {margin: 0; padding: 1.5em 0.5em 0 0;   font: 2em Arial, Verdana, sans-serif;   background: rgb(45%,65%,45%) url(masthead.jpg) 100% 0 no-repeat;} 

This will have exactly the result we declared and no more which means the text won't be boldfaced. Our new declaration sets the font-weight, font-style, and font-variant all to normal. That's just how shorthand properties like font work. So let's just drop bold into the declaration, thus restoring the boldfacing, as shown in Figure 9.4.

 #sitemast h1 {margin: 0; padding: 1.5em 0.5em 0 0;   font: bold 2em Arial, Verdana, sans-serif;   background: rgb(45%,65%,45%) url(masthead.jpg) 100% 0 no-repeat;} 
Figure 9.4. Dramatic improvements to the masthead's appearance.

graphics/09fig04.jpg

It's already looking pretty good, but there are some improvements yet to make. First, let's get the descender in the "y" to stick out of the background of the h1. We can accomplish this by reducing the line-height of the element to a sufficiently low number. Some experimentation reveals that 0.75em is a good choice for Arial. We'll take advantage of font's unique ability to accept a line-height value after the font-size value, so long as the two are separated by a forward slash.

 #sitemast h1 {margin: 0; padding: 1.5em 0.5em 0 0;   font: bold 2em/0.75em Arial, Verdana, sans-serif;   background: rgb(45%,65%,45%) url(masthead.jpg) 100% 0 no-repeat;} 

Now for the link itself. It's kind of weird having normal link styles in the masthead, so let's both set the color and remove the underline.

 #sitemast h1 {margin: 0; padding: 1.5em 0.5em 0 0;   font: bold 2em/0.75em Arial, Verdana, sans-serif;   background: rgb(45%,65%,45%) url(masthead.jpg) 100% 0 no-repeat;} #sitemast h1 a {color: rgb(20%,40%,20%); text-decoration: none;} </style> 

Okay, now for the masthead div itself. Since we gave the h1 the normal-color image, we'll apply the washed-out version to the div. At the same time, let's remove any possible margins that might be applied.

 @import url(project08.css); #sitemast {margin: 0;   background: rgb(73%,82%,73%) url(mh-light.jpg) 100% 0 no-repeat;} #sitemast h1 {margin: 0; padding: 1.5em 0.5em 0 0;   font: bold 2em/0.75em Arial, Verdana, sans-serif;   background: rgb(45%,65%,45%) url(masthead.jpg) 100% 0 no-repeat;} 

All right, so now we have a div that's wrapped around an h1. That means none of the div is actually visible at the moment; if we added borders they'd be visible, but that doesn't do much for the background. We need to get some of that background visible. Easy enough: We'll add some bottom padding to the div, and as Figure 9.5 shows, some of the background is thus revealed.

 #sitemast {margin: 0; padding: 0 0 1em;   background: rgb(73%,82%,73%) url(mh-light.jpg) 100% 0 no-repeat;} 
Figure 9.5. Adding the lighter image to the masthead div and making it visible.

graphics/09fig05.jpg

Shifting Versus Image Editing

graphics/note_icon.jpg

Once we decide that the masthead's appearance is how we want it, we ought to crop the images using an image editor like Photoshop so that their top edges are the same as what we see in the design. We could then reset the background positions to 100% 0 and save some bandwidth to boot. Until that time, though, using background-position to try out different image placements can be a real time-saver.


Shifts and Borders

As it stands, the masthead is in pretty darned good shape, but let's take things a step further. Let's reveal more of the butterfly by shifting it upward. We can do this by changing the positions of the background images in both the h1 and the div. Since they both line up along their top edges, we can just shift them upward by the same number of pixels.

 #sitemast {margin: 0; padding: 0 0 1em;   background: rgb(73%,82%,73%) url(mh-light.jpg) 100% -30px no-repeat;} #sitemast h1 {margin: 0; padding: 1.5em 0.5em 0 0;   font: bold 2em/0.75em Arial, Verdana, sans-serif;   background: rgb(45%,65%,45%) url(masthead.jpg) 100% -30px no-repeat;} 

There's one last touch to apply to the masthead. By creatively using borders, we can actually shift over the h1 and the visible portion of the div. Consider the styles shown here and illustrated by Figure 9.6.

 #sitemast {margin: 0; padding: 0 0 1em;   border: 1px solid rgb(45%,65%,45%); border-width: 0 0 1px 1.5em;   background: rgb(73%,82%,73%) url(mh-light.jpg) 100% -30px no-repeat;} 
Figure 9.6. Putting the finishing touches on the masthead.

graphics/09fig06.jpg

This works because we've added an em-and-a-half left border to the masthead div and also set the color of that border to match the background color of the h1. Visually, the two blend together with nary a seam. Changing the border color to anything else will clearly show how the effect works.

The one-pixel border along the bottom of the masthead also serves to subtly separate it from the rest of the design. In fact, it's about time we turned our attention to the rest of the design.

Content and Sidebar

As you'll recall, the main content of the page is contained in a div with an id of content, and the sidebar is contained in a div with an id of navpres and a class of panel. It's also the case that our project goals call for us to put the navigation and presentation links to the right of the main content.

To make that happen, we'll need to do one of two things:

  • Float the main content to the left, leaving enough room for the sidebar to flow (or float) next to it.

  • Absolutely position the sidebar to the right of the main content, which will be left in the normal flow.

Let's position the sidebar. Doing so will make it easy for us to move it around at will, and this is actually a little less prone to strange interactions (see "Positioning Rather Than Floating" at the end of this section for details). To do so, however, we'll need to open up space for it to appear; otherwise, it will overlap the main content. The content could use some padding anyway, to push its contents away from the edges of the browser window as well as from the masthead.

 #sitemast h1 a {color: rgb(20%,40%,20%); text-decoration: none;} #main {padding: 2em 25% 3em 1.5em;} </style> 

The 1.5em left padding is taken from the width of the left border on the masthead. By setting them to be the same, the left visible edge of the content will line up with the left visible edge of the masthead's text. As for the 25% right padding, that value was picked because it sounded like a good amount of space to leave for a sidebar.

We don't want the sidebar to fill that entire space, though if it did, the main and sidebar content would practically touch each other. We'll absolutely position the sidebar into the top-right corner and supply a width of 17%. Again, that's a number that was picked more or less on a whim. We'll also add a dotted red border so that we can see the edges of the sidebar, as seen in Figure 9.7.

 #main {padding: 2em 25% 3em 1.5em;} .panel {position: absolute; right: 0; top: 0; width: 17%;   border: 1px dotted red;} </style> 
Figure 9.7. The sidebar is positioned in the top-right corner.

graphics/09fig07.jpg

Well, there's certainly enough room to the right of the main content for the sidebar! The real problem, of course, is that we positioned the sidebar over the masthead. We'll need to move it down so that it's just underneath the masthead's bottom border.

How far is that? Well, the h1 has a font-size of 2em (in comparison to normal-size text), which means everything about it is doubled. It has 1.5em of top padding but a 0.75em content height (thanks to the line-height value). That's a total of 2.25em, which doubled is 4.5em. The masthead div has another em of bottom padding, so that's a total of 5.5em.

 .panel {position: absolute; right: 0; top: 5.5em; width: 17%;   border: 1px dotted red;} 

This change will actually cause the top border of the sidebar to overlap the bottom border of the masthead. Why? Because that one pixel of bottom border is placed below the 5.5em we just added up. So the top edge of the masthead's bottom border is 5.5em below the top of the document, and the top edge of the top border of the sidebar is in exactly the same place. That's actually a good thing because, in this case, we want the two borders to overlap.

Using Margins When Positioning

graphics/note_icon.jpg

If we didn't want the borders to overlap, we could shift the sidebar down a pixel (or more, if necessary) by setting a top margin.


Now might be a good time to get rid of some of the list indentation, too. We don't want to remove all of it; some of the vertical separation created by top and bottom margins and padding is a good thing. In addition, the sublist under "Eric" should be indented with respect to the rest of the links. So we'll leave a bottom margin and some top and bottom padding on the top-level lists. For the nested lists, we'll remove everything except some left padding. This is shown in Figure 9.8.

 .panel {position: absolute; right: 0; top: 5.5em; width: 17%;   border: 1px dotted red;} .panel ul {margin: 0 0 1.5em; padding: 0.25em 0 0.5em;} .panel ul ul {margin: 0; padding: 0 0 0 0.5em;} </style> 
Figure 9.8. The repositioned sidebar and its slightly restyled lists.

graphics/09fig08.jpg

Some of you may have noticed that the bullets don't appear in IE6. So far as I could tell, this happens because IE clips anything sticking out of the positioned element. We could try to fix the problem by explicitly changing the value of overflow for the sidebar, except we're about to remove the bullets anyway, so that would be sort of silly.

Positioning Rather Than Floating

It's worth explaining why we positioned the sidebar instead of floating the main content and leaving the sidebar in the normal flow. To use floating, we might have written styles something like this:

 #main {float: left; width: 75%;} .panel {margin-left: 75%;} 

Obviously, these are simplified versions of what we'd really write, but they capture the essence of the method. This would put the content to the left and the sidebar to the right.

The main reason not to do this is the bugs lurking in IE/Win's rendering engine, which doesn't take well to floating an element over the margin (or padding) of a following element in the normal flow. These bugs aren't totally reliable, but they do exist and can seriously mangle a page's layout.

The other floating method would involve floating both content and sidebar, something like this:

 #main {float: left; width: 75%;} .panel {float: right; width: 25%;} 

Explorer is much happier with this kind of thing, and so are all other modern browsers. The drawback is the difficulty in setting padding or margins for these elements based on anything other than percentages. If we were to add that 1.5em of left padding back onto the main-content div, the two divs wouldn't fit next to each other because the left padding would be added to the width of the div, thus resulting in an element box (75% + 1.5em) wide.

We could fiddle with the numbers until we got something that worked for most people, but it would still be a fragile solution. The only reasonable alternative would be to use only percentages, like this:

 #main {float: left; width: 70%; padding: 2em 0 3em 5%;} .panel {float: right; width: 25%;} 

If your layout needs are amenable to using percentages like this, great! Floats will work for you. If not, positioning makes life a lot easier.


Simple Sidebar Styling

The bullets really have to go. Doing so is easy.

 .panel ul {margin: 0 0 1.5em; padding: 0.25em 0 0.5em;   list-style: none;} 

This will remove the bullets from all ul elements that descend from the sidebar div (because of its panel class), no matter how deeply they're nested inside other lists.

Let's back up for a moment and change the font used in the sidebar. The weblog titles are all in Arial and so is the site's masthead, so let's have the sidebar use Arial as well. We'll supply Verdana as a fallback in case Arial is not available for some reason.

 .panel {position: absolute; right: 0; top: 5.5em; width: 17%;   font-family: Arial, Verdana, sans-serif;   border: 1px dotted red;} 

Then there are the h4 elements, the ones containing the words "Navigation" and "Presentation." We should take off their margins, add in a darker green background, and slide in a little padding for visual appeal, as shown in Figure 9.9. We'll also set the font-size to 1em to keep the text from getting bigger or smaller than the rest of the text.

 .panel {position: absolute; right: 0; top: 5.5em; width: 17%;   font-family: Arial, Verdana, sans-serif;   border: 1px dotted red;} .panel h4 {margin: 0; padding: 0.33em 0.5em 1px 0.25em;   background: rgb(75%,85%,70%);   font-size: 1em;} .panel ul {margin: 0 0 1.5em; padding: 0.25em 0 0.5em;   list-style: none;} 
Figure 9.9. The seeds of a better-looking sidebar.

graphics/09fig09.jpg

Let's keep going with the h4 elements. Rather than black on green, let's have them be dark green on green.

 .panel h4 {margin: 0; padding: 0.33em 0.5em 1px 0.25em;   background: rgb(75%,85%,70%);   font-size: 1em;}   color: rgb(20%,40%,20%);} 

The addition of some borders would make the headings stand out even more, but just adding solid borders is kind of dull. To increase their visual appeal, we'll make the left-edge borders a little thicker, the bottom border dotted, and set them all to the same color. This can be done in any number of ways, but we'll try adding in one rule for each aspect of the borders: style, width, and color.

 .panel h4 {margin: 0; padding: 0.33em 0.5em 1px 0.25em;   background: rgb(75%,85%,70%);   font-size: 1em;   border-style: solid solid dotted; border-width: 1px 0 1px 2px;   border-color: rgb(40%,60%,40%); color: rgb(20%,40%,20%);} 

Not bad, but there's so much more we could do! Italicizing them would add more interest while also making them visually distinct from the rest of the text in the sidebar, so we'll do that. We can also reduce the line-height, just like we did for the masthead, so that the descenders stick down past the bottom border of the element itself.

 .panel h4 {margin: 0; padding: 0.33em 0.5em 1px 0.25em;   background: rgb(75%,85%,70%);   font-size: 1em; font-style: italic; line-height: 0.7em;   border-style: solid solid dotted; border-width: 1px 0 1px 2px;   border-color: rgb(40%,60%,40%); color: rgb(20%,40%,20%);} 

Reduced Line Heights

graphics/note_icon.jpg

When you decide to reduce the line-height of an element to put a border along the "baseline," as we've done here, the exact amount of line-height will depend on the font in use. Finding the right value is often a matter of experimentation.


This will have the desired effect for "Navigation," but "Presentation" doesn't have any letters that descend. Of course, it would if we changed all of the letters to be lowercase; the "P" would then become a "p." Let's make that change plus spread out the letters just a bit to give them more of an airy feel. We get the result shown in Figure 9.10.

 .panel h4 {margin: 0; padding: 0.33em 0.5em 1px 0.25em;   background: rgb(75%,85%,70%);   font-size: 1em; font-style: italic; line-height: 0.7em;   text-transform: lowercase; letter-spacing: 1px;   border-style: solid solid dotted; border-width: 1px 0 1px 2px;   border-color: rgb(40%,60%,40%); color: rgb(20%,40%,20%);} 
Figure 9.10. Polishing the headings to a high sheen.

graphics/09fig10.jpg

Adding Another Leaf

At this point, things have been almost too easy, so let's take on a small challenge. Notice the blank space to the right of the links in the sidebar? Let's put something there. It should have visual appeal without being overly distracting.

A good choice would be a small graphic. That part's easy. To make it more interesting, let's have the same image straddle the bottom border of the headings so that the image starts in the headings and stretches down below the bottom border. Visually speaking, anyway.

To do this, we'll use the image shown in Figure 9.11. (It appears there at 500% normal size.)

Figure 9.11. The leaf image we'll be using in the sidebar.

graphics/09fig11.jpg

The first thing to do is add the leaf image to the background of the headings. We want it all the way to the right and partway down the element box, so that its top starts somewhere near the middle of the heading. The top padding plus content height is 1.03em, and there's another pixel of bottom padding. So we'll guess and say around 0.66em.

 .panel h4 {margin: 0; padding: 0.33em 0.5em 1px 0.25em;   background: rgb(75%,85%,70%) url(nav-bg.gif) 100% 0.66em no-repeat;   font-size: 1em; font-style: italic; line-height: 0.7em;   text-transform: lowercase; letter-spacing: 1px;   border-style: solid solid dotted; border-width: 1px 0 1px 2px;   border-color: rgb(40%,60%,40%); color: rgb(20%,40%,20%);} 

That takes care of the top part of the leaf effect. Now we need to continue the leaves on past the bottom border. Fortunately, we have elements ready-made for this purpose. We'll just put the same image in the background of the unordered lists and shift it upward so that the two come together.

How far up should it be shifted? Well, we know that the top of the image is about 0.37em above the bottom of the heading content's bottom edge. Then there are the top and bottom borders, each of which adds a pixel, and the one-pixel bottom padding. So we'll take a guess and say it's in the rough vicinity of 0.5em.

 .panel ul {margin: 0 0 1.5em; padding: 0.25em 0 0.5em;   list-style: none;   background: url(nav-bg.gif) 100% -0.5em no-repeat;} 

The results are shown in Figure 9.12.

Figure 9.12. The leaves are added to the sidebar.

graphics/09fig12.jpg

Pretty cool, except for one oddity: There's an extra leaf piece! That's because we applied the background image to all ul elements in the sidebar, and that includes the nested list. We need to get rid of it, and we'll do so by adding a declaration to the .panel ul ul rule.

Sliced Opera

graphics/note_icon.jpg

Okay, there's another oddity: Opera doesn't paint the image underneath the border, so the leaf ends up with a slice through it. If we'd used a solid border, this wouldn't have been a problem. We'll stick to the dotted border for the rest of the project, but Opera users might want to make it solid.


 .panel ul ul {margin: 0; padding: 0 0 0 0.5em;   background: none;} 

While we're here, let's italicize the text in that nested list.

 .panel ul ul {margin: 0; padding: 0 0 0 0.5em;   background: none; font-style: italic;} 

Sidebar Links

Now we'll deal with the actual links. The link text has been far too cramped for far too long in this project, and a little padding on the list items is just the thing to give them some room. With top and bottom padding we can push them away from each other, and with left padding we can indent the text a bit from the edge of the sidebar.

 .panel ul {margin: 0 0 1.5em; padding: 0.25em 0 0.5em;   list-style: none;   background: url(nav-bg.gif) 100% -0.5em no-repeat;} .panel ul li {padding: 0.15em 0 0.1em 0.5em;} .panel ul ul {margin: 0; padding: 0 0 0 0.5em;   background: none; font-style: italic;} 

We don't want the exact same spacing rules to apply to the nested list, though. To tighten those nested links up a bit, we'll take the top padding off of the list items.

 .panel ul ul {margin: 0; padding: 0 0 0 0.5em;   background: none; font-style: italic;} .panel ul ul li {padding-top: 0;} </style> 

Now for the colors. Blue and purple, the default unvisited and visited colors, don't really go well with the green theme we have in place. Let's define some basic colors for these link styles, providing a dark green for unvisited links and a lighter green for the visited links. This is what's shown in Figure 9.13.

 .panel ul ul li {padding-top: 0;} .panel a:link {color: rgb(30%,50%,30%);} .panel a:visited {color: rgb(50%,60%,50%);} </style> 
Figure 9.13. Improving the presentation of the links.

graphics/09fig13.jpg

We can take things a step further by styling the presentation links differently than the navigation links. Since the presentation options aren't really navigation related, they probably shouldn't look like unvisited links. The simplest thing to do is make them look like visited links.

 .panel a:visited, #presolinks a {color: rgb(50%,60%,50%);} 

This will set the presentation link colors to be a consistent color no matter whether a browser thinks they've been visited or not.

Since we're talking about the colors of sidebar links, a hover effect might be nice. We want this to apply to any navigation link but not the presentation links. (Why? Just because.) So we'll add a new rule that makes any hovered navigation link a woodsy brown.

 .panel a:visited, #presolinks a {color: rgb(50%,60%,50%);} .panel a:hover {color: rgb(50%,30%,20%);} </style> 

This rule won't affect the presentation links because the specificity of #presolinks a is higher than that of .panel a:hover. Thus, the hover color will lose out to the color assigned by #presolinks a. The order the rules come in doesn't matter in this case, thanks to the differences in specificity.

Link Specificity

graphics/note_icon.jpg

As it happens, specificity is exactly the reason behind the recommendation that link styles be in this order: link, visited, hover, active. You can read more at http://www.meyerweb.com/eric/css/link-specificity.html.


Border Changes

At this stage, it's time to remove that dotted red border probably well past time, really. So we'll take that declaration out of the .panel rule.

 .panel {position: absolute; right: 0; top: 5.5em; width: 17%;   font-family: Arial, Verdana, sans-serif;} 

This change means that the top border of the "navigation" heading will now overlap the bottom border of the masthead, the same as the dotted red border did before we removed it.

Having removed the sidebar's border, we need to restore some form of visual separation between the sidebar links and the main content. Rather than add a left border back onto the panel, let's instead add left borders to the unordered lists that contain the links.

 .panel ul {margin: 0 0 1.5em; padding: 0.25em 0 0.5em;   list-style: none; border-left: 1px solid rgb(45%,65%,45%);   background: url(nav-bg.gif) 100% -0.5em no-repeat;} 

Remember what happened with the leaf, the way it showed up at the top of the nested list? We need to prevent a recurrence of that nested-list repetition here by removing the left border from any nested lists. This is shown in Figure 9.14.

 .panel ul ul {margin: 0; padding: 0 0 0 0.5em;   background: none; border-left: none; font-style: italic;} 
Figure 9.14. Adding borders to the lists enforces visual separation.

graphics/09fig14.jpg

Natural Highlighting

We're almost done, but there are a few minor things left to do. One is to fulfill the third of our project goals: to highlight the name of this theme in some fashion. The theme's name is, appropriately enough, "Natural." If we take a look at the markup for that link, we can see an easy way to highlight the theme's name.

 <li ><a href="#"   onclick="setActiveStyleSheet('Natural'); return false;"   title="Wildlife and greenery">Natural</a></li> 

This id gives us all we need to style the theme's name different from the others. For starters, let's make the link color a dark green.

 .panel ul ul li {padding-top: 0;} .panel #natural a {color: rgb(30%,40%,30%);} .panel a:link {color: rgb(30%,50%,30%);} 

With that done, let's boldface and italicize the text by styling the #natural list item directly. These new font styles will be inherited by the link, although the color will not because we just explicitly assigned it a color.

 .panel ul ul li {padding-top: 0;} .panel #natural {font-weight: bold; font-style: italic;} .panel #natural a {color: rgb(30%,40%,30%);} 

Come to think of it, this is starting to make the link look like the headings, so let's bring in a couple more of the styles we used for the headings: the increased letter spacing and the lowercase text.

 .panel #natural {font-weight: bold; font-style: italic;   letter-spacing: 1px; text-transform: lowercase;} 

In that same vein, let's add a dotted border to this list item to set it apart from the others. We don't want it to appear on the right edge, so we'll just define an overall border and then turn off the right side. We'll also add a background color that's just a touch darker than the page background.

 .panel #natural {font-weight: bold; font-style: italic;   letter-spacing: 1px; text-transform: lowercase;   border: 1px dotted rgb(45%,65%,45%); border-right: none;   background: rgb(83%,90%,78%);} 

If we consider the presentation of the "natural" link, it's definitely different from its neighbors. There's just one little detail the left border. It's sitting just inside the list's border, which doesn't look all that great. We could remove it, but here's a better idea: Let's make it overlap the list's border, effectively punching a hole in that border and visually blurring the distinction between the theme name and the rest of the page. All that's required is a one-pixel negative left margin for the list item, as shown in Figure 9.15.

 .panel #natural {font-weight: bold; font-style: italic;   letter-spacing: 1px; text-transform: lowercase;   border: 1px dotted rgb(45%,65%,45%); border-right: none;   background: rgb(83%,90%,78%); margin-left: -1px;} 
Figure 9.15. Highlighting the name of the current theme.

graphics/09fig15.jpg

Removing Accessibility

graphics/warning_icon.jpg

Although the skip-links are supplied for accessibility reasons, setting them to display: none means most screen readers won't see them. The same is true of just about every other method of removing skip-links from your Web design. Until these broken screen readers fix their behavior, nondisplayed skip-links are not likely to be accessible.


Finishing Touches

There are but a few things left to do. First, the skip-link doesn't really have to stay in place. We could use one of several methods to remove it from display, including just setting it to display: none. In fact, let's just do that, as it's the simplest course of action. We'll drop this style in at the top of the style sheet for no good reason other than to get it out of the way early.

 @import url(project08.css); .skipper {display: none;} #sitemast {margin: 0; padding: 0 0 1em;   border: 1px solid rgb(45%,65%,45%); border-width: 0 0 1px 1.5em;   background: rgb(73%,82%,73%) url(mh-light.jpg) 100% -30px no-repeat;} 

We might also do something about the color of links in the overall page instead of just in the sidebar. We'll go with sort of a bright medium green for unvisited links and a more washed-out green for visited links. This will apply to any links that aren't already being styled by other means, which means the rule will not affect the sidebar links nor the weblog links that we styled in the preceding chapter.

Background Warnings

graphics/note_icon.jpg

We supplied explicit transparent backgrounds for the links to avoid triggering warnings in most CSS validators. Note that a warning does not prevent validation; only an error prevents that.


We'll put the rules to drive the new link-color effects at the end of the style sheet for no good reason other than we can.

 .panel a:hover {color: rgb(50%,30%,20%);} a:link {color: rgb(0%,50%,40%); background: transparent;} a:visited {color: rgb(30%,50%,30%); background: transparent;} </style> 

The result of removing the skip-link and coloring the document's links can be seen in Figure 9.16.

Figure 9.16. Removing the skip-link and changing link colors.

graphics/09fig16.jpg

Now let's style the footer at the bottom of the page. We don't have to worry about its separation from the text in the main content because that's been handled by the bottom padding on the content div itself. All we need do is concentrate on styling the footer. We'll start with a double border across the top, a zeroed-out margin, and some padding on the top and bottom of the footer itself.

 a:visited {color: rgb(30%,50%,30%); background: transparent;} #footer {border-top: 3px double; margin: 0; padding: 0.75em 1em 1em;} </style> 

The padding ensures that the footer's content doesn't crowd up against the edges of the browser window. Now, footers are usually given over to boring stuff like copyright statements and other legalese, so we'll crank down the size of the text.

Text Reduction

graphics/note_icon.jpg

We also could have used a value like smaller to reduce the text size. In such situations, the exact value used is often a matter of the designer's taste.


 #footer {border-top: 3px double; margin: 0; padding: 0.75em 1em 1em;  font-size: 75%;} 

To finish off the visual separation of the footer, we'll alter its text and background colors. These colors are based on variations of the overall page background and the page theme. (If you don't like them, feel free to use different values.)

 #footer {border-top: 3px double; margin: 0; padding: 0.75em 1em 1em;   font-size: 75%;   color: rgb(20%,40%,20%); background: rgb(73%,82%,73%);} 

There's just one more thing to do, and that's close up the space between the two paragraphs in the footer. By stripping the margins and padding off of the paragraphs, we get them to look like two lines in the same paragraph, as illustrated in Figure 9.17.

 #footer {border-top: 3px double; margin: 0; padding: 0.75em 1em 1em;   font-size: 75%;   color: rgb(20%,40%,20%); background: rgb(73%,82%,73%);} #footer p {margin: 0; padding: 0;} </style> 
Figure 9.17. Giving the footer some style.

graphics/09fig17.jpg

The end result of all our work is shown in Listing 9.2.

Listing 9.2. The Full Style Sheet
 @import url(project08.css); .skipper {display: none;} #sitemast {margin: 0; padding: 0 0 1em;   border: 1px solid rgb(45%,65%,45%); border-width: 0 0 1px 1.5em;   background: rgb(73%,82%,73%) url(mh-light.jpg) 100% -30px no-repeat;} #sitemast h1 {margin: 0; padding: 1.5em 0.5em 0 0;   font: bold 2em/0.75em Arial, Verdana, sans-serif;   background: rgb(45%,65%,45%) url(masthead.jpg) 100% -30px no-repeat;} #sitemast h1 a {color: rgb(20%,40%,20%); text-decoration: none;} #main {padding: 2em 25% 3em 1.5em;} .panel {position: absolute; right: 0; top: 5.5em; width: 17%;   font-family: Arial, Verdana, sans-serif;} .panel h4 {margin: 0; padding: 0.33em 0.5em 1px 0.25em;   background: rgb(75%,85%,70%) url(nav-bg.gif) 100% 0.66em no-repeat;   font-size: 1em; font-style: italic; line-height: 0.7em;   text-transform: lowercase; letter-spacing: 1px;   border-style: solid solid dotted; border-width: 1px 0 1px 2px;   border-color: rgb(40%,60%,40%); color: rgb(20%,40%,20%);} .panel ul {margin: 0 0 1.5em; padding: 0.25em 0 0.5em;   list-style: none; border-left: 1px solid rgb(45%,65%,45%);   background: url(nav-bg.gif) 100% -0.5em no-repeat;} .panel ul li {padding: 0.15em 0 0.1em 0.5em;} .panel ul ul {margin: 0; padding: 0 0 0 0.5em;   background: none; border-left: none; font-style: italic;} .panel ul ul li {padding-top: 0;} .panel #natural {font-weight: bold; font-style: italic;   letter-spacing: 1px; text-transform: lowercase;   border: 1px dotted rgb(45%,65%,45%); border-right: none;   background: rgb(83%,90%,78%); margin-left: -1px;} .panel #natural a {color: rgb(30%,40%,30%);} .panel a:link {color: rgb(30%,50%,30%);} .panel a:visited, #presolinks a {color: rgb(50%,60%,50%);} .panel a:hover {color: rgb(50%,30%,20%);} a:link {color: rgb(0%,50%,40%); background: transparent;} a:visited {color: rgb(30%,50%,30%); background: transparent;} #footer {border-top: 3px double; margin: 0; padding: 0.75em 1em 1em;   font-size: 75%;   color: rgb(20%,40%,20%); background: rgb(73%,82%,73%);} #footer p {margin: 0; padding: 0;} 


More Eric Meyer on CSS
More Eric Meyer on CSS (Voices That Matter)
ISBN: 0735714258
EAN: 2147483647
Year: 2006
Pages: 109
Authors: Eric Meyer

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net