http://uploads.ru/i/r/7/1/r71q9.jpg
DEMO

HTML верх

Код:
<div class="awesome_image"> </div>
<div id="stickey_footer">
  <ul id="footer_menu">
    <!-- Begin Footer Menu -->
    <li class="imgmenu"><a href="#"><span>Home</span></a></li>
    <!-- This Item is an Image, the "span" is hidden via CSS -->
    <li><a href="#">Services</a>
    <li><a href="#">Portfolio</a>
    <li><a href="#">Friends</a>
    <li><a href="#">Blog</a>
    <li><a href="#">Testimonials</a>
    <li><a href="#">Contact</a>
  </ul>
  <!-- End Social Icons -->
  <ul id="social_icons">
    <!-- Social Icons -->
    <!-- The span is the text appearing on hover, use the tooltip class in the link -->
    <li><a href="#" ><img src='http://forumstatic.ru/files/000f/33/e7/32704.png' alt="" /><span>Twitter</span></a></li>
    <li><a href="#" ><img src='http://forumstatic.ru/files/000f/33/e7/87078.png' alt="" /><span>Digg</span></a></li>
    <li><a href="#" ><img src='http://forumstatic.ru/files/000f/33/e7/66973.png' alt="" /><span>Flickr</span></a></li>
    <li><a href="#" ><img src='http://forumstatic.ru/files/000f/33/e7/96797.png' alt="" /><span>Facebook</span></a></li>
  </ul>
  
</div>

Цвета style_cs.css

Код:
#stickey_footer { /* This will make your footer stay where it is */
	background: none repeat scroll 0 0 #1D1D1D;
	border: 1px solid rgba(0, 0, 0, 0.3);
	bottom: 0;
	font-family: Arial, Helvetica, sans-serif;
	height: 40px;
	left: 50%;
	margin: 0 auto 0 -490px;
	padding: 0 10px;
	position: fixed;
	text-shadow: 1px 1px 1px #000000;
	width: 960px;
}
/* border curves */
#stickey_footer {
	-moz-border-radius: 10px 10px 0px 0px;
	-webkit-border-radius: 10px 10px 0px 0px;
	border-radius: 10px 10px 0px 0px;
}
/* hover effect */
#stickey_footer:hover {
	background: none repeat scroll 0 0 #2b2a2a;
}
/* shadow for the footer*/
#stickey_footer {
	-moz-box-shadow:0px 0px 11px #191919;
	-webkit-box-shadow:0px 0px 11px #191919;
	box-shadow:0px 0px 11px #191919;
}
#footer_menu {
	margin: 0;
	padding: 0;
	width:auto;
}
#footer_menu li {
	list-style: none;
	float: left;
	font-size:12px;
	padding: 12px 14px 14px 14px;
	border-right:1px solid rgba(0, 0, 0, 0.4);
	background: rgba(0, 0, 0, 0.1);
}
#footer_menu .imgmenu {
	padding:5px 8px 3px 14px;
	float:left;
	background:url("http://forumstatic.ru/files/000f/33/e7/67333.png") 13px 5px no-repeat;
	width:36px;
	height:30px;
	border:none;
	border-right:1px solid rgba(0, 0, 0, 0.4);
	cursor:pointer;
}
#footer_menu li:hover {
	background:#202020; /* Fallback color for old browsers */
	background: rgba(0, 0, 0, 0.3);
}
#footer_menu .imgmenu:hover {
	background:url("http://forumstatic.ru/files/000f/33/e7/22492.png") 13px 5px no-repeat;
}
#footer_menu li a {
	display: block;
	color: #cccccc;
	text-decoration: none;
}
#footer_menu li a:hover {
	color: #ffffff;
}
#footer_menu li span {
	display:none;
}
#stickey_footer #social_icons {
	float:right; /* social icons positions */
	width:auto;
	margin:5px 15px 0px;
	padding:0px;
	overflow:hidden;
}
#stickey_footer #social_icons li {
	margin-right:12px; /* 12px is the space between each one of them */
	float:left;
	width:24px;
	padding:0px;
	height:32px;
	list-style:none;
	_margin-right:0px; /* this is for IE6 only */

DEMO