The screen.css style sheet contains all declarations needed for the CTM case study if you're working in a Mac browser or in IE 8 or Firefox on a PC, alongside the reset.css style sheet. If you are working with IE 6 and/or IE 7, you'll also need the IE-specific style sheets described later in this section.

The screen.css file is linked as follows:

<link href="assets/css/screen.css" type="text/css" rel="stylesheet" media="screen" />

Many of the methods used in our screen.css style sheet will be familiar, but let's take a quick look at a couple of tools that I consider essential.

/* I am a simple note */

/*
CLIMB THE MOUNTAINS by SIMON COLLISON
VERSION 1.0


CONTENTS ----------


   1.BODY
   2.DEFAULT STYLING
   3.HEADINGS
   4.LINKS

5.IMAGES
   6.LAYOUT
   7.BRANDING/MASTHEAD
   8.NAVIGATION
   9.SITEINFO/FOOTER
   10.GLOBAL ELEMENTS
      10.1 CAPTIONED IMAGE
      10.2 ELEVATION
      10.3 DISTANCE/ELEVATION PARAGRAPH
   11.HOMEPAGE
      11.1 CONTENT PRIMARY
      11.2 CONTENT SECONDARY
      11.3 CONTENT TERTIARY
*/

The aim of a specific reset.css sheet is to create a level playing field across all browsers and devices. For example, some browsers have a default style sheet that might set different margin values, padding, heading font sizes, line-height and so on from other browsers.

We bring the reset.css sheet into the cascade with the following line in screen.css:

@import url(reset.css); /* RESET CSS */

This then gives us the confidence to move forward knowing that (in most reset.css cases) we are dealing with XHTML elements that have no margin, no padding, no line-height, no set font-size, and so on. We can now confidently work through screen.css applying the values that we want and not have to worry about inheriting values from the browser style sheet.

CSS wizard Eric Meyer provides what he calls a "starting point, not a self-contained black box of no-touchiness" at http://meyerweb.com/eric/tools/css/reset/, and this was my initial starting point for the CTM site, with just a few of my own minor tweaks and additions.

This method of targeting specific Microsoft browser versions was introduced initially with Internet Explorer 5 and its point versions. Making use of XHTML markup wrapped in a conditional statement, inside of an XHTML comment, this special combination of syntax can be used anywhere in an XHTML document, giving us a brilliant opportunity to send certain information to certain browsers.

<!--[if IE 6]> Anything here is only seen by IE6 <![endif]-->

So, in the following example, we're using this combination of syntax to call three further style sheets should the user be viewing the site with any version of IE 6, IE 7, or IE 8.

<!--[if IE 6]><link href="assets/css/screen-ie6.css" type="text/css"

rel="stylesheet" media="screen" /><![endif]-->


<!--[if IE 7]><link href="assets/css/screen-ie7.css" type="text/css"

rel="stylesheet" media="screen" /><![endif]-->


<!--[if IE 8]><link href="assets/css/screen-ie8.css" type="text/css"

rel="stylesheet" media="screen" /><![endif]-->

The beauty of this approach is that we can avoid adding IE-specific hacks to our existing CSS rules in screen.css (which will be implemented by all other browsers) and instead create browser-specific rules in the relevant IE style sheets. This is the case for the CTM design, as we are calling a number of IE-specific amendments to the CSS, which we'll discuss later in this case study.

To bring all of this grid discussion to relevance, the Climb the Mountains case study layout is built on a robust yet flexible 1000-pixel wide grid. Within this 1000-pixel wide canvas, we have twelve columns, each separated by a clear gutter. Each column is 65 pixels wide, and each gutter is 25 pixels wide, as shown in Figure 11-4.

Figure 11.4. Column layout

Each column has its own structure also. Within the 65-pixel wide column, we have three subcolumns or widths (from left to right) 25 pixels, 15 pixels, 25 pixels (see Figure 11-5).

Figure 11.5. Internal subcolumn widths

These subcolumns allow us to work with a grid within a grid in some ways. They provide additional points of reference, something else to measure to or against when twelve columns might not be tight enough for what we need. Trace down the full screen grab example and see how items are sometimes aligned with the main columns and sometimes with the subcolumns.

