0

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
3
Views
8 Years
Discussion Span
Last Post by !!underlink!!
0

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

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.