INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Centering navigation bar

Centering navigation bar

(OP)
Hi I have a web pay that is Divided into four sections:

Header
navigation area
main content area
footer

I have managed to place my navigation bar inside navigation area however the issue that I have I cannot seem to centre it. It is driving me nuts.

The other issue that I have is that my sub menus are all positioned the way they should be however the buttons below do not appear to have the same spacing as the ones above. I have enclosed a copy of my code and CSS.

If anybody can help I would be eternally grateful

Thanks Joel

CSS Code


*{
margin: 0;
padding: 0;
}

div#container {
width: 1024px;
margin: 10px auto;
}

header {
background-color: Pink;
min-height: 80px;
width: 960px;
margin-right: auto;
margin-left: auto;
}
#navmenu {
background-color: #ABC;
height: 80px;
width: 960px;
margin-right: auto;
margin-left: auto;
}


#main {
background-color: yellow;
min-height: 300px;
width: 960px;
margin-right: auto;
margin-left: auto;
}

footer {
background-color: #090;
min-height: 60px;
width: 960px;
margin-right: auto;
margin-left: auto;
}

/* Rules of Navigation Menu*/
/*=========================*/

ul#navmenu, ul.sub1, ul.sub2 {
list-style-type: none;
}

ul#navmenu li {
width: 145px;
text-align: center;
position: relative;
float: left;
margin-top: 4px;
margin-right: 4px;
}

ul#navmenu a {
text-decoration: none;
display: block;
width: 145px;
height: 25px;
line-height: 25px;
background-color: #fff;
border-radius: 5px;
}
ul#navmenu .sub1 li {
margin-top: 5px;

}

ul#navmenu .sub1 a {
margin-top: 3px
}

ul#navmenu .sub2 a{
margin-left: 9px;
}

ul#navmenu li:hover > a {
background-color: #cfc;
}

ul#navmenu li:hover > a:hover {
background-color: #FF0;
}

ul#navmenu ul.sub1 {
display: none;
position: absolute;
top: 20px;
left: 0px;
}

ul#navmenu ul.sub2 {
display: block;
position: absolute;
top: -5px;
left: 140px;
}

ul#navmenu li:hover .sub1 {
display: block;
}

HTML Code

<head>
</head>
<body>

<div id="container">

<header>
This is the Header
</header> <!--END OF HEADER DIV-->

<ul id="navmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Holiday</a>
<ul class="sub1">
<li><a href="#">Travel</a>
<ul class="sub2">
<li><a href="#">Travel At A Glance</a></li>
<li><a href="#">Inbound</a></li>
<li><a href="#">Outbound</a></li>
<li><a href="#">Things To Remember</a></li>
</ul> <!--END OF TRAVEL SUB UNORDERED LIST-->
</li>
<li><a href="#">Cost</a></li>
<li><a href="#">Calender</a></li>
</ul> <!--END OF HOLIDAY SUB UNORDERED LIST-->
</li>
<li><a href="#">Disney</a>
<ul class="sub1">
<li><a href="#">Parks</a>
<ul class="sub2">
<li><a href="#">Magic Kingdom</a></li>
<li><a href="#">Epcot</a></li>
<li><a href="#">Animal Kingdom</a></li>
<li><a href="#">Hollywood Studios</a></li>
<li><a href="#">Typhoon Lagoon</a></li>
<li><a href="#">Blizzard Beach</a></li>
</ul> <!--END OF DISNEY PARKS SUB UNORDERED LIST-->
</li>
</ul> <!--END OF DISNEY SUB UNORDERED LIST-->
</li>
<li><a href="#">Non Disney</a>
<ul class="sub1">
<li><a href="#">Parks</a>
<ul class="sub2">
<li><a href="#">Sea World</a></li>
<li><a href="#">Universal Studios</a></li>
</ul> <!--END OF NON DISNEY PARKS SUB UNORDERED LIST-->
</li>
</ul> <!--END OF NON DISNEY SUB UNORDERED LIST-->
</li>
<li><a href="#">Shopping</a></li>
<li><a href="#">About</a></li>
</ul> <!--END OF MAIN UNORDERED LIST-->

<div id="main">
This is the main content area.</div> <!--END OF MAIN DIV-->

<footer>
This is the footer
</footer> <!--END OF HEADER DIV-->

</div> <!--END OF CONTAINER DIV-->

</body>
</html>

RE: Centering navigation bar

Please, please, please use [code language] code data here [/code] tags to display code segments as it makes it much easier to read or copy for testing.


The li elements are set to float: left; so that IS what they will do.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Centering navigation bar

What is it you want centered? the navigation <li> if so why are you floating them to the left? If you float something to the left, it moves to the left as much as it can.

If you want to center them, try giving your <li> elements a display of inline-block and then adding a text-align:center; to the ul surrounding them.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close