1 Menu using an unadorned table

Home Do Menus Design

Menus using <td> styles defined in an external style sheet menustyle.css

2 (a) Menu using a background image in each cell
(note that the background colour shows as the cells are oversized)

Home Do Menus Design

2 (b) Menu using defined borders

Home Do Menus Design

Copy the information below into a style sheet called 'menustyle.css'.

/* MENU Style Sheet */

/* cells with formatted BORDERS*/
td.bmenu { width: 97px;
  background-color: #FFEBCD; /* blanched almond */
  color: black;
  font-size: 9pt;
  font-weight: 500;
  text-align: center;
  border-top: 0.3em solid #F2FAEB; /*light limegreen */
  border-bottom: 0.3em solid #909090;
  border-left: 0.3em solid #F2FAEB; /* light limegreen */
  border-right: 0.3em solid #909090;
  padding: 0.1em;
  height: 10pt;
}

/* cells with background IMAGE*/
td.imenu { width: 103px;
  height: 31px;
  background-color: #ffff99;
  background-image: url(images/textbox.gif);
  background-repeat: no-repeat;
  background-position: center;
  color: black;
  font-size: 9pt;
  font-weight: bold;
  font-style: normal;
  text-align: center;
  border: 0;
  padding: 0;
}