design advice for horizontal menu w images

Hi,

I am building the menu shown in the attached.

The image icons are clickable, there is a different mouse over image for each large icon. The titles will not change, I have used the "IncludeTabs=" property in the ascx.

I have made some progress at

http://www.rmia.org.au/Training/Development/tabid/131/Default.aspx

Bit stuck with how to get different images on each menu item

and

How to get the text at the bottom of the image

(Temporary images are in at the moment) css extract below

Many thanks,

Ian

* Snapsis Menu */
#nav ul {padding:0; /*main menu block style*/
 margin:0 0 30 0;
 list-style:none;
 float:left;
 
 width:100%;
 /*background-color:#f0f0f0;*/
 
}

#nav li {position:relative;
 float:left;
 horizontal-align:left;
 line-height:76px;
 list-style:none;
 padding:0;
 white-space:nowrap;
 
 margin-bottom:0px;
 width:101px;
 background-image: url(images/opportunity_up.gif)
}

#nav-36 { background-image: url(images/people_up.gif)}

#nav a {font-family:Verdana, Arial, Helvetica, sans-serif; /*main menu item fonts*/
 font-size:8px;
 display:block;
 margin: 0;
 text-decoration:none;
 text-transform: lowercase;
 text-align:center;
 font-weight:bold;
 padding: 0px 5px 0 5px;
 color: #505050;
 border-right:0px solid #FFFFFF;
 background-color: transparent;
 
}

#nav li ul {position:absolute; /*Blocks for second level hidden to start*/
 left: -999em;
 
 width:150px;
 border-top: #FFFFFF 1px solid;
 background:#FFFFF;
}

#nav li li a {width:150px; /*second level menu item text fonts*/
 font-size:10px;
 text-align:left;
 line-height:20px;
 padding: 0 5px 0 5px;
 border-bottom: 1px solid #FFFFFF;
 border-left:1px solid #FFFFFF;
 border-right:1px solid #FFFFFF;
 background-color:#808080;
 color: #ffffff;
}

/* Menu items */
/* background colors are commented out because skin it was used on had a background image */
/*background and hover colour for top items*/
#nav li a:hover { background-image: url(images/opportunity_down.gif);
 color:#ffffff;
 }
#nav li li a:hover {  background-image: none;
   background-color: #505050;
   color:#000000; } /*background and hover colour for second and below items*/

#nav li.SelectedTab a {/*background-color:#FF6600;*/}
#nav li li.SelectedTab a { /*background-color:#FF6600;*/ }
#nav li li li.SelectedTab a { /*background-color: #FF6600;*/ }
#nav li.SelectedTab a:hover { /*background-color: #D2660F;*/ }
#nav .DisabledTab {color:#CCCCCC;}

#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li:hover ul ul ul ul,
#nav li.iehover ul ul,#nav li.iehover ul ul ul,#nav li.iehover ul ul ul ul{left: -999em;}

/* 2nd level item position */
#nav li:hover ul, #nav li.iehover ul {top: 76px;left:0;} /*distance below upper first menu item*/

/* 3rd level item position */        
#nav li li:hover ul,#nav li li li:hover ul,#nav li li.iehover ul, 
#nav li li li.iehover ul {top: -1px;left:150px;}                                  

You have the right idea to target the items by specific ID, but your id's do not have a dash in them.

Use:
#nav36 { background-image: url(images/people_up.gif)}

instead of:
#nav-36 { background-image: url(images/people_up.gif)}

Sorted, the reference is

#nav1 li#nav176 {background-image: url(images/standards_up.gif)}, #nav1 li#nav176 a:hover {background-image:url(images/standards_down.gif)}

Nearly all done, see

http://www.rmia.org.au/Training/testfrontpage/tabid/132/Default.aspx

I used two menus. The first and last items were wider than the others which made it a real pain in the ***.

BUT !! Still having a problem getting rid of the text in an image only menu.

Tried this

#nav1 li a {display:block;height=76px; background-position:right bottom; em{display:none; }}

but no luck - it still puts text over the background image. Any suggestions?

Please help! Driving me nuts..

Thanks, Ian

/* Snapsis Menu */

#nav1 {
 width:825;
 list-style-type:none;
 background:#f0f0f0;
 }

#nav1 ul {padding:0; /*main menu block style*/
 
 list-style:none;
 margin:0 0 0 0;/*top right bot left*/
 padding:0 0px;
}
#nav1 li {float:left;
 width:101px;
 height:76px;
 background-image: url(images/people_up.gif);
}

#nav1 li a {display:block;height=76px; background-position:right bottom; .em{display:none} }

/*our organisation 136*/
#nav1 li#nav136 {background-image: url(images/left_upper.gif); width=137px;}, /* no mouse over #nav1 li#nav136 a:hover

{background-image:url(images/standards_down.gif)} */

/*Standards 176*/
#nav1 li#nav176 {background-image: url(images/standards_up.gif)}, #nav1 li#nav176 a:hover

{background-image:url(images/standards_down.gif)}

/*Knowledge 177*/
#nav1 li#nav177 {background-image: url(images/knowledge_up.gif)}, #nav1 li#nav177 a:hover

