Web Development

Backgrounds in web design: Adding navigation

Ryan Boudreaux continues his project series on creating background web designs with this installment, which shows you how to add navigation links utilizing CSS to define multiple clickable hotspots.
Continuing where we left off from my previous post "Backgrounds in Web Design: Going from PSD to Code," in this post, we will create the navigation links in the header utilizing CSS to define multiple clickable link areas, or hotspots, within a single image, Header.gif shown in Figure A. In addition, I will also define CSS text styles for the anchor text links for the generic restaurant theme template. All working files and images are included in the download file. The series so far:

Figure A

CSS Image Mapping

Document the pixels

We will be creating an image map of sorts using the header image slice from the previous post. I say "of sorts" because it is not a true "image map," but a set of CSS styles that will create linkable hot spots within an HTML document .With Photoshop open and viewing the Header.gif file found in the download, make sure the grid view is set to pixels, as we will be using the grid to determine the pixel positions as reference points when creating the CSS styles. Using the pixel grid view in Photoshop for the header image, I made several notes, recording the width and height dimensions for each "button" section, and also noted the top and left positions of each of the five "button" sections. My notes are displayed below:

  • Home- width: 155px, height: 75px, top: 52px, left: 85px
  • Menu - width: 180px, height: 72px, top: 48px, left: 245px
  • Recipes - width: 160px, height: 74px, top: 48px, left: 430px
  • Blog - width: 150px, height: 75px, top: 45px, left: 594px
  • Reservations - width: 205px, height: 80px, top: 45px, left: 748px

These notations will be used for future reference when it comes time to add the styling later on in our CSS.

Semantic markup

With Dreamweaver open, we now need to create the semantic markup in our HTML file; see the file Page_v3.html in the download. We will add an unordered list and use the Header.gif file as the background image. The following markup is added inside the <div id="header"> within the HTML file as displayed below:

<div id="header">

          <ul id="menuList">

                <li id="home"><a href="Page_v3.html">Home Page</a></li>

                <li id="menu"><a href="menu.html">Menu</a></li>

                <li id="recipes"><a href="recipes.html">Recipes</a></li>

                <li id="blog"><a href="blog.html">Blog</a></li>

                <li id="reserve"><a href="reservations.html">Reservations</a></li>

          </ul>

The unordered list is the only semantic markup that is added to the HTML document for the navigation within the header, all the remaining work is accomplished within the CSS file style_v3.css, which is also found within the download. Please note that the anchors to menu.html, recipes.html, blog.html, and reservations.html are just place holders. There are no existing HTML document pages; however, the anchors can be assigned to any active page for testing. Or, copies of the home page can be made and renamed accordingly.

CSS Styling If you have been following along from the previous post, you will know that in the original CSS the #header element contained the "background:url(images/Header.gif);" declaration, this has now been moved to a new style element, the ul#menuList, as shown below:
ul#menuList {

      list-style: none;

      background:url(images/Header.gif);

      position: relative;

      padding-bottom:240px;

      background-position:center;

      background-repeat:no-repeat;

      overflow:auto;

      color:#030303;

      z-index: 1;

There are several items to note here; the declaration to pay attention to in the ul#menuList element is its position value of relative, also the padding, overflow, and z-index declarations are moved into this element from the original #header element. The unordered list now appears in the upper left side of the header div as shown in Figure B:

For ease of positioning the li elements, I've added a 1px red border to each, rendering a guideline to visualize the hotspots. We will remove the border when we're done aligning the li elements. Moreover, all of the li elements have a position value of absolute. Below is the ul#menuList li element added to the CSS:

ul#menuList li {

      position: absolute;

      border: 1px solid #FF0000;

}

If you review the HTML document page now, as shown in Figure C, you'll see that the li elements are all bunched up in the left hand corner of the header division, and overlapping one another. This is because they all have an absolute position, but we have not added any left, top, right, or bottom property value declarations.