There are numerous ways of highlighting the page you are on, and many designers might use some clever PHP scripting to trigger the CSS, perhaps highlighting the Home link on the main navigation if on the homepage. That's cool, but it's just as easy with some smart CSS application reliant on pairing the body class with a navigation class. Let's take a look.

<body class="home">

The page is identified as the home page, and we'll now make sure each navigation item has a relevant class:

<ul id="navigation_pri">
   <li class="nav_home"><a href="#">Home</a></li>
   <li class="nav_routes"><a href="#">Routes</a></li>
   <li class="nav_about"><a href="#">About</a></li>
   <li class="nav_shop"><a href="#">Shop</a></li>
</ul>

In the preceding code snippet, you'll see that the Home link has a class nav_home. We'll also add a body class to the Routes page, so we can test the behavior later on:

<body class="routes">

Next, let's use CSS to apply the styling to the navigation list. Note that we'll position the element absolutely, at specific coordinates from the top and left of the main container.

ul#navigation_pri {
   list-style:none;
   margin:0;
   position:absolute;
   top:0;
   left:415px;
   font-size:19px;
   font-weight:bold;
   font-family:Helvetica,Arial,sans-serif;
}
ul#navigation_pri li {
   float:left;
   margin:0;
   padding:30px 10px 0 10px;
   height:3000px;
}

ul#navigation_pri li a {
   color:#000;
}
ul#navigation_pri li a:hover,
ul#navigation_pri li a:focus {
   color:#333;
   text-decoration:underline;
}

This will give us the basic styled navigation shown in Figure 11-6, but without any indication of the page we are currently viewing. (note that we'll examine the blockquote that sits on top of the navigation layer later in this section):

Figure 11.6. Basic main navigation

The next step is to use a selector to define a relationship between the body class and the navigation home class. Note that we have grouped two identical rules for the home page and the Routes page:

.home ul#navigation_pri li.nav_home,
.routes ul#navigation_pri li.nav_routes {
   background-color:#f5f5f5;
}

The first part of the selector .home or .routes sniffs to make sure we are viewing that page. The styling will only be applied if the ul#navigation_pri element is a child of .home or .routes. If a match is found, the action is performed. This will create the light gray background that fills the entire navigation tab area.

Next, we can define styles for the link behavior, again grouping the identical rules for .home and .routes:

.home ul#navigation_pri li.nav_home a,
.routes ul#navigation_pri li.nav_routes a {
   color:#278dab;
   background:#f5f5f5 0 center no-repeat;
   padding:0 0 0 20px;
}
.home ul#navigation_pri li.nav_home a:hover,
.home ul#navigation_pri li.nav_home a:focus,
.routes ul#navigation_pri li.nav_routes a:hover,
.routes ul#navigation_pri li.nav_routes a:focus {
   text-decoration:none;
   color:#000;
}

Thus, we get the blue text links we need. Finally, we can add some decoration only to the home page link. When the home page is in view, we'll display a small home icon to the left of the Home link:

.home ul#navigation_pri li.nav_home a {
   background-image:url(../images/site/nav_back.gif);
}

This results in the home page display shown in Figure 11-7.

Figure 11.7. The selected Home link

And Figure 11-8 shows our Routes page.

Figure 11.8. The selected Routes link

Now, back to that John Muir quote that sits on top of the main navigation. I truly love that quote – it inspires me to get outdoors regardless of the weather and blow off those web designer's cobwebs. Never forget to get out there, into the real world! On CTM, we could have rotating inspirational quotes in that part of the page to inspire the audience. Here's the markup:

<blockquote id="johnmuir">
  <p>&ldquo;Climb the mountains and get their good tidings. Nature's peace 

will flow into you as sunshine flows into trees. The winds will blow their 

own freshness into you, and the storms their energy, while cares will drop 

away from you like the leaves of Autumn.&rdquo;</p>
  <p><cite>John Muir, 1903</cite></p>
</blockquote>

