Date Originally Written: May 2005
Author: Jason Gonzalez

This tutorial has relocated to this location as of August 2008. To see it in its original location, follow this link: www.jgpws.com/tutorials/css_rollovers_1/css_rollovers1.html.

In this, my very first tutorial, we will learn how to create Cascading Style Sheet rollovers just like the ones found within the Portfolio site here. This tutorial is geared toward CSS and HTML beginners, so feel free to skip ahead if you already know the basic material.

Also, of special note is to mention that this tutorial is an adaptation of CSS Uberlinks List Menus, to be found at the Project Seven website. Just look for CSS Lab in their Tutorials section.

  • The first step for the purposes of this first tutorial will be to create a basic blank html page
    • Type the following into a text editor and Save As “basic.html” (without the quotes):
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"/>
      <html>
      <head>
      <title>Untitled 1</title>
      </head>
      <body>
      
      </body>
      </html>

This text represents a basic web page with a DOCTYPE identifier (which identifies the page to a browser), head and body tags.

  • Create our folder structure
    • Create a new folder within the directory of your choice with a descriptive title such as “css_exercise1”
    • Create a new folder inside “css_exercise1” and name it “buttons”
    • Save the basic page as “rollovers01.html” in “css_exercise1”, each without the quotes
  • Get our images
    • Right-click the above images and choose “Save Image As” from your browser. Internet Explorer might not preserve the original titles and file format (perhaps if you are not in Administrator mode). If that is the case then save the top button as button_pf_uf.gif and the bottom button as button_pf_over.gif
    • Save these images in the “buttons” folder
  • The next step is to create a separate style sheet file
    • Open a new window in your text editor (for Notepad, open the program a second time by double-clicking it’s icon)
    • From within “rollovers01.html”, type this just below the <title> tag:
      <link rel="stylesheet" href="navbar.css">
      This creates a link to a style sheet we have not yet created
    • Create a new file and save as “navbar.css” in “css_exercise1” without the quotes. This will be the css file that we will format our links list from
  • Link One
  • Link Two
  • Link Three
  • Link Four
  • Link Five
  • Link Six
  • Now we can create our list in the html page as shown above
    • In “rollovers01.html”, type an unordered list just like this one
    • The html for this looks like this:
    • <ul>
       <li>Link One</li>
       <li>Link Two</li>
       <li>Link Three</li>
       <li>Link Four</li>
       <li>Link Five</li>
       <li>Link Six</li>
      </ul>
    • Save the file “rollovers01.html”
  • Now, we will add actual links, empty links and wrap them in a div tag, which we will need later. A div tag groups all of the links into one contained area, where we can apply all of the style sheet’s style rules to the list at one time
    • Type in the following changes:
    • <div>
      <ul>
       <li><a href="#">Link One</a></li>
       <li><a href="#">Link Two</a></li>
       <li><a href="#">Link Three</a></li>
       <li><a href="#">Link Four</a></li>
       <li><a href="#">Link Five</a></li>
       <li><a href="#">Link Six</a></li>
      </ul>
      </div>
    • Your links list should now look like the list below (ignore this page’s style sheet for now)
    • And that is all the work that needs to be done for the “rollovers01.html” page outside of minor adjustments. All of the rest will be handled with the style sheet
  • And now, this should be your links list (I adapted a picture from the original tutorial, as its interactivity cannot be replicated here):

  • Let’s change the formatting of our text, add some color to the background and define a box where our links will fit so the background color does not span the width of the entire page
    • Add a new entry above #navlist ul:
    • #navlist ul {
      list-style-type: none;
      }
    • Then add the following to #navlist ul
    • #navlist ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      font-size: 0.7em;
      font-family: Arial, Helvetica, sans-serif;
      background-color: #333333;
      }
  • Now, let’s loose some more space between each list object
    • Add a new entry of text just below #navlist ul style rule (after both the opening and closing curly braces)
    • Type this in “navbar.css”:
    • #navlist li {
      margin: 0;
      }
  • Put the links inside a block, add our images, add padding around
    • And, we can put our text links in a block display, which will set each link to have space around to allow our images
    • Add our images using background-image:, background-repeat: and background-position:
    • After adding the images, add padding around the top, bottom and left. After playing around with the spacing to accommodate the designs on the left side of the buttons, I came up with 10px for the top and bottom and 40px on the left
    • Add a margin to the left side of 20px (to approximately center the buttons)
    • Add a #navlist a tag at the bottom of the style sheet as follows:
    • #navlist a {
      display: block;
      margin-left: 20px;
      padding-left: 40px;
      padding-top: 10px;
      padding-bottom: 10px;
      background-color: #333333;
      background-image: url(buttons/button_pf_up.gif);
      background-repeat: no-repeat;
      background-position: 0% 50%;
      }
    • The list as it now should look is shown below:
  • Create our four rollover states: a:link, a:visited, a:hover and a:active in that order
    • Type the following four lines below the previous entry:
    • #navlist a:link {
      color: #FFFFFF;
      text-decoration: none;
      }
      
      #navlist a:visited {
      color: #FFFFFF;
      text-decoration: none;
      }
      
      #navlist a:hover, #navlist a:active {
      color: #FFFF00;
      background-repeat: no-repeat;
      background-position: 0% 50%;
      text-decoration: underline;
      background-image: url(buttons/button_pf_over.gif);
      }
    • Of special note is the a:hover tag, where we add in our background image that swaps in when we rollover it
    • And, the final product is shown below

In Microsoft Internet Explorer 6, I viewed the image rollover links list and it leaves gaps between each link box as also explained (toward IE5) in Uberlink CSS Rollovers 2004. There is a fix to this, which I will explain soon in an upcoming tutorial.

And on a final note, these rollovers can use any images you would like to use for a different look. The images used here have a height of 30px and width of 120px. Simply swap in your own images at that size or adjust the padding on the style sheet for a different size image, and change the image filenames if necessary.

Advertisements