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.