Centred footer list menu 1


/ Published in: HTML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  5. <title>Centred footer list menu</title>
  6. <style type="text/css" media="screen">
  7.  
  8. html { background-color: #ccc; }
  9.  
  10. #container {
  11. margin-left: auto;
  12. margin-right: auto;
  13. width: 980px;
  14. background-color: #eee;
  15. }
  16.  
  17. #footer {
  18. background-color: #191816;
  19. width: 940px;
  20. clear: both;
  21. font-size: 1.2em;
  22. margin-right: 20px;
  23. margin-left: 20px;
  24. text-align: center;
  25. padding-top: 5px;
  26. padding-bottom: 5px;
  27. }
  28.  
  29. #footer ul {
  30. list-style-type: none;
  31. padding: 0;
  32. display: -moz-inline-box; /* For FF<3 */
  33. display: inline-block; /* IE <8 needs this tripped back to display: inline; to make it work on block elements - see conditional below */
  34. vertical-align: middle; /* explicitly declare your preference as Moz inline-box auto aligns to top */
  35. margin-left: auto; margin-right: auto;
  36. }
  37.  
  38. #footer ul li {
  39. float: left;
  40. padding-right: 10px;
  41. border-right: 1px solid #ccc;
  42. padding-left: 10px;
  43. }
  44.  
  45. #footer ul li a, #footer ul li a:visited, #footer ul li a:active {
  46. color: #fff;
  47. }
  48.  
  49. #footer ul li a:hover {
  50. color: #fff;
  51. }
  52.  
  53. #footer ul li.last {
  54. border: none;
  55. }
  56. </style>
  57.  
  58. <!--[if lt IE 8]>
  59. <style type="text/css" media="screen">
  60. #footer ul {display: inline;} /* this is to make inline-block work on block elements versions <IE8 */
  61. #footer ul li {display: inline;}
  62. </style>
  63. <![endif]-->
  64. </head>
  65. <body>
  66. <div id="container">
  67. <div id="footer">
  68. <ul>
  69. <li><a>test list alignment</a>s</li>
  70. <li><a>list alignment</a></li>
  71. <li><a>list alignment</a></li>
  72. </ul>
  73. </div>
  74. </div>
  75. </body>
  76. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.