Jump to content

Centering a horizontal navigation menu


psionicsin

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

Link to comment
Share on other sites

  • Replies 67
  • Created
  • Last Reply
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?
Link to comment
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.

Link to comment
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.
Link to comment
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.
Link to comment
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.
Link to comment
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.
Link to comment
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
Link to comment
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>

Link to comment
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>

Link to comment
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>

Link to comment
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.
Link to comment
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.

Link to comment
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.
Link to comment
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>

Link to comment
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.
Link to comment
Share on other sites

Archived

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


×
×
  • Create New...