Return to Snippet

Revision: 12862
at March 30, 2009 22:09 by hotdiggity


Initial Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
		<title>Centred footer list menu</title>
		<style type="text/css" media="screen">

html { background-color: #ccc; }

#container { 
    margin-left: auto;
				margin-right: auto;
				width: 980px;
				background-color: #eee;
			}

#footer {
	background-color: #191816;
	width: 940px;
	clear: both;
	font-size: 1.2em;
	margin-right: 20px;
	margin-left: 20px;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
}

#footer ul {
	list-style-type: none;
	padding: 0;
	display: -moz-inline-box; /* For FF<3 */
	display: inline-block; /* IE <8 needs this tripped back to display: inline; to make it work on block elements - see conditional below */
 vertical-align: middle; /* explicitly declare your preference as Moz inline-box auto aligns to top */
	margin-left: auto; margin-right: auto;
}

#footer ul li {
	float: left;
	padding-right: 10px;
	border-right: 1px solid #ccc;
	padding-left: 10px;
}

#footer ul li a, #footer ul li a:visited, #footer ul li a:active {
	color: #fff;
}

 #footer ul li a:hover {
	color: #fff;
}

#footer ul li.last {
	border: none;
}
		</style>

<!--[if lt IE 8]>
<style type="text/css" media="screen">
#footer ul {display: inline;} /* this is to make inline-block work on block elements versions <IE8 */
#footer ul li {display: inline;}
</style>
<![endif]-->
	</head>
	<body>
		<div id="container">
			<div id="footer">
				<ul>
					<li><a>test list alignment</a>s</li>
					<li><a>list alignment</a></li>
					<li><a>list alignment</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

Initial URL


Initial Description


Initial Title
Centred footer list menu 1

Initial Tags
css, html

Initial Language
HTML