Jump to content
psionicsin

Centering a horizontal navigation menu

Recommended Posts

yeah, but as a zip file. I'm talking about something you actually view in a browser. An actual webpage domain URL, i.e.www.domain.com/index.html

Share this post


Link to post
Share on other sites
yeah, but as a zip file. I'm talking about something you actually view in a browser. An actual webpage domain URL, i.e.www.domain.com/index.html
OMG for some reason the browsers keep editing out my location. The index file is located at http://rutholsonphoto.com/sitebuild/indextest.htmlIt keep truncating it to www.rutholsonphoto.com/indextest.html. Why? Edited by psionicsin

Share this post


Link to post
Share on other sites

ok, so like I said: put a wrapper around everything, put main_container in between header and footer, and follow the CSS example I gave you for the wrapper. and make the header 68px tall.

Edited by thescientist

Share this post


Link to post
Share on other sites
ok, so like I said: put a wrapper around everything, put main_container in between header and footer, and follow the CSS example I gave you for the wrapper. and make the header 68px tall.
Ok I did it, but doing so has broken my pages ability to have an expandable footer as well. It now is cut off.

Share this post


Link to post
Share on other sites
Ok I did it, but doing so has broken my pages ability to have an expandable footer as well. It now is cut off.
ok, simple enough. but what do you think you should do then? Feel free to play around with this stuff and get a feeling for it. Try something and understand why it did or didn't "work". Try and predict if you can guess the outcome.edit: hint: the change only involves the footer element. Edited by thescientist

Share this post


Link to post
Share on other sites
ok, simple enough. but what do you think you should do then? Feel free to play around with this stuff and get a feeling for it. Try something and understand why it did or didn't "work". Try and predict if you can guess the outcome.edit: hint: the change only involves the footer element.
Well my first instinct was to add "repeat-x bottom" after the background color, but that didn't work. Then I tried removing the footer form the main div, but that didn't work either.

Share this post


Link to post
Share on other sites
Well my first instinct was to add "repeat-x bottom" after the background color, but that didn't work. Then I tried removing the footer form the main div, but that didn't work either.
do you mean outside of the wrapper? That should have worked. Edited by thescientist

Share this post


Link to post
Share on other sites
do you mean outside of the wrapper? That should have worked.
Alright I have good news and bad news...The good news...I changed some things around, and now it does work when outside of the wrapper.The bad news...I changed things around and can't visually see where I need to edit to make my navigation bar centered again lol.Here's the updated link: http://rutholsonphoto.com/testbuild/index.php

Share this post


Link to post
Share on other sites
Alright I have good news and bad news...The good news...I changed some things around, and now it does work when outside of the wrapper.The bad news...I changed things around and can't visually see where I need to edit to make my navigation bar centered again lol.Here's the updated link: http://rutholsonphoto.com/testbuild/index.php
well, I'll just post the state I had it in last night before I went to bed.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;}

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>

Share this post


Link to post
Share on other sites

Here's the new codingCSS

