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

Code:

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

/**********************************************/
/* START styles for horizontal navigation bar**/
/**********************************************/

Code:

ul {
	margin: 0;
	padding: 0;
	text-decoration: none; 
	list-style-type: none;
	text-align: center;
	}

Code:

li { 
	float: right;
	}

Code:

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

Code:

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

Quote:

Originally Posted by meesa

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

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:

Code:

#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:

Code:

<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

3rd August 11, 12:22 PM	#1
acekicker77 WLC Member Join Date: Jul 2011 Location: London Posts: 14	Horizontal Navigation Bar: Can't center ?!?! 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 Code: #hnav-box { width: 800px; border: 1px solid #000; float: left; } /*********************************************/ / START styles for horizontal navigation bar/ /******************************************/ Code: ul { margin: 0; padding: 0; text-decoration: none; list-style-type: none; text-align: center; } Code: li { float: right; } Code: a { text-decoration: none; color: #2E0854; display: block; width: 100px; margin-right: 5px; padding: 1x; } Code:** a:hover { text-decoration: none; background-color: #2E0854; color: #fff; }

3rd August 11, 04:52 PM	#4
meesa WLC Mod Join Date: Jul 2009 Location: Milky Way Galaxy Posts: 3,134	Re: Horizontal Navigation Bar: Can't center ?!?! If it's going outside of the designated area, then you're skipping the step that brings it back in, and centers it. __________________ Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.

3rd August 11, 10:16 PM	#7
meesa WLC Mod Join Date: Jul 2009 Location: Milky Way Galaxy Posts: 3,134	Re: Horizontal Navigation Bar: Can't center ?!?! It looks like your missing a few float styles. __________________ Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.

4th August 11, 09:01 AM	#8
acekicker77 WLC Member Join Date: Jul 2011 Location: London Posts: 14	Re: Horizontal Navigation Bar: Can't center ?!?! Gave up! :-) Decided to "fake it" by adjusting widths of list items

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

3rd August 11, 03:38 PM	#2
meesa WLC Mod Join Date: Jul 2009 Location: Milky Way Galaxy Posts: 3,134	Re: Horizontal Navigation Bar: Can't center ?!?! Try this method (Just study the source code): http://www.css-lab.com/demos/nav/cntrd-floats.html (Link compliments of user: Rayzur) __________________ Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.

3rd August 11, 04:18 PM	#3
acekicker77 WLC Member Join Date: Jul 2011 Location: London Posts: 14	Re: Horizontal Navigation Bar: Can't center ?!?! 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.