Grid view for image above.
Result:
HTML code;
CSS style in custom.css
/*~~~~~~~~~~~~~~~~~~~~~~~CSS_sprite~~~~~start~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
ul#sprite_footer{
margin:0 -29px;
width:928px;
height:196px;
}
ul#sf_row_1 li a{
height:110px;
}
ul#sf_row_2 li a{
height:86px;
}
ul#sf_row_1 li a,ul#sf_row_2 li a{
background:url(../images/button_image.png) no-repeat;
display:block;
border:none;
padding:0;
text-indent:-9999px;
}
#sf_row_1 li, #sf_row_2 li{
float:left;
display:inline;
}
#sf_row_1 li a,#sf_row_2 li a{
margin-right:-40px;
}
#sf_row_1 li a#button_1_1{
background-position:0px 0px;
width:218px;
}
#sf_row_1 li a#button_1_2{
background-position:-218px 0px;
width:167px;
}
#sf_row_1 li a#button_1_3{
background-position:-385px 0px;
width:165px;
}
#sf_row_1 li a#button_1_4{
background-position:-551px 0px;
width:166px;
}
#sf_row_1 li a#button_1_5{
background-position:-718px 0px;
width:212px;
}
#sf_row_2 li a#button_2_1
{
background-position:0px -110px;
width:206px;
}
#sf_row_2 li a#button_2_2
{
background-position:-206px -110px;
width:144px;
}
#sf_row_2 li a#button_2_3{
background-position:-350px -110px;
width:130px;
}
#sf_row_2 li a#button_2_4{
background-position:-480px -110px;
width:150px;
}
#sf_row_2 li a#button_2_5{
background-position:-630px -110px;
width:110px; }
#sf_row_2 li a#button_2_6{
background-position:-740px -110px;
width:188px;
}
/*~~~~~~~~~~~~~~~~~~~~~~~CSS_sprite~~~~~finish~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
