Guest User

css image scroller

a guest
May 25th, 2013
317
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.53 KB | None | 0 0
  1. <!DOCTYPE HTML><html><head><meta charset="UTF-8">
  2.  
  3. <style type="text/css">
  4. * {
  5. margin:0;
  6. padding:0;
  7. outline:0;
  8. }
  9. body {
  10. padding-top:25px;
  11. text-align:center;
  12. }
  13. #scroll {
  14. width:600px;
  15. height:200px;
  16. margin:100px auto;
  17. background:#A3CBE0;
  18. border:2px solid #000;
  19. overflow:auto;
  20. box-shadow:0 0 10px #000;
  21. }
  22. #scroll ul {
  23. display:table;
  24. white-space:nowrap;
  25. list-style:none;
  26. }
  27. #scroll li {
  28. display:table-cell;
  29. text-align:center;
  30. }
  31. #scroll img {
  32. border:0;
  33. display:block;
  34. border:1px solid #A3CBE0;
  35. margin:15px 15px 0 15px;
  36. }
  37. #scroll a:active img, #scroll a:focus img, #scroll a:hover img {
  38. border:1px solid #000;
  39. }
  40. #scroll a {
  41. text-decoration:none;
  42. font-weight:bold;
  43. color:#000;
  44. }
  45. #scroll a:active, #scroll a:focus, #scroll a:hover {
  46. color:#FFF;
  47. }
  48. #scroll span {
  49. padding:5px 0 0;
  50. display:block;
  51. }
  52. </style>
  53. <!--[if lte IE 7]>
  54. <style type="text/css">
  55. #scroll li{display:inline-block;}
  56. #scroll li{display:inline;}
  57. </style>
  58. <![endif]-->
  59. </head>
  60. <body>
  61. <div id="scroll">
  62. <ul>
  63. <li><a href="#"><img src="http://bit.ly/13Uk71r" alt=""><span>Oggy</span></a></li>
  64. <li><a href="#"><img src="http://bit.ly/13Uk71r" alt=""><span>Oggy</span></a></li>
  65. <li><a href="#"><img src="http://bit.ly/13Uk71r" alt=""><span>Oggy</span></a></li>
  66. <li><a href="#"><img src="http://bit.ly/13Uk71r" alt=""><span>Oggy</span></a></li>
  67. <li><a href="#"><img src="http://bit.ly/13Uk71r" alt=""><span>Oggy</span></a></li>
  68. <li><a href="#"><img src="http://bit.ly/13Uk71r" alt=""><span>Oggy</span></a></li>
  69.  
  70. </ul>
  71. </div>
  72.  
  73. </body>
  74. </html>
Advertisement
Add Comment
Please, Sign In to add comment