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 */