Sprites

From Wikicliki
Jump to: navigation, search

CSS SPRITES ARE AWESUM


My sample implementation

CSS

#menu {padding:0;position: relative ; background:url("images/menu_ribbonsprite.gif"); }
#menu li {margin: 0; padding: 0; list-style:none;position: absolute; }    
#menu li, #menu a { display: block;}
#item1, #item2, #item3, #item4 {background:url("images/menu_ribbonsprite.gif") 0 0 no-repeat; 
height:37px; width:183px; text-align:center; font-family:frutiger, arial; font-size:13px; color:white }
.menutext {padding-top:12px; text-decoration:none; color:white}

#item1 a:hover, #item2 a:hover, #item3 a:hover, #item4 a:hover {height:37px;background:url("images/menu_ribbonsprite.gif") 0 -37px no-repeat;}

  #item1 {left: 0; width: 187px;}
  #item2 {top:40; width: 187px;}
  #item3 {top:80; width: 187px;}
  #item4 {top:120; width: 187px;}

HTML

<ul id="menu">
     <li id="item1"><a href="#1" class=menutext>PERSONAL</a></li>
     <li id="item2"><a href="#2" class=menutext>BUSINESS</a></li>
     <li id="item3"><a href="#3" class=menutext>ABOUT US</a></li>
     <li id="item4"><a href="#4" class=menutext>MEDIA CENTRE</a></li>
  </ul>