Multiple Buttons in a single image Verticaly and Horizontally

Jayakumar 3/11/2010 Multiple Buttons in a single image Verticaly and Horizontally

HTML codings

<li class="clsStatus"><a href="#">Status</a></li>

<li class="clsMusic"><a href="#">Music</a></li>

<li class="clsBillboard"><a href="#">Billboard</a></li>

<li class="clsPhotos"><a href="#">Photos</a></li>

<li class="clsBlog"><a href="#">Blog & Announcements</a></li>

<li class="clsFrients"><a href="#">Friends</a></li>

<li class="clsComments"><a href="#">Comments</a></li>

<li class="clsMessage"><a href="#">Message</a></li>

<li class="clsProfile"><a href="#">Profile</a></li>

<li class="clsShow"><a href="#">Shows</a></li>

<li class="clsAccount"><a href="#">Account</a></li>

<li class="clsSupport"><a href="#">Support</a></li>

</ul> 
 
trywelcome 
 
</div> 
</div> 
</div> 
</body> 
</html>

Css codings

#selBodyContent 
{ 
 
margin:0 auto; 
width:980px; 
* height:975px; 
height:935px; 
background:repeat-x #fff; 
 
} 
.clsClearFix 
{ 
overflow:auto; 
zoom:1; 
} 
* html .clsClearFix 
{ 
height:1%; 
overflow:visible; 
} 
 
/* One image multiple buttons*/ 
 
#selBodyContent 
{ 
 
margin:0 auto; 
width:932px; 
* height:975px; 
height:935px; 
background:repeat-x #fff; 
 
} 
/*-- Hacks used for floating problem --*/ 
.clsClearFix 
{ 
overflow:auto; 
zoom:1; 
} 
* html .clsClearFix 
{ 
height:1%; 
overflow:visible; 
} 
.clssubheader 
{ 
width:932px; 
height:72px; 
 
} 
 
 
#navigation 
{ 
 
text-align:center; 
 
} 
#navigation a:link, .navigation a:active, .navigation a:visited 
{ 
color:#C39C70; 
display:block; 
float:left; 
font-size:90%; 
font-weight:bold; 
 
text-align:center; 
text-decoration:none; 
} 
#navigation a 
{ 
 
height:72px; 
float:left; 
text-align:center; 
display:block; 
color:#c39c70; 
text-decoration:none; 
font-weight:bold; 
font-size:90%; 
background:url(../images/image-a.jpg) no-repeat; 
} 
#navigation a:hover 
 
{ 
 
margin-right:0px; 
height:72px; 
float:left; 
text-align:center; 
display:block; 
color:#c39c70; 
text-decoration:none; 
font-weight:bold; 
font-size:90%; 
background:url(../images/image-a-hover.jpg) no-repeat; 
} 
#navigation .home a 
{ 
background-position: 0px 0 ; 
width:95px; 
} 
#navigation .home a:hover 
{ 
background-position: 0px 0; 
width:95px; 
} 
#navigation .articles a 
{ 
background-position: -110px 0; 
width:100px; 
} 
 
#navigation .articles a:hover 
{ 
background-position: -110px 0; 
width:100px; 
} 
#navigation .rss a 
{ 
background-position: -220px 0; 
width:145px; 
} 
#navigation .rss a:hover 
{ 
background-position: -220px 0; 
width:145px; 
}	 
#navigation .contact a 
{ 
background-position: -370px 0; 
width:160px; 
} 
#navigation .contact a:hover 
{ 
background-position: -370px 0; 
width:160px; 
} 
#navigation .rss1 a 
{ 
background-position: -550px 0 ; 
widtH:245px; 
} 
#navigation .rss1 a:hover 
{ 
background-position: -550px 0 ; 
widtH:245px; 
}	 
 
 
 
#navigation .contact1 a 
{ 
background-position: -815px 0; 
widtH:120px!important; 
} 
#navigation .contact1 a:hover 
{ 
background-position: -815px 0; 
widtH:120px!important; 
}	 
 