Aside from using specific character entities for the quotation marks, there's nothing especially unusual there, and we can move on to defining the styling. Earlier, we positioned the ul#navigation_pri element absolutely with position:absolute, 0px from the top and 415px from the left.

ul#navigation_pri {
   list-style:none;
   margin:0;
   position:absolute;
   top:0;
   left:415px;
   font-size:19px;
   font-weight:bold;
   font-family:Helvetica,Arial,sans-serif;
}

We can now define the styling for the blockquote:

div#branding blockquote {
   width:505px;
   float:right;
   padding:0 70px 20px 0;
   background:url(../images/site/branding_johnmuir.jpg) no-repeat right top;
}

But, it sits behind the blue navigation tab area, as shown in Figure 11-9.

Figure 11.9. The blockquote is partly hidden behind the Home link.

However, considering that the navigation is positioned absolutely, if we add position:relative to the blockquote, we can make it appear above the blue tab area:

div#branding blockquote {
   position:relative;
   width:505px;
   float:right;
   padding:0 70px 20px 0;
   background:url(../images/site/branding_johnmuir.jpg) no-repeat right top;
}

And with that, the blockquote will sit nicely above the main navigation, as illustrated in the earlier navigation examples, such as Figure 11-7.

First, let's lay the foundations. On the right-hand side of the CTM case study, you'll see the light yellow Members' Routes panel, featuring walks contributed by other users of the site. There's nothing especially remarkable about the markup, but let's examine it ahead of doing some selectors magic later in the section.

Notice how we group several elements such as h3, p, and img inside each unordered list item. I've often been surprised how many designers don't realize that you can add all sorts of interesting elements inside the li element. Often, you might only see a and maybe img inside the li element, but you can do so much more.

<div id="others_routes">
  <h2>Members' routes <a href="#" class="more">(view all)</a></h2>
    <ul>
      <li>
        <h3><a href="#">Kinderscout circuit</a></h3>
          <p class="dist_elev">13.6 miles | Elevation 2,400ft</p>
          <p class="username"><a href="#">from Glen Swinfield <img 

src="assets/images/content/avatar_swinfield.jpg" class="avatar" 

alt="Glen Swinfield's avatar" /></a></p>
      </li>
      <li>
        <h3><a href="#">Castleton Ridge Walk</a></h3>
          <p class="dist_elev">12.2 miles | elevation 1,343ft</p>
          <p class="username"><a href="#">from Phil Swan <img 

src="assets/images/content/avatar_swan.jpg" class="avatar" 

alt="Phil Swan's avatar" /></a></p>
      </li>
      <li>
        <h3><a href="#">Branston Circular</a></h3>
          <p class="dist_elev">5.7 miles | elevation 1,213ft</p>
          <p class="username"><a href="#">from Gregory Wood <img 

src="assets/images/content/avatar_wood.jpg" class="avatar" 

alt="Gregory Wood's avatar" /></a></p>
      </li>
      <li>
        <h3><a href="#">Ilkley Moor and Otley</a></h3>

<p class="dist_elev">24.7 miles | elevation 2,473ft</p>
          <p class="username"><a href="#">from Jamie Pittock <img 

src="assets/images/content/avatar_pittock.jpg" class="avatar" 

alt="Jamie Pittock's avatar" /></a></p>
      </li>
    </ul>
</div>

By building content in this way, we can collate blocks of information as lists, providing all the hierarchy and styling control that we know and love about lists.

It is then really easy to use basic selectors to target the unordered list within the others_routes containing div and the various elements within the li elements. Note that we're using border-radius, -webkit-border-radius, and –moz-border-radius rules to apply rounded corners to the ul element, and be reassured that we'll discuss these later in this case study.

div#others_routes ul {
   list-style:none;
   border:1px solid #dedeaf;
   background:#ffffcc;
   border-radius:5px;
   -webkit-border-radius:5px;
   -moz-border-radius:5px;
   margin:0;
   padding:10px;
}
div#others_routes ul li {
   margin:0;
   padding:10px 55px 10px 0;
   position:relative;
   border-bottom:1px solid #dedeaf;
   border-top:1px solid #fff;
}

