Creating Horizontal Navigation from Styled Unordered Lists

You may want to use horizontal navigation in your site instead of the typical left-side vertical navigation. Below are instructions for creating a simple version of such a list. In addition, this list will also use a background graphic that you create in Photoshop.

I've adapted these instructions for Dreamweaver from the horizontal list found at http://css.maxdesign.com.au/listamatic/horizontal26.htm.

To set up the unordered list

  1. Click inside the div you've created to contain the navigation section. For the purposes of these instructions, the division is called nav.
  2. On the Text menu, point to List, and then click Unordered List.
  3. Type Home after the first bullet, and then press ENTER.
  4. Type a name for another page you want to include in your navigation, and then press ENTER.
  5. Repeat step 4 until you complete your navigation.

To link items in the unordered list

  1. In the unordered list you just created, select the word Home.
  2. In the Properties panel, in the Link box type #, and then press ENTER to set the link.
  3. Select the next item in the unordered list.
  4. In the Properties panel, in the Link box type #, and then press ENTER to set the link.
  5. Repeat steps 3 and 4 until all entries in the unordered list are linked.

Note: The hash mark (#) is only a placeholder. You'll need to replace the hash mark with an actual link later.

To create the background graphic in Photoshop

  1. Open Photoshop.
  2. On the File menu, click New.
  3. In the Width box, type any value you wish, and then select pixels as the unit of measurement. You'll cut the width down later. Consider using 120 pixels as a starting point.
  4. In the Height box, type the exact height you want for your button. Resizing later won't work well for the height. Consider trying 20 pixels as a starting point.
  5. Click OK.
  6. Design a horizontally repeating pattern for your button. For example, you could click the Gradient Tool Gradient Tool in Photoshop, and use the built-in gradient features or select gradient colors by setting foreground and background colors. For more about these features, refer to the Photoshop online Help.
  7. Once your design is set, click the Crop Tool Crop Tool in Photoshop.
  8. Using the selection handles, drag a rectangle around just a small sliver of the design you've creating, making sure to select the full height of the button.
  9. Press ENTER to complete the crop.
  10. On the File menu, click Save for Web & Devices.
  11. Click the 2-Up tab. The left side shows the original image; the right side shows the optimized image based on the settings you select in the following steps. (Note: Sometimes the original image appears on top and the optimized version appears on bottom.)
  12. In the Preset list, click PNG-8 128 Dithered.
  13. In the Colors list, click the lowest number of colors possible while still maintaining a desirable appearance. For gradient-style buttons, 64 is usually a good choice.
  14. Click Save.
  15. In the Save in list, navigate to the images folder inside your Web site folder.
  16. Give the image an appropriate name, such as button, and then click Save.
  17. If you want to create a button that changes appearance when hovered over, repeat the steps above to create and save a second graphic with the same dimensions as the first but give the second graphic a different appearance. Save the graphic to the images folder insider your Web site folder, and use a fitting file name, such as hover.

To style the navigation div

  1. Open the CSS panel, and then click the All button.
  2. Make sure you have the screen style sheet selected in the list, and identify the name you've used as the ID for your navigation div. These instructions assume the ID is nav.
  3. Click the New CSS Rule New CSS Rule button button.
  4. For the Selector Type, click Advanced.
  5. In the Selector box, type #nav.
  6. Make sure Define in is set to the external style sheet, and then click OK.
  7. Under Category, click Box.
  8. Click OK.

To style the unordered list

  1. In the CSS panel, click the New CSS Rule New CSS Rule button button.
  2. For the Selector Type, click Advanced.
  3. In the Selector box, type #nav ul.
  4. Make sure Define in is set to the external style sheet, and then click OK.
  5. Under Category, click Box.
  6. Under both Padding and Margin, clear the Same for All check boxes.
  7. Under Padding, type 0 in the Top box and Left box.
  8. Under Margin, type 0 in the Top box and Left box.
  9. Click OK.

To transform each list item into a button

  1. In the CSS panel, click the New CSS Rule New CSS Rule button button.
  2. For the Selector Type, click Advanced.
  3. In the Selector box, type #nav ul li.
  4. Make sure Define in is set to the external style sheet, and then click OK.
  5. Under Category, click Background.
  6. Next to the Background image box, click Browse.
  7. Navigate to the images folder within your Web folder, click the graphic you made in the Photoshop section above, and then click OK.
  8. In the Repeat list, click repeat-x to tile the graphic horizontally.
  9. Under Category, click Block.
  10. In the Text align list, click center.
  11. In the Display list, click block.
  12. Under Category, click Box.
  13. In the Float list, click left.
  14. Under Padding, make sure the Same for all check box is selected, and then in the Top box, type 0.
  15. Under Margin, make sure the Same for all check box is selected, and then in the Top box, type 0.
  16. Under Category, click List.
  17. In the Type list, click none.
  18. Click OK.

To style the links within the unordered list

  1. In the CSS panel, click the New CSS Rule New CSS Rule button button.
  2. For the Selector Type, click Advanced.
  3. In the Selector box, type #nav a.
  4. Make sure Define in is set to the external style sheet, and then click OK.
  5. Under Category, click Type.
  6. In the Color box, type or select an appropriate color code for the button text. If the graphic background is dark, for example, you might use white (#ffffff), or if the graphic background is light, you might use black (#000000).
  7. Under Decoration, select the none check box.
  8. Under Category, click Block.
  9. In the Display list, click block.
  10. Under Category, click Box.
  11. In the Width box, type an appropriate width for your button. If you have only a few buttons, you might choose 120px as a starting point. If you have several buttons, you might try 90px as a starting point.
  12. In the Height box, type the same height you used earlier when designing your Photoshop button. The example in that section used 20px.
  13. Under Margin, clear the Same for all check box, and in the Left box, type 0.
  14. Under Category, click Border.
  15. Under Style, Width, and Color, clear the Same for all check boxes.
  16. For the Top, Bottom, and Left boxes, do the following:
  17. Click OK.

To create a hover style

  1. In the CSS panel, click the New CSS Rule New CSS Rule button button.
  2. For the Selector Type, click Advanced.
  3. In the Selector box, type #nav a:hover.
  4. Make sure Define in is set to the external style sheet, and then click OK.
  5. Under Category, click Type.
  6. In the Color box, type or select an appropriate color. If your hover button uses a dark background, then perhaps use white (#ffffff). If your hover button uses a light background, then perhaps use black (#000000).
  7. Under Category, click Background.
  8. Next to the Background image box, click Browse.
  9. Navigate to the images folder within your Web folder, click the hover graphic you made in the Photoshop section, and then click OK.
  10. In the Repeat list, click repeat-x to tile the graphic horizontally.
  11. Click OK.