/*Multiple buttons in a single image s*/ 
 
 
.clsSubMenu{ 
width:275px; 
} 
.clsSubMenu ul{ 
padding:5px 50px 0 18px; 
line-height:28px; 
} 
.clsSubMenu ul li{ 
background:url(../images/clsBlogTable-bottomBorder.gif) repeat-x bottom left; 
list-style:none; 
padding:5px 0; 
} 
.clsSubMenu ul li a{ 
outline:none; 
text-decoration:none!important; 
color:#646464; 
} 
 
.clsSubMenu .clsArtHome a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 0; 
padding:5px 0 5px 40px; 
} 
.clsSubMenu .clsArtHome a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 0; 
padding:5px 0 5px 40px; 
} 
 
.clsSubMenu .clsStatus a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -55px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsStatus a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -55px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsMusic a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -83px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsMusic a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -83px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsVideo a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -109px; 
padding:5px 0 2px 40px; 
} 
.clsSubMenu .clsVideo a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -109px; 
 
 
padding:5px 0 2px 40px; 
} 
.clsSubMenu .clsBillboard a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -135px; 
padding:5px 0 2px 40px; 
} 
.clsSubMenu .clsBillboard a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -135px; 
padding:5px 0 2px 40px; 
} 
.clsSubMenu .clsPhotos a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -161px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsPhotos a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -161px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsBlog a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -187px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsBlog a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -187px; 
padding:5px 0 0 40px; 
} 
 
.clsSubMenu .clsFans a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -211px; 
padding:5px 0 3px 40px; 
} 
.clsSubMenu .clsFans a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -211px; 
padding:5px 0 3px 40px; 
} 
.clsSubMenu .clsFrients a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -238px; 
padding:5px 0 3px 40px; 
} 
.clsSubMenu .clsFrients a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -238px; 
padding:5px 0 3px 40px; 
} 
.clsSubMenu .clsComments a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -270px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsComments a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -270px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsMessage a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -292px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsMessage a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -292px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsProfile a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -316px; 
padding:5px 0 3px 40px; 
} 
.clsSubMenu .clsProfile a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -316px; 
padding:5px 0 3px 40px; 
} 
.clsSubMenu .clsAccount a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -344px; 
padding:5px 0 2px 40px; 
} 
.clsSubMenu .clsAccount a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -344px; 
padding:5px 0 2px 40px; 
} 
 
.clsSubMenu .clsShow a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -373px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsShow a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -373px; 
padding:5px 0 0 40px; 
} 
.clsSubMenu .clsTransaction a{ 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -25px; 
padding:4px 0 10px 40px; 
} 
.clsSubMenu .clsTransaction a:hover{ 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -25px; 
padding:4px 0 10px 40px; 
} 
.clsSubMenu .clsSupport{ 
border-bottom:0; 
background:none!important; 
} 
.clsSubMenu .clsSupport a{ 
 
background:url(../images/sidebar-menu.jpg) no-repeat 0 -399px; 
padding:5px 0 3px 40px; 
} 
.clsSubMenu .clsSupport a:hover{ 
 
background:url(../images/sidebar-menu-hover.jpg) no-repeat 0 -399px; 
padding:5px 0 3px 40px; 
} 
 
p{ 
background:#000000 none repeat scroll 0 0; 
color:#0099FF; 
font-family:Tahoma,"Trebuchet MS",Arial,serif; 
font-size:18px; 
font-size-adjust:none; 
font-stretch:normal; 
font-style:normal; 
font-variant:normal; 
font-weight:bold; 
line-height:25px; 
padding:0 0 0 10px; 
position:relative; 
} 
span{ 
color:#FFCC00; 
font-family:Arial,serif; 
font-size:17px; 
font-size-adjust:none; 
font-stretch:normal; 
font-style:normal; 
font-variant:normal; 
font-weight:bold; 
line-height:normal; 
padding:5px 0 0; 
position:absolute; 
right:10px; 
}