div#others_routes ul li h3 {
   margin-bottom:5px;
}
div#others_routes ul li img {
   position:absolute;
   top:10px;
   right:10px;
}
div#others_routes ul li p.username {
   margin:3px 0 0 0;
   font-style:italic;
   font-size:12px;
}
div#others_routes ul li p.username a {
   color:#666;
}
div#others_routes ul li p.username a:hover,
div#others_routes ul li p.username a:focus {
   text-decoration:underline;
}

In the preceding markup, we're targeting deeper HTML elements with some straightforward descendent selectors. For example, we can strategically target the link hover styling of the username link with div#others_routes ul li p.username a:hover, descending deeper and deeper with the selector until we define our target element–an element owned by every preceding element in the selector, resulting in Figure 11-10.

Figure 11.10. The initial Members' Routes container

Excellent. Our list of member-submitted walks and routes is shaping up nicely, and most might leave it as it is. It looks pretty neat and tidy. But wait! We are perfectionists, and we have powerful CSS at our disposal. Why settle for good when we could have great?

In the next two examples, we'll neaten up the top and bottom of the routes container using some nifty CSS tricks.

If you've ever wondered how a designer targets the first letter or line of a block of text, he or she is probably using a pseudo-class such as :first-letter or :first-line. These cool tricks enable us to style elements based on simple logic.

The :first-child pseudo-class targets only an element that is the first child of a containing element.

In this case study, I have my container of member's walks, with each item's detail added within an unordered list. Each li element has the same padding and thin border at the top and bottom.

div#others_routes ul li {
   margin:0;
   padding:10px 55px 10px 0;
   position:relative;
   border-bottom:1px solid #dedeaf;
   border-top:1px solid #fff;
}

This keeps the list content spaced evenly, but I'd like to reduce the amount of padding for only the top list item (in the example, this is the Kinderscout ridgewalk circuit walk). In fact, I don't want any padding at the top, and I don't want a border either.

So, bring on the pseudo-class. Here, we create a new rule, and we use the same selector to target the unordered list items inside the #others_routes containing div, but we add :first-child immediately after the li element, essentially saying "go in to the container, find the unordered list, and perform the following style override only on the very first li element you find."

div#others_routes ul li:first-child {
   padding-top:0;
   border-top:none;
}

As Figure 11-11 shows, the Kinderscout ridgewalk circuit item has no top border or top padding and nestles snugly under the roof of the parent container.

Figure 11.11. The top padding and border has been successfully removed.

It's as simple as that, but it's a very powerful method of targeting a specific element, with a million and one uses. And now that we've dealt with the top of our contained list, let's see what we can do with the bottom of it.

Having just introduced you to :first-child, now would ideally be a fitting moment to introduce the usefulness of :last-child, a method of targeting the last instance of a child element within a specific parent container. The approach is much the same as with :first-child, so feel free to experiment with this. Unfortunately, only recent versions of browsers such as Safari, Firefox, Google Chrome, and Opera support this method, so we need to be mindful of IE 6, 7, and 8 and employ an alternative approach, thanks to adjacent sibling selectors.

In this example, we now need to do the reverse of what we just did with the :first-child pseudo-class. As we previously discussed, each unordered list item has top and bottom padding and a top and bottom border. We successfully turned off these styles for the first li element, now we need to turn them off for the last element.

But how do we do that? How does the style sheet know which is the very last element in a certain group, and how can we accurately target it. This requires some kind of dark arts, right? Well, sort of.

Adjacent sibling selectors consist of several selectors separated by the + combinator. This matches an element that is the next sibling to the first element. Note that elements must have the same parent, and the first must immediately precede the second.

So, as with our :first-child example, we again target the others_routes parent div, and we then methodically drill down through the selectors until we hit the element we wish to style. Our unordered list will always only have four li elements, and that is the key to making this work:

div#others_routes ul li + li + li + li {
   padding-bottom:0;
   border-bottom:none;
}

So here, we've created a selector that thinks "Ah, when in the others_routes div, find the unordered list, count along until we match the fourth li element, and apply styles to that only." Simple.

