Jump to content

Centering a horizontal navigation menu

psionicsin

By psionicsin
in CSS

Recommended Posts

psionicsin Newbie

psionicsin

Posted
Posted

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 comment
Share on other sites
  • Replies 67
  • Created
  • Last Reply
jeffman w3schools Guru

jeffman

Posted
Posted

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 comment
Share on other sites
psionicsin Newbie

psionicsin

Posted
  • Author
Posted 
<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 comment
Share on other sites
psionicsin Newbie

psionicsin

Posted
  • Author
Posted
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 comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

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 comment
Share on other sites
psionicsin Newbie

psionicsin

Posted
  • Author
Posted
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 comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted 
#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 comment
Share on other sites
psionicsin Newbie

psionicsin

Posted
  • Author
Posted 
#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 comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

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 comment
Share on other sites
psionicsin Newbie

psionicsin

Posted
  • Author
Posted
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?
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

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.

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

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 comment
Share on other sites
psionicsin Newbie

psionicsin

Posted
  • Author
Posted
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 comment
Share on other sites
psionicsin Newbie

psionicsin

Posted
  • Author
Posted
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 comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

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.

Link to comment
Share on other sites
psionicsin Newbie

psionicsin

Posted
  • Author
Posted
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 comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

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 comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
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 comment
Share on other sites
psionicsin Newbie

psionicsin

Posted
  • Author
Posted
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 comment
Share on other sites
psionicsin Newbie

psionicsin

Posted
  • Author
Posted

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;}

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

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.

Link to comment
Share on other sites
psionicsin Newbie

psionicsin

Posted
  • Author
Posted
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 comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
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 comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...