Member Avatar for SteveKubrick

Hi,

I want to place my horizontal navigation below the content in my xhtml and absolute position the navigation so it appears above the content when the page renders.

However I also want the navigation to be centered on the page. I've worked out how to do it but I think the code might be inefficient as it requires two div wrappers.

Has anyone got any suggestions to keep the code concise?

xhtml:

<body>
    <div style="position: absolute; top: 350px; border: 1px solid #000000; width: 85%; height: 300px">
    			<div style="margin: 0 auto; border: 1px solid #000000; width: 630px; height: 50px">
					<ul id="mainNav">
						<li><a href="index.html">Home</a></li>
						<li><a href="details.html">Details</a></li>
						<li><a href="gallery.html">Gallery</a></li>
						<li><a href="thingstodo.html">Things To Do</a></li>
						<li><a href="finally.html">And Finally...</a></li>
					</ul>
                </div>
     </div>
                <span style="clear:both"><br /></span>
	</body>

css:

body {
	text-align: center;
}
ul#mainNav{
	/* only for wireframe*/
border: 1px solid #000000;
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
ul#mainNav a{
display: block;
line-height: 2.1em;
padding: 0 2em;
text-decoration: none;
/* only for wireframe */
border: 1px solid #000000;
}
ul#mainNav li {
	float: left;
}

ps inline styles are there just for the test case.

Thanks for your help!

  • 3 Contributors
  • 2 Replies
  • 85 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by !!underlink!!
Member Avatar for Airshow

Steve,

Div wrappers are actually unnecessary because UL is already a block element. Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Site</title>
<style type="text/css">
#mainNav{
	list-style: none;
	margin: 0px;
	padding: 0px;
	text-align: center;
	border: 1px solid #000000;
	background-color: #e0e0e0;
}
#mainNav li {
	display: inline;
	border:0 solid #000000;
	border-left-width: 1px;
}
#mainNav li.first {
	border-left-width: 0;
}
#mainNav a{
	line-height: 2.1em;
	padding: 0 2em;
	text-decoration: none;
	font-family: arial,sans-serif;
	font-size: 10pt;
	color: #0000FF;
}
#mainNav a:hover {
	color: #000066;
}
</style>
</head>

<body>

<ul id="mainNav">
	<li class="first"><a href="index.html">Home</a></li>
	<li><a href="details.html">Details</a></li>
	<li><a href="gallery.html">Gallery</a></li>
	<li><a href="thingstodo.html">Things To Do</a></li>
	<li><a href="finally.html">And Finally...</a></li>
</ul>
</body>
</html>

My favourite example of styled lists is the UEFA home page - http://www.uefa.com/index.html. View source to see the HTML, and with a little effort you can see the CSS.

Airshow

Member Avatar for !!underlink!!

that is true but DIV elements are alot of compatable with style in differant browsers than other block elements

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.