Thus, the result, shown in Figure 11-12, presents the fourth li element without bottom padding or a bottom border, adding further neatness and attention to detail, simply by making the most of the CSS selectors at our disposal.

Figure 11.12. The bottom border and padding has been removed successfully

We'll being with one simple 310 × 185-pixel JPG named campsite.jpg (see Figure 11-13). Then, we'll apply a caption with white text onto a semitransparent grey overlay at the base of the image, and then apply a Polaroid-style photo border around the image, ensuring it has perfect rounded corners and a believable drop shadow. Thankfully, we can do all of that with CSS.

Figure 11.13. The initial campsite.jpg image

The markup is pretty simple. Our image and caption need to be contained within one div, named captioned_image for the purposes of this example. The paragraph is given class="caption", so we can target it directly, and for now, that is it.

<div class="captioned_image">
   <img src="assets/images/content/campsite.jpg" alt="From the campsite" />
   <p class="caption">From the campsite bridge towards the village, Great 

Gable and Lingmell.</p>
</div>

With that markup in place, we can now experiment with three of the hottest CSS 3 techniques at our disposal.

Colors may be specified in a number of ways. Many specify color as an RGB triplet in hexadecimal format (a hex triplet). Others often use their common English names in some cases. It is also possible to use RGB percentages or decimals. The following examples are all valid for the color red:

color: #f00
color: #ff0000
color: red
color: rgb(255,0,0)
color: rgb(100%, 0%, 0%)

RGB stands for red, green, and blue and is a device familiar to most designers. RGBa introduces a fourth channel – an alpha channel that deals with transparency. The beauty of CSS 3 is that we can continue to specify color with RGB but also set the alpha transparency of that color with a fourth decimal value. We can use anything from 0.0 (totally transparent) through to 1.0 (totally solid).

In the following example, we again declare the color red with RGB, but also set a 50 percent transparency by declaring 0.5 as the alpha transparency.

color: rgb(255,0,0,0.5)

The RGBa value is assigned only to the element we declare, so any child elements will not inherit the transparency, which is a clear distinction from the opacity property, which will always be inherited.

So, for the CTM site, the following declarations will perform the first bit of magic for our photo and caption. We position the containing div relatively and then the caption absolutely, so that it can be positioned exactly where we wish above the image.

div.captioned_image {
   position:relative;
}
div.captioned_image p.caption {
   position:absolute;
   bottom:0;
   left:0;
   margin:0;
   color:#fff;
   font-size:13px;
   line-height:16px;
   font-style:italic;
   padding:5px;
}

We next declare the RGBa value as rgba(0,0,0,0.5) where the first three values combine to give us black and then the alpha transparency value of 0.5 sets a medium transparency, which can be tweaked until we're happy with the overall effect.

div.captioned_image p.caption {
   position:absolute;
   bottom:0;
   left:0;
   margin:0;
   background:rgba(0,0,0,0.5);
   color:#fff;
   font-size:13px;
   line-height:16px;
   font-style:italic;
   padding:5px;
}

This gives us the exact caption overlay we wanted, as shown in Figure 11-14.

Figure 11.14. The transparent caption in place

As with many exciting new CSS 3 techniques, some browsers are playing catch-up, most notably Internet Explorer (including the current IE 8), which will not render the alpha-transparency. For example, IE 7 will instead default to a reasonably acceptable solid layer, much like we'd see if serving a transparent PNG graphic without forcing alpha transparency support (see Figure 11-15).

Figure 11.15. The caption overlay as rendered by IE 7

IE 8, which still does not support RGBa, will simply render the caption text on top of the image without any kind of background. To get around this problem, we can add a rule to the screeni-ie8.css style sheet to ensure a gray background is placed behind the text.

