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
  • 103 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by !!underlink!!

Dani AI

Generated

Short answer: you do not need two wrapper DIVs. As pointed out, the UL is already a block-level element and can be centered with minimal markup. If you need the nav later in the source but visually positioned above content, use absolute positioning for the nav itself (not an extra outer holder) and center it with CSS. That keeps markup concise and preserves the source order you want.

A compact, robust pattern that avoids floats and extra wrappers uses a horizontal centering transform plus a modern layout for the list items:

nav#mainNav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: /* whatever vertical offset you need */;
  z-index: 10;            /* places nav above content */
  max-width: 900px;       /* optional for responsiveness */
}

nav#mainNav ul {
  display: flex;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

Notes and cautions: use a semantic wrapper (the HTML5 nav element or role="navigation" for older markups) and keep the UL inside it. Flexbox removes the need for floats and odd inline-block spacing hacks. If supporting very old browsers that lack transforms, the alternative is an absolute element with left:0; right:0; width:XXXpx; margin:0 auto;, but that is less flexible for responsive layouts. Also remember to set a higher z-index if the nav must overlay content, and prefer max-width or percentage widths rather than hard pixel widths for responsive pages.

Further reading: CSS transform, Flexbox basics, HTML nav element.

Acknowledgement: this builds on 's minimal-markup idea and clarifies the compatibility point raised by .

Recommended Answers

All 2 Replies

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.