{background-image:url(images/knowledge_down.gif)}

/*Innovation 178*/
#nav1 li#nav178 {background-image: url(images/innovation_up.gif)}, #nav1 li#nav178 a:hover

{background-image:url(images/innovation_down.gif)}

/*Opportunity 179*/
#nav1 li#nav179 {background-image: url(images/opportunity_up.gif)}, #nav1 li#nav179 a:hover

{background-image:url(images/opportunity_down.gif)}

/*Protection 180*/
#nav1 li#nav180 {background-image: url(images/protection_up.gif)}, #nav1 li#nav180 a:hover

{background-image:url(images/protection_down.gif)}

/*People 181*/
#nav1 li#nav181 {background-image: url(images/people_up.gif)}, #nav1 li#nav181 a:hover

{background-image:url(images/people_down.gif)}

/*Contact Us 1127*/
#nav1 li#nav1127 {background-image: url(images/right_upper.gif); width=82px}, /* no mouse over #nav1 li#nav1127 a:hover

{background-image:url(images/standards_down.gif)} */

#nav2 {
 width:825;
 list-style-type:none;
 background:#f0f0f0;
 }

#nav2 ul {padding:0; /*main menu block style*/
 
 list-style:none;
 margin:0 0 0 0;/*top right bot left*/
 padding:0 0px;
}
#nav2 li {position:relative;
 float:left;
 width:101px;
 height:32px;
 background-image: url(images/button_up.gif);
}

#nav2 li a:hover {background-image:url(images/button_down.gif) ; width=101px;}

#nav2 li a {display:block;height=32px; background-position:right bottom; em{display:none; }

/*our organisation 236*/
#nav2 li#nav236 {background-image: url(images/left_lower_up.gif);
  width=137px;
}
#nav2 li#nav236 a:hover{
  background-image:url(images/left_lower_down.gif) ;
  width=137px;
}

#nav2 li#nav236 li {background-image:none;
  width=150px;
  height=20px;
}

#nav2 li#nav236 li a:hover{
  background-image:none;
  width=150px;
  height=20px;
}

/*Contact Us 1127*/
#nav2 li#nav2127 {background-image: url(images/right_lower_up.gif);
  width=82px
}

#nav2 li#nav2127 a:hover{
  background-image:url(images/right_lower_down.gif);
  width=82px
}

#nav2 a {font-family:Verdana, Arial, Helvetica, sans-serif; /*main menu item fonts*/
 font-size:11px;
 display:block;
 margin: 0;
 text-decoration:none;
 text-transform: lowercase;
 text-align:center;
 font-weight:bold;
 padding: 8px 5px 0 5px;
 color: #000000;
 border-right:0px solid #FFFFFF;
 background-color: transparent;

}

#nav2 li ul {position:absolute; /*Blocks for second level hidden to start*/
 left: -999em;
 height:20px;
 width:150px;
 border-top: #FFFFFF 1px solid;
 border-right: #f5f5f5 4px solid;
 border-bottom: #f0f0f0 4px solid;
 background:#FFFFF;
}

#nav2 li li {width:150px; /*second level menu item text fonts*/
 background-image: none;
 height:20px;
 padding: 0 0px 0 0px;
 border-bottom: 1px solid #FFFFFF;
 border-left:2px solid #FFFFFF;
 border-right:1px solid #FFFFFF;
 background-color:#f0f0f0;
 
}

#nav2 li li a {width:150px; /*second level menu item anchor*/
 background-image: none;
 font-size:10px;
 text-align:left;
 line-height:10px;
 height:20px;
 padding: 4px 5px 0 5px;
 border-bottom: 1px solid #FFFFFF;
 border-left:0px solid #FFFFFF;
 border-right:0px solid #FFFFFF;
 background-color:#8e8e8e;
 color: #ffffff;
}

#nav2 li a:hover { color:#ffffff;}

#nav2 li li a:hover {  background-image: none;
   width:150px;
   background-color: #5b5b5b;
   color:#ffffff; } /*background and hover colour for second and below items*/

#nav2 li.SelectedTab a {/*background-color:#FF6600;*/}
#nav2 li li.SelectedTab a { /*background-color:#FF6600;*/ }
#nav2 li li li.SelectedTab a { /*background-color: #FF6600;*/ }
#nav2 li.SelectedTab a:hover { /*background-color: #D2660F;*/ }
#nav2 .DisabledTab {color:#CCCCCC;}

#nav2 li:hover ul ul,#nav2 li:hover ul ul ul,#nav2 li:hover ul ul ul ul,
#nav2 li.iehover ul ul,#nav2 li.iehover ul ul ul,#nav2 li.iehover ul ul ul ul{left: -999em;}

/* 2nd level item position */
#nav2 li:hover ul, #nav2 li.iehover ul {top: 32px;left:0;} /*distance below upper first menu item*/

/* 3rd level item position */        
#nav2 li li:hover ul,#nav2 li li li:hover ul,#nav2 li li.iehover ul, 
#nav2 li li li.iehover ul {top: -1px;left:150px;}