div.captioned_image p.caption { background:#666; }

The important lesson is not to be put off by IE and its failings. I'd encourage all of you hexadecimal triplet lovers to start experimenting with the incredible flexibility of RGBa straight away, on a variety of elements within your layouts. You will never look back, and everything will be much clearer!

I'm still surprised when I speak to designers who aren't aware that classes can be combined to bring greater flexibility to elements.

For example, you might use class="profile" several times on any given page, assigning common color and layout information. However, let's say you wish to change only the background color based on a variable such as whether or not the user is a member or a guest. Instead of creating two profile styles just to supply different color references, you could simply keep colors as separate rules, and combine these with the profile class.

.profile {
width:300px;
margin:0 10px;
padding:10px;
font-size:11px;
}
.guest {
background-color:#ff9900;
}
.member {
background-color:#ff0000;
}

This style could then be applied using combined classes depending on user status. Any number of classes can be combined, simply by separating each with a space, as follows:

<div class="profile member">
<p>Member options...</p>
</div>

Bringing this to the CTM site, we can use combined classes to optionally add a frame around only certain captioned images. Notice that, alongside captioned_image, we have added the class polaroid:

<div class="captioned_image polaroid">
   <img src="assets/images/content/campsite.jpg" alt="From the campsite" />
   <p class="caption">From the campsite bridge towards the village, Great 

Gable and Lingmell.</p>
</div>

We can now define the styling for this polaroid frame, and that calls for a few more tricks from the CSS 3 specification.

In the previous edition of CSS Mastery, both Andy and myself detailed a useful but somewhat laborious technique for adding frames and shadows to images. This involved a couple of divs and background images that needed to be very carefully styled and positioned. Yep, it was tough back in 2005.

This brings us to the border-radius property, which, essentially, brings rounded corners to elements using pure CSS declarations. Sadly, Internet Explorer (hello again) doesn't support this property at all, so IE corners will still be squared off, which seems acceptable to me. Currently, the same goes for the ever-evolving Opera browser.

At the time of this writing, no popular browsers are pledging support for the standard border-radius property, and so while it is important to include the declaration from a forward-thinking standpoint, we also need to add two further declarations in the short-term – one for Mozilla-based browsers such as cuddly Firefox and one for WebKit-based browser such as the ever-switched-on Safari (which also supports elliptical corners). For more information, examples and some cool tricks, view descriptions and examples over at http://www.the-art-of-web.com/css/border-radius/.

All three declarations are clearly defined here:

.polaroid {
   border:5px solid #f00;
   border-radius:5px;
   -webkit-border-radius:5px;
   -moz-border-radius:5px;
}

Seeing as white on white isn't exactly great for demonstrations, note that I have specified a temporary red border so that you can see what is happening in Figure 11-16. You'll see that each corner is rounded around a 5px radius. This is actually the radii of a quarter eclipse defining the exact corner. As with margin, padding, and border, there are four individual border-radius properties—one for each corner of an element—and one shorthand property.

Figure 11.16. Using a red border clearly shows the rounded corners

Now, how much easier is that compared with the methods we were describing back in the first edition? With our corners rounded, we can now think about applying a simple drop shadow to give the image some sense of affordance.

CSS 3 brings us a significantly simpler method of creating neat drop shadows for the Safari 3 and above and Firefox 3.5 and above browsers. The property takes three lengths as its attributes—these being the horizontal offset, the vertical offset, and the blur radius—and finally a color.

If we apply a positive value to the horizontal offset of the shadow, the shadow will be on the right-hand side of the element. A negative offset will put the shadow on the left of the element.

If we apply a negative value to the vertical offset, the shadow will be appear on top of the element, whereas a positive value would place the shadow below the box.

The blur radius is really handy. If the value is set to 0 the shadow will be sharp, and the higher the number, the more blurred it will become.

Adding this to our polaroid class, we can work with the four values to create a drop shadow that will be to the right and bottom of our captioned image, with a 5-pixel blur in a medium grey, as follows:

.polaroid {
   border:5px solid #fff;
   border-radius:5px;
   -webkit-border-radius:5px;
   -moz-border-radius:5px;
   -webkit-box-shadow:1px 1px 5px #999;
   -moz-box-shadow:1px 1px 5px #999;
}

Brilliantly, the box-shadow will respect the border-radius value we gave earlier, so that we have a rounded picture frame and complimentary shadow working in perfect harmony, as shown in Figure 11-17.

Figure 11.17. Our image now has a caption, frame, and rounded corners

Alas, this isn't yet the case in Internet Explorer, as shown in Figure 11-18.

Figure 11.18. Internet Explorer doesn't render the CSS 3 properties, but the result is acceptable

We noted the lack of RGBa transparency for the caption earlier, and you'll also see that our frame is rendered as a grey square frame. It has the same width (5px) but is not white and not rounded. Obviously, we're also bereft of that beautiful shadow. Remember, we have at least ensured the caption text sits on a gray background by adding a rule to our screen-i8.css style sheet. Oh well, maybe things will be fixed in IE by the time I have grandchildren.

Earlier in this case study, we looked at the CSS 3 border-radius property, creating a simple rounded-corner frame for an image.

Here, we will use similar properties to add rounded corners to a basic shape, specifically the selected list item in our navigation.

We're using browser-relevant varieties of border-radius-top-left and border-radius-top-right to only apply the corners to the top of the shape:

ul#route_nav li.cur {
     background:#dff1f1;
     -moz-border-radius-topleft:3px;
     -webkit-border-top-left-radius:3px;
     -moz-border-radius-topright:3px;
     -webkit-border-top-right-radius:3px;
}