@charset "utf-8";/* CSS Styling */* {	margin: 0;	padding: 0;}/* Styling the body */body {	margin: 0;	font-size: 12px;	font-family: Arial, Helvetica, sans-serif;	background: url(images/body_bg.png) repeat-x top #c4c0bf;}#site{  width: 884px;  margin: 0px auto;  background-image: url(images/header_bg.jpg);  background-repeat: no-repeat}/* Styling the Header */#header {	margin: 0 auto;	height: 75px;}/* 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: 920px;}ul{	/* the unordered list */	height: 26px;	text-align: center;	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	font-weight: bold;}ul li{	display: inline;	/* changing the display property */	height: 26px;	width: 115px;	float: left;	/* floating the list items to the left */	margin-top: 47px;	list-style-type: none;	/* disabling the list icon */	overflow: hidden;	/* hiding the overflowing content */}ul li a, ul li a:hover,ul li a:visited{	text-decoration: none;	/* removing the underline text-decoration */}/* styling the links */.normalMenu, .normalMenu:visited,.hoverMenu, .hoverMenu:visited,.selectedMenu,.selectedMenu:visited {/* these properties are shared between the classes */	outline: none;	padding: 5px 5px;	display: block;}/* styles that are assigned individually */.hoverMenu,.hoverMenu:visited,.selectedMenu,.selectedMenu:visited {	margin-top: -26px;	background: url(images/grey_bg.gif) repeat-x #eeeeee;	color: #444444;}.selectedMenu,.selectedMenu:visited {	margin: 0;}.normalMenu, .normalMenu:visited{	color: white;	font-weight: bold;	background: url(images/dark_bg.gif) repeat-x #444444;}/* Styling the Main Content */#main_container {	height: 540px;	width: 800px;	margin-left: auto;	margin-right: auto;}

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="site">	<div id="header">		<div id="nav_container">			<ul id="navMenu">				<li><a href="#" class="normalMenu">Home</a></li>				<li><a href="#" class="normalMenu">At A Glance</a></li>				<li><a href="#" class="normalMenu">About Us</a></li>				<li><a href="#" class="normalMenu">Gallery</a></li>				<li><a href="#" class="normalMenu">Senior Challenge</a></li>				<li><a href="#" class="normalMenu">Prices</a></li>				<li><a href="#" class="normalMenu">Contact Us</a></li>				<li><a href="#" class="normalMenu">Log-In</a></li>			</ul>		</div>	</div>			<div id="main_container">	</div>		</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>

Share this post


Link to post
Share on other sites

Just a few bits of advise1) you should try to avoid padding to vertically align anchor text, but use line-height instead.2) I was going to suggest removing the margin 47px from the menu anchor links, which you have done, but instead of assigning it to LI, ideally you would assign it to the menu container instead.3) The wrapper container, should be reinstated, it is good practice to use a outer container div, to contain most of the other layout containers, it offers better control for controlling floated containers and setting margin distances from edges for text, positioned elements if you should require them.heres my solutioncss

@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 */#wrapper {margin: 0pt auto; background: url(images/header_bg.jpg) no-repeat center top; width: 920px; overflow: hidden;}#header {	margin: 0 auto;	/*height: 68px;*/	height:75px;	/*width: 884px;*/	overflow: hidden;}/* 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: 46px auto 0;	width: 920px;	height: 29px;}ul{	/* the unordered list */	height:/*25px*/ 100%;	text-align: center;	font-family:Arial, Helvetica, sans-serif;	font-size:12px;	font-weight: bold;}ul li{	display: inline;	/* changing the display property */	height: 100%;	width: 115px;	float: left;	/* floating the list items to the left */		list-style-type: none;	/* disabling the list icon */	overflow: hidden;	/* hiding the overflowing content */}ul li a{	text-decoration:none;	/* removing the underline text-decoration */	display:block;	line-height: 29px;	height:100%;	}/* styling the links */.normalMenu, .normalMenu:visited,.hoverMenu, .hoverMenu:visited,.selectedMenu,.selectedMenu:visited {/* these properties are shared between the classes */	outline:none;	padding:0px 5px;	display:block;}/* styles that are assigned individually */.hoverMenu,.hoverMenu:visited,.selectedMenu,.selectedMenu:visited {	margin-top:-29px;	background:url(images/grey_bg.gif) repeat-x #eeeeee;	color:#444444;}.selectedMenu,.selectedMenu:visited {	margin:0;}.normalMenu, .normalMenu:visited{	color:white;	font-weight: bold;	background:url(images/dark_bg.gif) repeat-x #444444;}/* Styling the Main Content */#main_container {	height: 540px;	/*width: 800px;	margin-top: 68px;*/	margin:0 25px;	}

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"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>	<script type="text/javascript">/*<![CDATA[*//*---->*/$(document).ready(function(){// executed after the page has finished loading	$('#navMenu li .normalMenu').each(function(){	// for each menu item		// create a duplicate hyperlink and position it above the current one		$(this).before($(this).clone().removeClass().addClass('hoverMenu'));	});	$('#navMenu li').hover(function(){	// using the hover method..		// we assign an action on mouse over		$(this).find('.hoverMenu').stop().animate({marginTop:'0px'},200);		// the animate method provides countless possibilities	},	function(){		// and an action on mouse out		$(this).find('.hoverMenu').stop().animate({marginTop:'-29px'},200);	});});/*--*//*]]>*/</script></head><body><div id="wrapper"><div id="header">	<div id="nav_container">		<ul id="navMenu">				<li><a href="#" class="normalMenu">Home</a></li>				<li><a href="#" class="normalMenu">At A Glance</a></li>				<li><a href="#" class="normalMenu">About Us</a></li>				<li><a href="#" class="normalMenu">Gallery</a></li>				<li><a href="#" class="normalMenu">Senior Challenge</a></li>				<li><a href="#" class="normalMenu">Prices</a></li>				<li><a href="#" class="normalMenu">Contact Us</a></li>				<li><a href="#" class="normalMenu">Log-In</a></li>		</ul>	</div></div>	<div id="main_container"></div>	</div><!-- end wrapper --><div id="footer"><p>Copyright © 2003 - <?php echo date('Y');?> Ruth Olson Photography</p></div></body></html>