Figure C

With the notes we took from our Photoshop pixel grid view as reference starting points, I then created the individual styles that id each li, then tweaked the declaration values as I reviewed the HTML document, and made adjustments accordingly. Right below the ul#menuList li element styles, I have added the following styles as shown below:

#home {

      width: 155px;

      height: 75px;

      top: 52px;

      left: 85px;

}

#menu {

      width: 180px;

      height: 72px;

      top: 48px;

      left: 245px;

}

#recipes {

      width: 160px;

      height: 74px;

      top: 48px;

      left: 430px;

}

#blog {

      width: 150px;

      height: 75px;

      top: 45px;

      left: 594px;

}

#reserve {

      width: 205px;

      height: 80px;

      top: 45px;

      left: 748px;

}

Each li element now has a height and width value, in addition to a left and top positioning property. The resulting document view with the positioning of the li, link anchors, and defined hotspots within is seen in Figure D:

Notice in the current HTML document that the hyperlink anchors are still visible within the hotspots, and our li elements are the only "clickable" sections of the anchor elements. To get the entire li element to be clickable we need to add the ul#menuList li a style to the CSS creating declarations for the anchor elements as seen below:

ul#menuList li a{

      display: block;

      height: 100%;

      text-indent: -9000px;

}

A few notes on this style: The display property value is now block, instead of the default of inline, and this allows a height value, with a setting of 100%. Also, the negative text-indent value of -9000px allows the text to only display if CSS is disabled; otherwise we don't want it shown on the display. Take a look at the HTML document page now and hover over the "hotspots," notice now that the hotspots include the entire li element (see Figure E). At any time you can go back to adjust the width, height, top, and left settings of the hotspots to align them to the respective background image areas and add spacing between as I have done. If you needed to add another "button" to the page all you need is to add another li element and create the positioning according to the image placement.

Figure E

We can now remove the border: 1px solid #FF0000; declaration from the ul#menuList li element in our CSS since our positioning is set for the navigation.

In the next installment, I will demonstrate adding the text style elements for the header, main content, and footer divisions.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

6 comments
Art_Jeffries
Art_Jeffries

Please, can you add this as a PDF download as well, just like everyone else?

leonine045
leonine045

really informative:)thank you so much:)

bear_it999
bear_it999

Thanks for the informative article. Since I work for a public institution, I'm legally required to accomodate those who use screen reader software due to visual impairment. For that reason, we have refrained from using images as links. Just curious if this CSS solution has been tested against current accessibility standards? Thanks for any insight (pun intended) you can provide.

Spitfire_Sysop
Spitfire_Sysop

I think your article is great but it doesn't have to be Adobe specific. If Adobe is not paying you to drop their names then you should certainly ask for some ad revanue here. If they don't give you any money to advertise for them then you could use vendor neutral speech when discussing your process. Instead of saying "With Dreamweaver open..." You could say "Open up your HTML file and drop in your semantic markup..." or something like this. I know that your previous tutorial was "...from PSD to Code," and this is an adobe proprietary format. Not everyone pays large sums of money for the Adobe suite. There is a long list of photo editing software and IDEs that provide sytax highlighting for HTML. If you use Amaya from the W3C you get standard compliant code validation in your editor and you can see your code live in the same window much like dreamweaver without all the auto-fluff. http://www.w3.org/Amaya/ Check it out.

Ryan Boudreaux
Ryan Boudreaux

I did test the HTML document included in the download with this tutorial with the text to speech reader Spekonia, which is a free download. The navigation menu descriptions are read aloud, i.e Home, Menu, Recipes, Blog, Reservations. I have not tested it across any other TTS application. I would expect that since the CSS is adding styling within the header navigation, and that the linking code is within the HTML that it would read in most TTS applications.

bear_it999
bear_it999

Thanks for the info and for your efforts Ryan. The results sound encouraging!

Editor's Picks