Jump to content

Centering a horizontal navigation menu


Recommended Posts

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.
what does the code look like presently?
Link to post
Share on other sites
  • Replies 67
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

HTML:

<!DOCTYPE HTML><!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--><!--[if IE 7 ]>	<html lang="en" class="no-js ie7"> <![endif]--><!--[if IE 8 ]>	<html lang="en" class="no-js ie8"> <![endif]--><!--[if IE 9 ]>	<html lang="en" class="no-js ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]--><html><head>	<meta charset="utf-8">	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">		<title>Ruth Olson Photography</title>		<meta name="viewport" content="width=device-width, initial-scale=1.0">		<link rel="stylesheet" type="text/css" href="css/style.css"/>	<script src="js/modernizr-1.6.min.js"></script></head><body><div id="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></div>	<div id="main-container"></div>	<div id="footer"><p>Copyright © 2003 - <?php echo date('Y');?> Ruth Olson Photography</p></div><script type="text/javascript" src="js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="js/js_script.js"></script></body></html>

CSS:

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

Link to post
Share on other sites

I though you were going to get rid of all that hacky stuff? :)add this to your CSS:

#nav-container{  margin: 0px auto;  width: 800px;}

Link to post
Share on other sites
I though you were going to get rid of all that hacky stuff? :)add this to your CSS:
#nav-container{  margin: 0px auto;  width: 800px;}

Yes, I'm editing the hacky stuff out lol.Hmm that didn't do anything...unless I need to remove some formatting elsewhere. Edited by psionicsin
Link to post
Share on other sites

try using underscores (_) instead of hyphen's (-) for the class namesedit: I thought you had a horizontal nav bar, but its looks vertical. on top of the name change, give nav container a width equal to the width of one of the <li>'s

Edited by thescientist
Link to post
Share on other sites
try using underscores (_) instead of hyphen's (-) for the class namesedit: I thought you had a horizontal nav bar, but its looks vertical. on top of the name change, give nav container a width equal to the width of one of the <li>'s
NOTE: It IS a horizontal nav bar. Or at least is supposed to be.Nada.Here's the latest HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	<title>Ruth Olson Photography</title>	<meta name="viewport" content="width=device-width, initial-scale=1.0">	<link rel="stylesheet" type="text/css" href="css/style.css"/></head><body><div id="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></div>	<div id="main_container"></div>	<div id="footer"><p>Copyright © 2003 - <?php echo date('Y');?> Ruth Olson Photography</p></div><script type="text/javascript" src="js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="js/js_script.js"></script></body></html>

Latest CSS:

@charset "utf-8";/* CSS Styling */* {	margin: 0;	padding: 0;}/* Styling the body */body {	margin: 0;	font-size: 62.5%;	font-family: Arial, Helvetica, sans-serif;	background: url(images/body_bg.png) repeat-x top #c4c0bf;}/* Styling the Header */#header {	margin: 0 auto;	height: 397px; width: 884px;	background: url(images/header_bg.jpg);}/* Styling the Footer */#footer {	background: #3a3a3a;	font-size: 12px;	color: white;	padding: 5px 0 10px 0;	border-top: 2px solid #606060;	text-align: center;}/* Styling the Navigation Menu */#nav_container {	margin: 0px auto;	width: 884px;}ul#navMenu {	margin: 0px;	padding: 0px;	text-align: center;	list-style: none;}ul#navMenu li a{	display: block;	width: 100px;	float: left;	margin-top: 48px;	text-decoration: none;	color: white;	font-weight: bold;}

Edited by psionicsin
Link to post
Share on other sites

ok, I threw your code into my text editor and fired it up. As I suspected, it was just a matter of some trial and error with element widths. For ul#navMenu li a change the width to 90px.For #nav_container change the width to 720px.btw, I like the look of it so far. :)edit: changed 70 to 90

Edited by thescientist
Link to post
Share on other sites
So far this is what I'm getting. This is a screenshot directly out of Dreamweaver.visual.jpg
oh! be aware, you should always be testing your work in a real, standards compliant browser like FF or Chrome. From there expand outward to test the others (starting with IE and working your way down the list)
Link to post
Share on other sites
ok, I threw your code into my text editor and fired it up. As I suspected, it was just a matter of some trial and error with element widths. For ul#navMenu li a change the width to 70px.For #nav_container change the width to 720px.btw, I like the look of it so far. :)
Ok why are 70px and 720px relavent numbers? Yes it did work, and centered them just fine, but I'm wondering why because that main graphic is 884px wide. And also the 70px made the "senior challenge" menu item into a two tiered word.Also, yes, I'm actually checking it back-to-back in FF, Chrome, and IE.And thanks. I'm FAR more of a designer than an actual coder, so each time I do this it ends up being a PITA for me and people like you lol. Edited by psionicsin
Link to post
Share on other sites

I meant 90px. 90 was the smallest value I could get where all the text was on one line. 90 * 8 = 720px. That's as wide as the nav menu needs to be.

Link to post
Share on other sites

Ok. One more question, and then I'm done for tonight.I just specified the dimensions for my main_container div, but it's currently sitting at the bottom of the header div. What do I need to add to my coding in order for the main_container div to sit 68px from the top of the browser screen?

#main_container {height: 540px;width: 800px;margin-left: auto;margin-right: auto;}

Edited by psionicsin
Link to post
Share on other sites

margin-top: 68px;in the vein of one of the great poster's round this part, "you're homework for tonight"... is to read up on the box model.http://www.w3schools.com/css/css_boxmodel.asplook good so far. keep up the good work.

Link to post
Share on other sites
margin-top: 68px;in the vein of one of the great poster's round this part, "you're homework for tonight"... is to read up on the box model.http://www.w3schools.com/css/css_boxmodel.asplook good so far. keep up the good work.
Will definitely read up on that. Although adding "margin-top: 68px" just made that the distance between both divs now, instead of positioning it 68px form the top of the screen.
Link to post
Share on other sites

sorry I mis-understood your request. Can you post what you have now?

Edited by thescientist
Link to post
Share on other sites
sorry I understood your request. Can you post what you have now?
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	<title>Ruth Olson Photography</title>	<meta name="viewport" content="width=device-width, initial-scale=1.0">	<link rel="stylesheet" type="text/css" href="css/style.css"/></head><body><div id="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></div>	<div id="main_container"></div>	<div id="footer"><p>Copyright © 2003 - <?php echo date('Y');?> Ruth Olson Photography</p></div><script type="text/javascript" src="js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="js/js_script.js"></script></body></html>

CSS:

@charset "utf-8";/* CSS Styling */* {	margin: 0;	padding: 0;}/* Styling the body */body {	margin: 0;	font-size: 62.5%;	font-family: Arial, Helvetica, sans-serif;	background: url(images/body_bg.png) repeat-x top #c4c0bf;}/* Styling the Header */#header {	margin: 0 auto;	height: 397px; width: 884px;	background: url(images/header_bg.jpg);}/* Styling the Footer */#footer {	background: #292929;	font-size: 12px;	color: white;	padding: 5px 0 10px 0;	border-top: 2px solid #606060;	text-align: center;}/* Styling the Navigation Menu */#nav_container {	margin: 0px auto;	width: 720px;}ul#navMenu {	margin: 0px;	padding: 0px;	text-align: center;	list-style: none;}ul#navMenu li a{	display: block;	width: 90px;	float: left;	margin-top: 48px;	text-decoration: none;	color: white;	font-weight: bold;	background: url(images/dark_bg.gif);}/* Styling the Main Content */#main_container {	height: 540px;	width: 800px;	margin-top: 68px;	margin-left: auto;	margin-right: auto;}

Link to post
Share on other sites

Ah, I see what's going on now. Just change the height of header to 68px. (unless there's a reason why it needs to be so tall).

Link to post
Share on other sites
Ah, I see what's going on now. Just change the height of header to 68px. (unless there's a reason why it needs to be so tall).
There is. It's that tall because the graphic linked to the header has a rather large gradient on it. So to make sure I had all of the gradient, I had to have it that big.This is the actual graphic that's sitting in that space.header_bg.jpgIs this one of those times where positioning comes into play? Edited by psionicsin
Link to post
Share on other sites

if it's a gradient, then just make it the background image, and depending on if it's horizontal or vertical, you slice a piece of it is wide or as tall as you need and make the other dimension 1px. Then you just have it repeat-x (across) or repeat-y (down). If you need help, post the picture (and you're header for that matter) and we can work through it.

Edited by thescientist
Link to post
Share on other sites
if it's a gradient, then just make it the background image, and depending on if it's horizontal or vertical, you slice a piece of it is wide or as tall as you need and make the other dimension 1px. Then you just have it repeat-x (across) or repeat-y (down). If you need help, post the picture (and you're header for that matter) and we can work through it.
Haha I don't think you're understanding. That whole picture up above is the graphic that is sitting on top of the ALREADY background image applied 4px x tile.The only thing I can do to it is remove the name, but those bars and the gradient are embedded into the image. No way to separate them.Do me a huge favor and just download this package. You can see what is happening visually in one go without any misunderstandings. You don't have to send anything back, just take and look.Site Build
Link to post
Share on other sites

hmm, maybe if you could give a live link instead. In the mean time, try this. Make a wrapper div to contain all the div's you have so far. Give it this as its CSS.

#wrapper{  width: 884px;  margin: 0px auto;  background-image: url('path_to_image/image.jpg');}

Put main_container in between header and footer.

Edited by thescientist
Link to post
Share on other sites
hmm, maybe if you could give a live link instead.
I'm confused by what you mean as a live link? I gave you a link that's hosted on our web server.In case you're computer isn't seeing the anchor, here's the full link:http://www.rutholsonphoto.com/Site%20Build.zip
Link to post
Share on other sites

no, as in put it on a host somewhere. Not too many people here download files off of posts, no offense. It's pretty easy nowadays to find a free host just to throw some files up to share with people. Plus a lot of people here check in while at work, so they can't download stuff. I (and I think most people here prefer this way) like to use something like Firebug to work on people's sites in cases like this.

Link to post
Share on other sites
no, as in put it on a host somewhere. Not too many people here download files off of posts, no offense. It's pretty easy nowadays to find a free host just to throw some files up to share with people. Plus a lot of people here check in while at work, so they can't download stuff. I (and I think most people here prefer this way) like to use something like Firebug to work on people's sites in cases like this.
Oh ok. Well then I am not sure how to get the files to you then. I tried using sendpsace, and then hosting on our actual server, so I'm out of ideas. :) Edited by psionicsin
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...