This tutorial requires knowledge of how to create a bump map in GIMP 2.6 or a prerequisite of my previous tutorial, Creating a Chrome Effect in GIMP 2.6.

For this follow up tutorial I have created a drawing of a crescent moon with a clouds filter and bump map to demonstrate how this affects aliasing.

• Below is our drawing of a crescent moon. There are three layers: a Background layer, New Layer#1 (bump map layer) and New Layer (drawing layer). The bump map here was set to 10 pixels. If we look at the edges, we can see that they are jagged; this is because after using the fuzzy select tool to select and filling with a color or texture, GIMP does not anti-alias the jagged lines. I assumed there was nothing that can be done
• 
• 
• In this case, we select the area around the moon shape on the drawing layer (New Layer) and Invert (Crtl+I) the selection. Then we Select the Border (Select > Border) by 2 pixels
• 
• We then apply a Gaussian Blur of 4 pixels horizontal and vertical. Select None (Shift+Ctrl+A)
• It is looking good, but we’re not done. Reselect the area outside the drawing. This time we’ll Grow (Select > Grow) the selection by 1 pixel
• While the area is still selected, we change the selection to a path (Select > To Path). Hit the delete key. The before and after is shown below
• 
• 

In conclusion, the above is a quick fix for GIMP anti-aliasing nightmares. In this simple example, the differences may be subtle, but in drawings with many more selection based fills, filter effects and instances of using the Fuzzy Select tool, these methods may be what you need to give your drawing a polished look.

We’ve all seen them on almost every website– those stylish rollover and button designs made with CSS. Some only have links that change colors when you roll the mouse over them, some have fancy borders, others change the enclosing box’s colors. The best thing about these is that you can create snazzy navigation menus and links lists without having to purchase expensive digital imaging software. Today, I will show various button designs along with the code for them.

*This tutorial assumes that you know how to create an embedded or external style sheet. Also, of important mention here is how to apply the style information to the unordered list. You would simply place a <div> tag around the list and apply an id tag as shown below:

<div id="example1">
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
...
</ul>
</div>

Here is the code for “example 1 vertical”:

#example1vert {
font-family : "Times New Roman", serif;
font-size : 10px;
}

#example1vert ul {
background-color : white;
width : 96px;
list-style-type : none;
border : 1px solid black;
padding : 0;
margin : 0;
}

#example1vert ul li {
border-bottom : 1px solid black;
}

#example1vert ul li a:visited {
color : purple;
}

#example1vert ul li a:link {
color : blue;
}

#example1vert ul li a:hover {
color : red;
}

To see the real example, click the image and scroll down to the horizontal buttons on the corresponding page. Below is the code for “example 1 horizontal”:

#example1hor {
font-family : "Times New Roman", serif;
font-size : 10px;
text-align : center;
}

#example1hor ul {
background-color : white;
list-style-type : none;
padding : 0;
margin : 0;
width : 384px;
}

#example1hor ul li {
display : inline;
}

#example1hor ul li a {
margin-left : 0;
margin-right : 0;
border : 1px solid black;
}

#example1hor ul li a:visited {
color : purple;
}

#example1hor ul li a:link {
color : blue;
}

#example1hor ul li a:hover {
color : red;
}

This information has been updated as of October 15th, 2008 to address gap issues in Internet Explorer 6 (and up) that relate to displaying list items as block. Thankfully, the website 456 Berea St offers a fix for this bug located at this address: 456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/. The new information will be commented after the code information.

And below is the code for this Vertical rollover list:

#example2vert {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : center;
}

#example2vert ul {
background-color : #333366;
width : 118px;
list-style-type : none;
padding : 0;
margin : 0;
}

#example2vert ul li {
color : white;
}

#example2vert ul li a:link, #example2vert ul li a:visited {
color : #9999FF;
text-decoration : none;
padding : 3px;
display : block;
}

#example2vert ul li a:hover {
color : white;
background-color : #6666CC;
border : dashed 1px #9999FF;
}

Internet Explorer designs must use the following bug fix and conditional comment. You can create an embedded style rule in the head tag of your html page:

<!--[if lt IE 8]>
  <style type="text/css">

    #example2vert ul li a {
    display : inline-block;
    }
  </style>
<![endif]-->

And below this paragraph is the Horizontal version of the list and the code.

#example2hor {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : center;
}

#example2hor ul {
background-color : #333366;
width : 512px;
list-style-type : none;
padding : 3px;
margin : 0;
}

#example2hor ul li {
color : white;
display : inline;
}

