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 gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Centering navigation bar

Status
Not open for further replies.
GRIFFIJ

GRIFFIJ

Programmer
Aug 29, 2002
43
GB
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>

 
Sort by date Sort by votes
Please, please, please use [ignore]
Code: 
 code data here
[/ignore] 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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Krus1972
  • Locked
  • Question
Centering Content Within a Fixed Navigation Menu
Replies
10
Views
220
ChrisHirst
ChrisHirst
k4ghg
  • Locked
  • Question
Liquid vertical bar 1
Replies
2
Views
166
k4ghg
k4ghg
c0deM0nK424
  • Locked
  • Question
Making bootstrap navigation bar links 'collapse' too soon ?
Replies
1
Views
109
vacunita
vacunita
makamo66
  • Locked
  • Question
Horizontal Scroll Bar Not Hidden for Media Query
Replies
3
Views
116
makamo66
makamo66
c0deM0nK424
  • Locked
  • Question
Problem with positioning Logo, Search Box and Language Bar OUTSIDE of the navbar (Bootstrap) 1
Replies
2
Views
103
c0deM0nK424
c0deM0nK424

Part and Inventory Search

Sponsor

Back
Top