Jump to content

Centering a horizontal navigation menu


Recommended Posts

I've tried everything that I can think of, but I am not able to center this menu for some reason. Does anyone have any suggestions?

@charset "utf-8";/* CSS Document */* {	margin: 0;	padding: 0;}body { /* Styling the body */	margin: 0;	font-size: 62.5%;	font-family: Arial, Helvetica, sans-serif;	background: url(images/body_bg.png) repeat-x top #c4c0bf;}#header-container {	height: 397px; width: 884px;	margin: 0 auto;	background: url(images/header_bg.jpg) no-repeat;}#nav-container {	position: absolute;	top: 48px;}#navMenu ul{	margin: 0;	padding: 0;	text-align: center;}#navMenu li{	display: inline;	list-style: none;	padding: 10px 5px 10px 5px;}#footer-container {	background: #3a3a3a;	font-size: 12px;	color: white;	padding: 5px 0 10px 0;	border-top: 2px solid #606060;	text-align: center;}

Link to post
Share on other sites
  • Replies 67
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Please post the corresponding HTML and confirm that the element you are concerned about is #nav-container or something else.Remember that block-level element fill the entire horizontal space of their containers unless you specify a smaller width. So even with the "margin:0 auto" rule, an element might still line up on the very left of its container.

Link to post
Share on other sites
<body><header>	<div id="nav-container">		<ul id="navMenu">			<li><a href="#">Home</a></li>			<li><a href="#">At A Glance</a></li>			<li><a href="#">About</a></li>			<li><a href="#">Gallery</a></li>			<li><a href="#">Senior Challenge</a></li>			<li><a href="#">Prices</a></li>			<li><a href="#">Contact</a></li>			<li><a href="#">Log-In</a></li>		</ul>	</div></header>	<div id="main-container"></div>	<footer><p>Copyright © 2003 - <?php echo date('Y');?> Ruth Olson Photography</p></footer><script type="text/javascript" src="js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="js/js_script.js"></script></body>

Link to post
Share on other sites
Please post the corresponding HTML and confirm that the element you are concerned about is #nav-container or something else.Remember that block-level element fill the entire horizontal space of their containers unless you specify a smaller width. So even with the "margin:0 auto" rule, an element might still line up on the very left of its container.
And I don't want the menu to start from the left. I want the menu to be perfectly centered with the page.
Link to post
Share on other sites

first of all, why are you using positioning? As DD asked, which ID are you trying to center? Centering a block level element is as simple as applying margin: 0px auto and giving the element a width that doesn't equal the width of it's container. If you don't specify a width, a block level element will automatically expand to fill the width of its container, which defeats the effect of trying to center it.

Link to post
Share on other sites
first of all, why are you using positioning? As DD asked, which ID are you trying to center? Centering a block level element is as simple as applying margin: 0px auto and giving the element a width that doesn't equal the width of it's container. If you don't specify a width, a block level element will automatically expand to fill the width of its container, which defeats the effect of trying to center it.
I'm trying to center either ID "nav-container" or "navMenu". I'm unsure whether centering "nav-container" will filter down can center "navMenu" as well.And I'm using positioning because I was trying to position the navigation menu to be under the logo line of this graphic:header_bg.jpgAnd not under the entire graphic, necessarily. Someone over in the html forum told me to do so, so I did.
Link to post
Share on other sites
#navMenu ul

Be aware that this selector matches a <ul> element that is a descendant of an element whose id is "navMenu". Your actual HTML defines a <ul> element whose id is "navMenu". So they are not the same. You can use either of the following to match your HTML:

ul#navMenu#navMenu

Notice in the first one that I have reversed the sequence and removed the space. The second one generally works by itself because an ID is always unique. Most developers would use the second one.

Link to post
Share on other sites
#navMenu ul

Be aware that this selector matches a <ul> element that is a descendant of an element whose id is "navMenu". Your actual HTML defines a <ul> element whose id is "navMenu". So they are not the same. You can use either of the following to match your HTML:

ul#navMenu#navMenu

Notice in the first one that I have reversed the sequence and removed the space. The second one generally works by itself because an ID is always unique. Most developers would use the second one.

Ok. Would I have to do the same thing to the list items? Converting them from...
#navMenu li to li#navMenu

Link to post
Share on other sites

Positioning can have a lot of unwanted effects, and anyone who immediately jumps to that solution is not a good source of advice. For that background logo, you might to better to include an element at the top of your page, like a div, and give it the logo background instead. I'm not sure what your <header> element is, but if it functions like a div and its width is 100% of the window, then attaching the background to it might be the ideal solution.

Link to post
Share on other sites
Positioning can have a lot of unwanted effects, and anyone who immediately jumps to that solution is not a good source of advice. For that background logo, you might to better to include an element at the top of your page, like a div, and give it the logo background instead. I'm not sure what your <header> element is, but if it functions like a div and its width is 100% of the window, then attaching the background to it might be the ideal solution.
Oh the header comes from what I read was basic html5 syntax. This is being made to be html5 compliant.During a podcast I was viewing, the guy said that the new way t do it would be to use the header tag to hold everything that resides up top.Was I wrong to do this? Edited by psionicsin
Link to post
Share on other sites

not quite. DD recommended the second of the two options, which I also agree with. Based on that, you're current CSS for <li>'s is fine because as DD explained, this syntax #navMenu li will be read all li's that are a descendant of #navMenu. The confusion was that #navMenu ul was a unique ID but was also an <ul>, which is what causing the confusion/conflict.

Edited by thescientist
Link to post
Share on other sites

Not a bad idea to use a <header> element, except that IE will not recognize it; other browsers will treat it like a div, so using it is fine there. Just not IE. We are still in transition. I suggest using a <div> there for now, and giving it an id like "header".

Link to post
Share on other sites
not quite. DD recommended the second of the two options, which I also agree with. Based on that, you're current CSS for <li>'s is fine because as DD explained, this syntax #navMenu li will be read all li's that are a descendant of #navMenu. The confusion was that #navMenu ul was a unique ID but was also an <ul>, which is what causing the confusion/conflict.
Ok, and yes, i was confused for a moment. And just so you guys know, I'm doing this as html5. I say this because he asked about why I was using a header tag.
Link to post
Share on other sites
Not a bad idea to use a <header> element, except that IE will not recognize it; other browsers will treat it like a div, so using it is fine there. Just not IE. We are still in transition. I suggest using a <div> there for now, and giving it an id like "header".
Well I'm making use of the modernizr javascript plugin which does something to force IE to read html5 just fine. I'm not fluent on the inner workings of it. I was just told to link it in because it helps IE to be able to render html5.
Link to post
Share on other sites

I know nothing about this plugin, but I can imagine how it works. Yes, IE can be forced to understand this kind of HTML, but only because the kind of elements you are using have no special properties. If it works, okay.

Edited by Deirdre's Dad
Link to post
Share on other sites
I know nothing about this plugin, but I can imagine how it works. Yes, IE can be forced to understand this kind of HTML, but only because the kind of elements you are using have no special properties. If it works, okay.
Here. Maybe this will help you to see everything that's going on so far. Current Site Build.I don't wanna touch anything else and risk screwing it up without having you visually look through it lol.
Link to post
Share on other sites

I would still personally code to HTML4.01 Strict until the HTML5 draft is completed and fully supported by all browsers. I personally try and keep any reliance on third party hacks/fixes/libraries to a minimum as much as possible. For the case of API's you don't have much of a choice, but then that's the nature of the beast.

Link to post
Share on other sites
Here. Maybe this will help you to see everything that's going on so far. Current Site Build.I don't wanna touch anything else and risk screwing it up without having you visually look through it lol.
just make a working version and sandbox version. When you reach a particular milestone, save your code in a different folder, or upload it to your host. That will be your working backup and then you can continue to work on your code worry free.
Link to post
Share on other sites
just make a working version and sandbox version. When you reach a particular milestone, save your code in a different folder, or upload it to your host. That will be your working backup and then you can continue to work on your code worry free.
I am doing that. Everything is running locally right now. Nothing is actually online. Take a look.
Link to post
Share on other sites

Ok I changed my CSS. Got rid of the positioning and did this instead. This SEEMS to have done the trick:

ul#navMenu {	margin: 0;	padding: 0;	text-align: center;}ul#navMenu li{	display: block;	width: 100px;	float: left;	margin-top: 48px;}

Edited by psionicsin
Link to post
Share on other sites

EDIT: I was writing this while you posted above. It's still something to think about.Unless you have a drastic need for a LOT of HTML5 and CSS3 features, this modernizing script does not sound very modern. (Yes, I looked at it. It's kewl the way Lady GaGa is kewl.)If all you really want is to add IE support for a few semantic (unstyled and non-behavioral) elements like <header> and <footer>, add code like this to the top of your script (not in a functon):