#example2hor ul li a:link, #example2hor ul li a:visited {
color : #9999FF;
text-decoration : none;
padding-left : 3px;
padding-right : 3px;
}

#example2hor ul li a:hover {
color : white;
background-color : #6666CC;
border : dashed 1px #9999FF;
}

…And below is the code:

#example3vert {
font-family : Georgia, "Times New Roman", serif;
font-size : 12px;
font-style : italic;
text-align : left;
}

#example3vert ul {
background-color : #FFFFCC;
width : 96px;
list-style-type : none;
/* Margin and padding must be set to zero or there will be extra space */
/* to the left of the list */
margin-left : 0;
padding-left : 0;
border : 4px ridge #FFCC99;
}

#example3vert ul li {
color : black;
}

#example3vert ul li a {
padding : 3px;
display : block;
color : #006633;
text-decoration : none;
border : 2px outset #FFCC99;
}

#example3vert ul li a:hover {
color : #CC3300;
border : 2px inset #FFCC99;
text-decoration : underline;
}

Internet Explorer fix provided by 456Bereastreet.com.

<!--[if lt IE 8]>
  <style type="text/css">
    #example3vert ul li a {
    display : inline-block;
    }
  </style>
<![endif]-->

And below is the horizontal look with the code afterwards:

#example3hor {
font-family : Georgia, "Times New Roman", serif;
font-size : 12px;
font-style : italic;
text-align : center;
}

#example3hor ul {
background-color : #FFFFCC;
width : 576px;
padding : 6px;
list-style-type : none;
border : 4px ridge #FFCC99;
}

#example3hor ul li {
display : inline;
color : black;
}

#example3hor ul li a {
padding : 3px;
color : #006633;
text-decoration : none;
border : 2px outset #FFCC99;
}

#example3hor ul li a:hover {
color : #CC3300;
border : 2px inset #FFCC99;
text-decoration : underline;
}

#example4vert {
font-family : "Times New Roman", serif;
font-size : 12px;
font-style : italic;
text-align : left;
}

#example4vert ul {
width : 96px;
list-style-type : none;
/* Margin and padding must be set to zero or there will be extra space */
/* to the left of the list */
margin-left : 0;
padding-left : 0;
}

#example4vert ul li {
color : black;
}

#example4vert ul li a {
padding : 3px;
display : block;
color : #006633;
text-decoration : none;
}

#example4vert ul li a:hover {
color : #CC3300;
border : 2px inset #FFFFFF;
text-decoration : underline;
}

Internet Explorer fix provided by 456Bereastreet.com.

<!--[if lt IE 8]>
  <style type="text/css">
    #example4vert ul li a {
    display : inline-block;
    }
  </style>
<![endif]-->

#example4hor {
font-family : "Times New Roman", serif;
font-size : 12px;
font-style : italic;
text-align : left;
}

#example4hor ul {
width : 576px;
list-style-type : none;
}

#example4hor ul li {
display : inline;
color : black;
}

#example4hor ul li a {
padding : 3px;
color : #006633;
text-decoration : none;
}

#example4hor ul li a:hover {
color : #CC3300;
border : 2px inset #FFFFFF;
text-decoration : underline;
}

Notice how there isn’t any information in the code above about the background color. This means that this style can be placed against any background color. The only thing you would have to change is the link colors to something complementary to your webpage.

You may have noticed that when you mouse over the links, the links and the page jumps. Unfortunately, I can’t figure out a fix for this. (I suspect that the border is adding space around the link).

