Uncentered Navbar with center tag

Page 1 of 1

2 Replies - 561 Views - Last Post: 13 October 2012 - 10:11 PM

#1 Zombious  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-October 12

Uncentered Navbar with center tag

Posted 12 October 2012 - 05:40 PM

So, I've been trying to build a website for a small business for a friend. I was making a navigation bar in pure CSS/HTML and saw this little error.

Posted Image

It's not quite centered and would like to see what's wrong with it, if anything. Maybe it's just me.

CSS

#header {
	background-image: url(../images/Background.jpg);
	text-align: center;
}
#navbar {
	height: 50px;
	background-image: url(../images/Background.jpg);
}
#body {
	height: 100%;
	width: 900px;
	background-color: #113706;
	font-family: Arial, Helvetica, sans-serif;
	color: #FC3;
	margin: 0px auto;
}
#wrapper {
	background-color: #113706;
}

#footer {
	background-color: #133908;
	height: 150px;
	width: auto;
}

body {
	margin: 0px;
}

#nav { 
	 text-align: center;
}

#nav li {
	list-style: none; 
	display: inline-block;
}

#nav a {
	color: #FFFF66;
	display: block;
	font-family:arial;
	text-transform: uppercase;
	font-weight: bold;
	margin: 0;
	padding: 16px 50px 16px;
	text-decoration: none;
}


HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>The Continental Divide Lodge</title>
		<link href="css/layout.css" rel="stylesheet" type="text/css" />
	</head>

<body>

<div id="wrapper">

	<div id="header">
    	<img src="images/Navbar Design.jpg" width="900" height="150" />
    </div>
    
    <div id="navbar">
		<ul id='nav'>
    		<li><a href="/">Home</a></li> 
   			<li><a href="/about.me">About</a></li>
    		<li><a href="/ask">Services</a></li>
    		<li><a href="http://twitter.com/ThatsWhatKidsDO">Reservations</a></li>
    		<li><a href="/support">Contact</a></li>
    	</ul>​
    </div>
    
    <div id="body">
    	<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis augue at velit scelerisque ullamcorper aliquet metus ultricies. Ut condimentum interdum lorem sit amet feugiat. Vestibulum orci nulla, mattis ac mattis sit amet, rutrum in tellus. Aliquam ac dolor lorem. Ut massa orci, venenatis at imperdiet vulputate, malesuada et nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at lobortis risus. Sed ornare, leo ut condimentum malesuada, neque nunc congue ligula, sit amet ultrices velit diam vitae lacus. Aliquam erat volutpat. Donec et tellus et odio ornare laoreet quis et odio. </p>
    </div>
    
    <div id="footer">
    	
    </div>
    
</div>

</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Uncentered Navbar with center tag

#2 exiles.prx  Icon User is offline

  • D.I.C Head

Reputation: 64
  • View blog
  • Posts: 224
  • Joined: 22-November 10

Re: Uncentered Navbar with center tag

Posted 13 October 2012 - 10:53 AM

remove the "width: 900px;" and "margin: 0px auto;" from the #body and place it under the #wrapper in your CSS. This way your wrapper (which holds all the page content) is always centered within the body regardless of the size of the browser.
Was This Post Helpful? 0
  • +
  • -

#3 Zombious  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-October 12

Re: Uncentered Navbar with center tag

Posted 13 October 2012 - 10:11 PM

Hmm, I seemed to try that and it made the wrapper 900px wide, and then compressed the "Contact" button off of the navigation bar. The effect I was trying for was to have the wrapper background stretch across the entire browser, as it shows now.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1