This simple adjustment to the CSS will give us the subtle but sexy tab shown in Figure 11-22 in Firefox and Safari.

Figure 11.22. The selected tab now has rounded top corners, using only CSS

With the navigation finally resolved, we can now move on to the altogether more juicy elevation data.

Below the Your latest route navigation bar, we'll now add the statistics pane that appears by default in the case study, the Elevation chart.

<div id="route_elevation">
</div>

The most important point to be aware of here is that (as mentioned earlier) we're using the route_elevation div to clear the floated navigation lists. So, you'll see clear:both defined for this div immediately.

.home div#route_elevation {
   clear:both;
   background:#dff1f1 url(../images/site/elevation_home.gif) 0 bottom no-repeat;
   position:relative;
   height:195px;
}

We also position the elevation div relatively, as this will assist us later when plotting li elements (we'll add these shortly) on the chart. We also apply the background image elevation_home.gif (see Figure 11-23) with one shorthand rule for color, image, position, and repeat properties.

Figure 11.23. The elevation background image

This gives us the image shown in Figure 11-24 with the navigation data and elevation chart combined.

Figure 11.24. Navigation and elevation container combined

Next, we can create a new unordered list that will contain our elevation references. Each reference will feature a height and associated image from Flickr. Note that each list has a unique class, such as marker_01 and marker_02.

<div id="route_elevation">
  <ul>
    <li class="marker_01">
      <a href="#">
        <strong>1,442 ft</strong>
          <img src="assets/images/content/elevation_photo_1.jpg" 

alt="At 1,442 ft: Photo of the village" />
      </a>
    </li>
    <li class="marker_02">
      <a href="#">
        <strong>3,133 ft</strong>
          <img src="assets/images/content/elevation_photo_2.jpg" 

alt="At 3,133 ft: Pennine Way" />
      </a>
    </li>
    <li class="marker_03">
      <a href="#">
        <strong>2,398 ft</strong>
          <img src="assets/images/content/elevation_photo_3.jpg" 

alt="At 2,398 ft: Cup of tea" />
      </a>
    </li>
    <li class="marker_04">
      <a href="#">
        <strong>1,286 ft</strong>
          <img src="assets/images/content/elevation_photo_4.jpg" 

alt="At 1,286 ft: Wool packs" />
      </a>
    </li>
  </ul>
</div>

We'll use these unique classes to define the display position for each list item on the chart, basing the coordinates from the top and left of the elevation chart container.

.home div#route_elevation li.marker_01 {
   top:123px;
   left:97px;
}
.home div#route_elevation li.marker_02 {
   top:50px;
   left:237px;
}
.home div#route_elevation li.marker_03 {
   top:95px;
   left:377px;
}
.home div#route_elevation li.marker_04 {
   top:137px;
   left:517px;
}