I chose to use white (#FFFFFF) as the border color, further emphasizing that you can use any background color. However, after creation, you may want to tweak (or not) as you see fit. Then, test in as many browsers and on as many platforms as possible.

Okay. So you might have heard that Tableless designs for web pages using Cascading Style Sheets is going to be the new standard. Although most web pages are still designed using tables, it is good to know how to put together a basic layout using CSS. A basic layout is fairly easy to create and is now guaranteed support from all of the stylesheet conscious browsers. Another good benefit from using CSS for layout is that the layout information is usually kept separate from the content, so instead of a search engine reading table layout code, it can focus on reading your content. So CSS layout is what we will do in today’s tutorial.

We will use a somewhat standard layout with:

• A Title Bar along the top with links underneath
• A left Navigational panel with more links
• A Content area to the right of the navigational panel

Also, our layout will be fluid, which means it will resize as the browser window resizes. (I will show the basic html page for this and the finished CSS page in separate links).

• Type the following (which will create an XML compatible XHTML file) into any text editor

  • <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
    
    <html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">
    
    <head>
    <title>CSS layout tutorial 01</title>
    </head>
    
    <body>
    
    <h1>This is the Top Level Heading</h1>
    <p><a href="#">Link One</a>
    <a href="#">Link Two</a>
    <a href="#">Link Three</a>
    <a href="#">Link Four</a>
    <a href="#">Link Five</a>
    <a href="#">Link Six</a>
    </p>
    
    </body>
    </html>

• Save As an ASCII text file

The above code created an </h1> heading and six horizontal links. We won’t make the links an unordered list (to be formatted into a horizontal list with CSS) to keep this lesson simple. Instead, we’ll put all of these links into a paragraph.

• Type the following just below the last </p> tag in the previous html code:

  • <h3>Left Navigational Panel</h3>
    <ul>
    <li><a href="#">More Links Seven</a></li>
    <li><a href="#">More Links Eight</a></li>
    <li><a href="#">More Links Nine</a></li>
    <li><a href="#">More Links Ten</a></li>
    <li><a href="#">More Links Eleven</a></li>
    <li><a href="#">More Links Twelve</a></li>
    </ul>

And, finally we type in our content layer.

• In this case, I just copied and pasted some text from this tutorial and repeated it. Type the following just after the last </ul> tag in our code:

  • <h3>This is the content</h3>
    <p>Our layout will be fluid, which means it will
    resize as the browser window resizes. Our layout will
    be fluid, which means it will resize as the browser
    window resizes. Our layout will be fluid, which means
    it will resize as the browser window resizes. Our
    layout will be fluid, which means it will resize
    as the browser window resizes.</p>
    
    <p>Our layout will be fluid, which means it will
    resize as the browser window resizes. Our layout will
    be fluid, which means it will resize as the browser
    window resizes. our layout will be fluid, which means
    it will resize as the browser window resizes. Our
    layout will be fluid, which means it will resize as
    the browser window resizes.</p>

Notice from our typed html that our content goes in a linear fashion from top to bottom.

Check out the look with the screenshot just below. And here is the link to the actual html page: http://www.jgpws.com/tutorials/css/htmlexample_css1.html

• Type the following around the first <h1> tag and horizontal links combination as shown below:

  • <div id="titlebar">
    <h>This is the Top Level Heading</h1>
    <p>
    <a href="#">Link One</a>
    <a href="#">Link Two</a>
    <a href="#">Link Three</a>
    <a href="#">Link Four</a>
    <a href="#">Link Five</a>
    <a href="#">Link Six</a>
    </p>
    </div>

• Repeat this step for two other divisions as shown below:

  • <div id="leftnav">
    <h3>Left Navigational Panel</h3>
    <ul>
    <li><a href="#">More Links Seven</a></li>
    <li><a href="#">More Links Eight</a></li>
    <li><a href="#">More Links Nine</a></li>
    <li><a href="#">More Links Ten</a></li>
    <li><a href="#">More Links Eleven</a></li>
    <li><a href="#">More Links Twelve</a></li>
    </ul>
    </div>
    
    <div id="content">
    <h3>This is the content</h3>
    <p>Our layout will be fluid, which means it will
    resize as the browser window resizes. Our layout will
    be fluid, which means it will resize as the browser
    window resizes. Our layout will be fluid, which means
    it will resize as the browser window resizes. Our
    layout will be fluid, which means it will resize
    as the browser window resizes.</p>
    <p>Our layout will be fluid, which means it will
    resize as the browser window resizes. Our layout will
    be fluid, which means it will resize as the browser
    window resizes. our layout will be fluid, which means
    it will resize as the browser window resizes. Our
    layout will be fluid, which means it will resize as
    the browser window resizes.</p>
    </div>

• Place a <style> declaration within the <head> tag, as follows:

  • <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
    
    <html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">
    
    <head>
    <title>CSS layout tutorial 01</title>
    <style type="text/css">
    <!--
    
    -->
    </style>
    </head>

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
    
    <html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">
    
    <head>
    <title>CSS layout tutorial 01</title>
    <style type="text/css">
    <!--
    
    -->
    </style>
    </head>

• Then we place the style rules for our “titlebar”:

  • <!--
    #titlebar {
    /* make this float to the left side */
    float : left;
    /* margin and padding on each div must be set to 0 to work as intended */
    margin : 0px;
    padding : 0px;
    /* and add some color */
    background-color : #6699FF;
    /* width of titlebar must be 100% */
    width : 100%;
    }
    
    #titlebar a {
    /* put padding around our links in a separate style rule */
    padding : 6px;
    }
    -->