Edited by dsonesuk

Share this post


Link to post
Share on other sites
Just a few bits of advise1) you should try to avoid padding to vertically align anchor text, but use line-height instead.2) I was going to suggest removing the margin 47px from the menu anchor links, which you have done, but instead of assigning it to LI, ideally you would assign it to the menu container instead.3) The wrapper container, should be reinstated, it is good practice to use a outer container div, to contain most of the other layout containers, it offers better control for controlling floated containers and setting margin distances from edges for text, positioned elements if you should require them.
1) I only used padding for a quick browser reset, and to pad just the footer in order to increase the width of the base. Not for text (Unless you count the footer as important text).2) Yep I'd already done that. Especially with the new design of the navigation menu.3) I do have a wrapper that encompasses MOST of the design <#site>. I cannot place the footer into there, or else it slices my footer at the sides and leaves it at "x" pixels wide, instead of it being forever extended like the upper design is. The footer is plain css, the top bar is an actual image. I'm guessing that's why it's not working when in a defined div wrapper. Edited by psionicsin

Share this post


Link to post
Share on other sites

increase width of base? sorry don't get that, again you would not use padding for the footer at all just set height and use line-height for text. if you are talking about paragraphs? because you are using the universal selector to set margins and paddings to 0, you will have to reset margin only for paragraphs and headingsp, h1, h2, h3, h4, h5, h6 {margin: 0.9em 0;}sorry when i looked at you latest code the margin was under ul li instead of #nav_container#nav_container { margin: 46px auto 0; width: 920px; height: 29px;}note: i increased the width of the container as the end menu was being spliced short, and looked strange.with your design you will obviously have to insert the footer out of the the wrapper container, as it is required to stretch to the entire viewport of the browser window, and not the fixed width of wrapper container. Unless you add another outer container which stretches the total width of page, and then insert background image in that with it positioned at bottom, just another possible option.

Share this post


Link to post
Share on other sites
#nav_container { margin: 46px auto 0; width: 920px; height: 29px;}
Ok I went on ahead and used the formatting that you suggested, but something in your new formatting has broken my menu animation and I can't figure out what it is.http://rutholsonphoto.com/testbuild/index.phpThe white should come down all the way, and then retract back up fully. Edited by psionicsin

Share this post


Link to post
Share on other sites

if you are referring to the bottom edge of lt grey appearing at top, that because i adjusted the jquery margin, i noticed that you had a black border effect on bottom when lt grey menu appeared, so i made adjustments and it now covers the black menu completely. unless that what you wanted?

<script type="text/javascript">/*<![CDATA[*//*---->*/$(document).ready(function(){// executed after the page has finished loading	$('#navMenu li .normalMenu').each(function(){	// for each menu item		// create a duplicate hyperlink and position it above the current one		$(this).before($(this).clone().removeClass().addClass('hoverMenu'));	});	$('#navMenu li').hover(function(){	// using the hover method..		// we assign an action on mouse over		$(this).find('.hoverMenu').stop().animate({marginTop:'0px'},200);		// the animate method provides countless possibilities	},	function(){		// and an action on mouse out		$(this).find('.hoverMenu').stop().animate({marginTop:'-29px'},200); /* now 29px instead of 25px */	});});/*--*//*]]>*/</script>

Edited by dsonesuk

Share this post


Link to post
Share on other sites
if you are referring to the bottom edge of lt grey appearing at top, that because i adjusted the jquery margin, i noticed that you had a black border effect on bottom when lt grey menu appeared, so i made adjustments and it now covers the black menu completely. unless that what you wanted?
Haha no that's actually my mistake. I was so focused with your change to my css formatting, that I totally disregarded the fact that you'd touched my script too lol.Thanks for your help dsonesuk! I'll call this thread closed as far as the original topic goes, now.

Share this post


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...