var myHeader = createElement('header');var myFooter = createElement('footer');

If you really do need those other features, then maybe modernizr is not so bad. Still, there is something weird about writing a page that is compliant with a standard that will only exist in the future, and on top of that adding a bunch of code to force it to work in the present.Especially when it is clear that you have only a limited grasp of the way the current standards function. I don't mean that in a bad way. I'm suggesting that you master the present before moving to the future.

Edited by Deirdre's Dad
Link to post
Share on other sites
Unless you have a drastic need for a LOT of HTML5 and CSS3 features, this modernizing script does not sound very modern. (Yes, I looked at it. It's kewl the way Lady GaGa is kewl.)If all you really want is to add IE support for a few semantic (unstyled and non-behavioral) elements like <header> and <footer>, add code like this to the top of your script (not in a functon):
var myHeader = createElement('header');var myFooter = createElement('footer');

If you really do need those other features, then maybe modernizr is not so bad. Still, there is something weird about writing a page that is compliant with a standard that will only exist in the future, and on top of that adding a bunch of code to force it to work in the present.Especially when it is clear that you have only a limited grasp of the way the current standards function. I don't mean that in a bad way. I'm suggesting that you master the present before moving to the future.

You are right. I do NOT need those extra features. I don't even know what all the modernizr plugin does, except for I was told to use it to allow IE to be able to read html5.But in the past 5 or so minutes I've remove the header and footer tags, and have replaced them with divs. CSS changed to respond to the html change.Now...I'm still stuck with the problem of centering my navigation menu items.
Link to post
Share on other sites
Unless you have a drastic need for a LOT of HTML5 and CSS3 features, this modernizing script does not sound very modern. (Yes, I looked at it. It's kewl the way Lady GaGa is kewl.)
oh, she's just my FAVORITE! :):)
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...