If you preview the html file in a browser right now, it will look like a jumbled mess, with the titlebar floating left and everything else wrapping around it. We will continue by floating the left navigational panel left.

• Use float property to float “leftnav”. Type this directly below the previous style rule but outside of the closing curly brace

  • #leftnav {
    float : left;
    margin : 0px;
    padding : 0px;
    background-color : #99CCCC;
    width : 25%;
    height : 400px;
    }

• …And the “content” panel:

  • #content {
    float : left;
    margin : 0px;
    padding : 0px;
    background-color: #CCFFCC;
    width : 75%;
    height : 400px;
    }

Okay, now preview this in a browser. You may notice that the paragraph text and headings are pushed up against the left edges, but if we apply margins and padding to the <div> tags, we lose our layout. The trick is to apply margins to each paragraph and heading.

• Put margins around the paragraphs and heading in our content and leftnav divs (type each below their style rules):

  • #leftnav h3 {
    margin-left : 3%;
    }
    
    #content p {
    margin-left : 5%;
    margin-right : 5%;
    }
    
    #content h3 {
    margin-left : 3%;
    }

Finally, preview the finished product in a browser (screenshot below). And that’s it. You have created a standards compliant layout!

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/photoshop/redslate.html.

In this tutorial, we will create photo-realistic red slate tile that will end up with a bump map look to it. This textured surface can be used as part of a 3-D scene in a video game or architectural simulation. Just like in the Blue Slate tutorial, we will make this a large size to avoid too much repetition across the texture.

Note: This tutorial assumes knowledge of the Photoshop 7.0 workspace.

• We start by opening a new file at 288 x 288 pixels and 72 dpi, Transparent background
• Then, we Fill Layer 1 with color R: 200, G: 155, B: 150. Save this color by clicking a blank area in the color swatches palette
  • 
  • 

• Next, we need to create and Save this color as well; R: 205, G: 141, B: 124
  
  • 
  • 

• Now, we create a New Layer. On the new layer View Rulers. We right-click the ruler in the drawing space, select Pixels and place two guides 144 pixels in vertically and 144 pixels down horizontally (zoom in twice to see pixel amounts up close) and 72 pixels in from each edge. We must place two guides close to the right and bottom edges as well
  • 

• Using the Pencil tool at 1px Black, we will draw lines horizontally and vertically along the guides (except for the top and left sides). To give the lines a more tiled look, we can uncheck Snap to Guides, and draw some more lines directly next to some of the edges. Hold down the Shift key while drawing to get a straight line. The look we are going after is represented below:
  • 

• Next, we click on Layer 1 (or whatever name you chose). We’ll use one of the Paintbrush tool’s Spatter textures with the RGB color 205, 141, 124 saved before. (Brush size should be 35px, Mode: Normal and Opacity: 75%). Then we draw feather shaped paint patterns in various areas
  • 

• Now, we add another new color and save. R: 209, G: 194, B: 193. With this color, we brush with the same settings as before in adjacent areas to the darker paint shapes. The drawing should look as pictured below:
  • 

• We now Add Noise with an Amount of 4 and Gaussian setting. Then we use the Motion Blur filter with an angle of 0 and a distance of 3
• We must create another New Layer above Layer 1 but below Layer 2. On this layer we draw shadow lines with a 1px black Pencil outlining the bottom edges of the darker areas (we will want to zoom in for accuracy).
• Using the Smudge tool (Brush size: 5, Strength: 50%) we need to smudge the area beneath each line to give the shadow look. You may use the the screenshot below as a guide
  • 

• On this same layer, we draw white lines with a 1px Pencil for highlights within the light areas (also toward the bottom). We use the same Smudge tool technique above, smudging the tops of the lines. How this looks is shown below:
  • 

• Next, we lower the Opacity of the above mentioned layer to 30%
• We now click Layer 1 again and select the light areas of this layer with the Magic Wand tool with a Tolerance of 3 (Use Shift to select more than one area). Apply the Wave filter (Distort > Wave) to these areas with a Wavelength minimum of 61 and a maximum of 135 (these can be adjusted as you see fit)
• And thats it! You have photo-realistic red slate tile. The final image is shown below:
  • 

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

In this tutorial, we will create photo-realistic blue slate tile. This textured surface can be used as part of a 3-D scene in a video game or architectural simulation. We will make this a large size to avoid too much repetition across the texture.

Note: This tutorial assumes knowledge of the Photoshop 7.0 workspace.

