Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

centering css navigation

Status
Not open for further replies.
keen01

keen01

MIS
Nov 16, 2004
73
US
I can't get this navigation menu to center in the Menu Layer? I've posted the html and css. Any help is appreciated. Thanks.

HTML: Can I post this here?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" href="Menu_Help.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script type="text/javascript">

startList = function() {
if (document.all && document.getElementById) {
navRoot = document.getElementById("dmenu");
for (i=0; i < navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}

window.onload=startList;
//-->
</script>

<body>
<div id="Menu">
<ul class="topmenu" id="dmenu">
<li class="topmenuli"><a href="" class="topmenutitle">Home</a></li>
<li class="topmenuli"><a href="" class="topmenutitle">About</a></li>
<li class="topmenuli"><a href="" class="topmenutitle">Stuff 1</a></li>
<li class="topmenuli"><a href="" class="topmenutitle">Stuff 2</a></li>
<li class="topmenuli"><a href="" class="topmenutitle">Other</a>
<ul class="submenuul">
<li class="submenuli"><a href="">Company Photos ...</a></li>
<li class="submenuli"><a href="">Company Forms ...</a></li>
<li class="submenuli"><a href="">Company News ...</a></li>
<li class="submenuli"><a href="">More News ...</a></li>
</ul>
</li>
</ul>
</div>
</body>

CSS Code:

body, html
{
font-family: Arial;
border: 0;
margin: 0;
text-align: center;
background-color: #FFFFCC;
}

Div
{
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0;
padding:0;
}

#Menu
{
background: #000000;
width: 800px;
height: 25px;
}

html>body #Wrapper {overflow:auto;}

#Main
{
display:table;
width: 794px;
}

/* CSS Popup */

.topmenuul{
list-style-type:none;
top: 100px;
margin:0;
padding:0;
}

.topmenuli{
list-style-type:none;
float:left;
}

.topmenutitle{
display: block;
font-weight: bold;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFF66;
padding: 4px 8px;
border-top: 1px solid white;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid white;
text-align: center;
min-width: 100px;
text-transform: uppercase;
}

.submenuul{
list-style-type:none;
position:absolute;
margin: 0;
padding:0;
display:none;
}

.submenuli a{
display:block;
width:250px;
}

li:hover ul , li.over ul{ /* lists nested under hovered list items */
display: block;
}

#dmenu li>ul {
top: 100;
left: auto;
}


/*make it pretty*/
#dmenu {
font-family: Arial, Helvetica, Sans-Serif;
font-size:12px;
}

.topmenuul {

}

.topmenutitle {
text-indent:3px;
text-decoration: none;
background-color: #0000FF;
padding:3px;
line-height:14px;
}

.submenuul {
margin-top:-1px;
background-color: #990000;
background-position: top left;
background-repeat: repeat-x;


}

.submenuli a{
bottom: 5px;
padding:3px;
text-decoration: none;
color: #FFFF66;

}

.submenuli a:hover{
text-decoration: none;
background:#336699;
color: #FFFFFF;
}

</html>
 
Sort by date Sort by votes
Well, there's absolutely nothing on your page that tells that menu to be centered. So, why should it be?

You will need to apply width to the <ul> element and give it auto left and right margins. Or you can do the same with the div that embraces it -- I don't know if 800px is your whole page size or if that is the size of the menu itself.

What I would suggest though, is to use []descendant selectors[/url] for your menu rather than classes. It will significantly de-clutter your html.
 
Upvote 0 Downvote
keen01,

Sure you can post html code (any code really)!

Here's a (off-topic, but still) nice forum tip. When you post code (like your HTML) wrap the code in these tags:

[ignore]
Code: 
[/ignore]<html stuff />[ignore]
[/ignore]

... to get this result:

Code: 
<html stuff />

It makes the posted code much easier for us to read, hence to help you :)

This kind of markup is called TGML, and here's how it works:


Regards
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
691
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
361
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
285
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
316
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
127
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top