PDA

View Full Version : Horizontal Navigation Bar: Can't center ?!?!

acekicker77
3rd August 11, 12:22 PM
Guys,

Having a problem centering this horizontal navigation bar. The navigation bar is contained within a box #hnav-box. As you can see the list items are not centered in this box.

How do I get around this? www.mauricegreenland.com (http://www.mauricegreenland.com)

#hnav-box {
width: 800px;
border: 1px solid #000;
float: left;
}

/**********************************************/
/* START styles for horizontal navigation bar**/
/**********************************************/
ul {
margin: 0;
padding: 0;
text-decoration: none;
list-style-type: none;
text-align: center;
}

li {
float: right;
}

a {
text-decoration: none;
color: #2E0854;
display: block;
width: 100px;
margin-right: 5px;
padding: 1x;
}

a:hover {
text-decoration: none;
background-color: #2E0854;
color: #fff;
}
meesa
3rd August 11, 03:38 PM
Try this method (Just study the source code): http://www.css-lab.com/demos/nav/cntrd-floats.html (Link compliments of user: Rayzur)
acekicker77
3rd August 11, 04:18 PM
Thanks tried that, still could not get it ul to center in the #hnav-box

When I used the previous technique the ul would float oustide of the #hnav-box.
meesa
3rd August 11, 04:52 PM
If it's going outside of the designated area, then you're skipping the step that brings it back in, and centers it.
acekicker77
3rd August 11, 04:55 PM
If it's going outside of the designated area, then you're skipping the step that brings it back in, and centers it.

ok i'll try again and show you the css once I'm done
acekicker77
3rd August 11, 10:01 PM
:S:S:S Tried it again, failed!

#nav is all the way out to the right

ul, l, a appear to be floating left in #hnav-box (i think)

Any ideas?

CSS:

#header {
width: 920px;
margin: 0 auto;
border: 1px solid #333;
overflow: hidden;
}

#wrapper {
width: 920px;
margin: 0 auto;
border: 1px solid #000;
}

#content {
width: 820px;
margin: 0 auto 20px;
border: 1px solid red;
padding: 10px;
}

#c-box {
width: 700px;
margin: 30px auto 0;
border: 1px dotted blue;
padding-left: 5px;
}
#footer {
width: 920px;
margin: 0 auto;
border: 1px solid #333;
}

/*describes styles for container around the horizontal navigation bar*/

#hnav-box {
width: 800px;
border: 1px solid #000;
float: left;
clear: both;
overflow: hidden;
}

#nav {
width: 800px;
border: 1px solid blue;
overflow: hidden;
position:relative;
left:50%;
}

/**********************************************/
/* START styles for horizontal navigation bar**/
/**********************************************/
#hnav-box ul {
margin: 0;
padding: 0; /*Set padding and margin to 0 to remove browser defaults*/
text-decoration: none; /*Removes the bullets. Horizontal Navigations bars dont need list markers*/
list-style-type: none;
text-align: center;
position:relative;
left:-50%;
}

#hnav-box li {
float: left; /* list items can be displayed horizontal using either float or inline. if you want the list items to be equal length, use float*/
}

#hnav-box li a {
text-decoration: none;
color: #2E0854;
display: block; /*Displaying as block makes the whole link area clickable not just the text. Also alows us to specify the width*/
width: 100px; /*width of each link*/
margin-right: 5px;
padding: 1x;
}

#hnav-box li a:hover {
text-decoration: none;
background-color: #2E0854;
color: #fff;
}

HTML:
<body>
<a name="top"></a>

<div id="header">
header
</div><!--Close #header-->

<div id="wrapper">
wrapper

<div id="content">
<div id="hnav-box"><!-- Contains #hnav -->
<div id="nav">
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#itinerary">Our Itinerary</a></li>
<li><a href="#accommodation">Accommodation</a></li>
<li><a href="#guestinfo">Guest Info</a></li>
<li><a href="#venue">The Venue</a></li>
<li><a href="#">Home</a></li>

</ul>
</div><!--Close #nav-->
</div><!--Close #hnav-box-->
meesa
3rd August 11, 10:16 PM
It looks like your missing a few float styles.
acekicker77
4th August 11, 09:01 AM
Gave up! :-) Decided to "fake it" by adjusting widths of list items