• Open a new file at 288 x 288 pixels and 72 dpi and Transparent background
  • 

• We will now fill Layer 1 with color R: 129, G: 135, B: 131
  • 

• Next, we create a New Layer. On the new layer View (menu item) Rulers, right click the rulers in the drawing space, select Pixels. It is a good idea to zoom in about twice and place two guides 144 pixels in vertically and 144 pixels down horizontally. Then by eyeballing, we place two more guides in between the center and outer edges of the drawing space (approximately 72 pixels in from the outer edges). Also place guides in the rightmost and bottom areas near the edges but not touching them. It is pictured below:
  • 

• Using the Pencil tool at 1px and color black, we will draw a line horizontally and vertically along the guides. We do not draw any lines along the very top or left sides as the right and bottom lines will repeat the pattern. To give the lines a more tiled look, we’ll uncheck Snap to Guides, and draw more lines directly next to a few edges. We must hit the shift key while drawing the lines to create a straight line. It is also a good idea to uncheck Show > Guides. The look is shown below:
  • 

• Clicking on the bottom most color Layer, we next will apply the Dodge tool with a Brush size of 35 soft and Exposure set to 50% to lighten some of the areas. Click very lightly as we are going after a subtle look
• Then we apply the Burn tool to other untouched areas with the same brush settings as above and also clicking lightly. What the drawing looks like thus far is pictured below:
  • 

• We can now apply the Palette Knife filter with these settings: Stroke size: 30, Stroke detail: 3, Softness: 9. It is a good idea to vary these settings dependent on the intensity of the Dodging and Burning
• Add Noise; Amount: 2%, Gaussian and Monochromatic
• Filter > Distort > Glass. Distortion should be set to 4, Smoothness: 7, Texture: Frosted, Scaling: leave at 100%
  • 

• Finally, we apply a Gaussian Blur at 0.3 pixels
• The final look is pictured below:
  • 

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/rollovers_msiefixes.html.

Also, this tutorial has been updated as of October 15th, 2008. The CSS code originally given does not work in IE6. The new method for getting rid of the gaps between list items is shown in this article from 456 Berea Street. The new code will be shown in bold.

In this follow up to the previous tutorial section CSS Rollovers- Part 1- Rollovers with Images, we will be making the changes for Internet Explorer (Windows) as promised at the end of that tutorial. Needless to say, you will want to be following this tutorial while previewing in Internet Explorer (preferably 6 and up). If you are viewing these rollovers from any other browser, no further changes are needed.

If you recall, we left off at the last tutorial with the following completed links list (shown here as a jpeg image):

These images have huge gaps between each rollover! We will make some MSIE specific adjustments to fix them.

• First, we must create a new external stylesheet to place these IE specific style rules in
  • Create a new stylesheet in the same directory as your “navbar.css” stylesheet
  • Name it “msiefixes.css”

• Type your style rules into “msiefixes.css”
  • Type the following in the file:

  • #navlist a {
    margin-bottom: -5px;
    display: inline-block;
    margin-left: 20px;
    height: 1em;
    float: left;
    clear: both;
    width: 100%;
    }
    
    #navlist ul {
    margin-top: 5px;
    }

  • Unlike in CSS Uberlinks List Menu, our margins had to be adjusted for the size of the images
  • I also moved the margin-left: from 20px to 10px to re-center the links
  • Setting the margin: top on the navlist ul tag causes us to lose a little space on the top. For some reason, the links will not move down to accommodate more space at the top

• Add a link to your stylesheet at the top of your html file
  • Open “rollovers01.html”
  • Add the following conditional statement just below your first stylesheet link (<link rel=...>):

  • <!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="msiefixes.css">
    <![endif]-->

Your completed rollovers links should look like the following (the final product from CSS Rollovers 1):

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

• Link One
• Link Two
• Link Three
• Link Four
• Link Five
• Link Six

• 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.

I used to host Photoshop, CSS, and HTML tutorials at www.jgpws.com/tutorials but as of August 2008 my website was suspended (couldn’t keep up with the bill; this may change in the future). I thought, “What would be a good way for me to continue offering tutorials without that worry?” I decided to move the tutorials over to a free blog format and start from scratch. After doing my research, I decided on WordPress as the service of choice, as they offer great value for free. This format will also allow for reader feedback, making the tutorials more useful.

There will be Photoshop, CSS and HTML tutorials to begin with. The first tutorial will be “CSS Rollovers- Part 1- Buttons with Images.” Enjoy.

Jason Gonzalez