Advanced Search

Centred footer list menu 1

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

Expand | Embed | Plain Text

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.