It is still early in the process, so all we have so far are a bunch of list items each with height and image snuggling up to the left of the container (see Figure 11-25).

Figure 11.25. Our list items are snuggling in a line to the left

Before we force the list items to sit in their intended positions, let's first hide the images, and choose a more appropriate marker graphic. The graphic we'll use is the typical list bullet graphic shown in Figure 11-26 and named elevation_marker.png.

Figure 11.26. Our marker graphic

On to the list styling now, we'll set styles such as font-family, font-size, remove or define margin and padding, and so on. Importantly, we declare the elevation_marker.png background image for the div#route_elevation ul li element, applying a 15-pixel margin-left to create space between the bullet and the elevation height.

div#route_elevation ul {
   list-style:none;
   margin:0;
   font-family:Verdana,sans-serif;
   font-size:9px;
   font-weight:bold;
}
div#route_elevation ul li {
   margin:0;
}
div#route_elevation ul li a {
   color:#333;
   display:block;
   background:url(../images/site/elevation_marker.png) no-repeat 0 5px;
   padding:0 0 0 15px;
}
div#route_elevation ul li a:hover,
div#route_elevation ul li a:focus {
   color:#000;
}
div#route_elevation ul li a img {
   display:none;
}

Vitally, we have targeted the Flickr image thumbnails with div#route_elevation ul li a img, using display:none to prevent the images from being displayed.

The elevation chart now shows our list styled more suitably, but still snuggling up to the left of the container (see Figure 11-27).

Figure 11.27. Our list markers are styled but still snuggling to the left

To make sure the list elements display according to their positioned coordinates, all we need to do is position them absolutely using position:absolute as follows:

div#route_elevation ul li {
   margin:0;
   position:absolute;
}

This repositioning works because the parent container is positioned relative to its own parent. If it wasn't, our absolutely positioned list items would base their coordinates from the top and left of the browser window, which wouldn't do at all. As Figure 11-28 shows, the elevation points are now plotted accurately on the chart.

Figure 11.28. Thanks to positioning absolutely, the markers sit at the correct coordinates

We now need to deal with the images we hid earlier and bring them into view when we roll over each elevation point.

Our targets are the :hover and :focus pseudo-link states, and with control of those, we can easily apply declarations that will bring the images into view on rollover.

Notice that after setting height and width, we again position the elements absolutely, and we use negative top and right values to position the images exactly where we want them in relation to the list marker.

div#route_elevation ul li a:hover img,
div#route_elevation ul li a:focus img {
   display:block;
   width:40px;
   height:40px;
   padding:4px 9px 10px 12px;
   position:absolute;
   top:-16px;
   right:-65px;
}

As a result, on rollover, we get the thumbnail pop-up as expected, sitting just to the right of the marker. We added some padding around the thumbnail too (see Figure 11-29).

Figure 11.29. On hover, the basic image thumbnails appear

It is now time to make use of that padding and fit a neat frame and arrow graphic behind the thumbnail images. I'm using elevation_marker_image_bg.png here, which is shown in Figure 11-30. Note that the shadow is added to the graphic at Photoshop stage and it's exported as a transparent PNG.

Figure 11.30. Neat graphic to sit behind our image thumbnails

All that remains is to apply that background image to the CSS as follows:

div#route_elevation ul li a:hover img,
div#route_elevation ul li a:focus img {
   display:block;
   width:40px;
   height:40px;
   padding:4px 9px 10px 12px;
   position:absolute;
   top:-16px;
   right:-65px;
   background:url(../images/site/elevation_marker_image_bg.png) no-repeat 0 0;
}

If you're doing something similar, you may well need to fiddle with exact padding, positioning, and so forth, but the basic building blocks are all here. As a result of all the work we've done in this section, we now have a nicely executed Your latest route area of the page, with an interactive elevation chart plotting Flickr images, shown in Figure 11-31.

Figure 11.31. The completed "Your latest route" section with tidy image rollovers

Of course, all of this would ultimately need to be hooked up to a powerful CMS to really be exceptional, but well, this is a CSS book.