Horizontal Menu Bar CSS questions

EricaL · 11-29-2009, 07:27 PM

Hi all,

I'm working on creating a horizontal menu bar using css for my site. I have followed this tutorial to create it, however I have come across a few problems.

1) My menu bar is somewhat off-center and I'm not sure how to fix it.
2) In a smaller resolution, the menu bar does not fit, width-wise, into the bar, and I was wondering how to fix this problem.

Below are my css and html codes.

CSS

Code:

body {
	background: url('images/bg.gif') #EFEFEF;
	margin: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
}

#header {
	height: 62px;
	background: url('images/header.png') repeat-x;
}

#logo {
	margin-top: 20px;
	margin-left: 20px;
}

#nav {
	height: 35px;
	background: #BFBBBB;
	width: 100%;
	font-size: 10pt;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}


#links {
	list-style: none;
	margin: 0 auto;
	padding: 5;
}

#links li {
   	float: left;
}

#links li a {
   	display: block;
   	background-color: #BFBBBB;
	color: #7D7D7D;
	text-decoration: none;
   	width: 150px;
	padding: 8px;
}

#links li a:hover {
   	background-color: #A9A9A9;
   	color: #FFFFFF;
	padding: 7px;
	height: 20px;
}
			
#updates {
	position: relative;
	background-image: url('images/updates_box.png');
	width: 725px;
	height: 105px;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
}

#wrap {
	position: relative;
	margin-top: 30px;
	margin-left: 10px;
}

#sidebar {
	float: left;
	width: 30%;
	height: 100%;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}

#content {
	margin-left: 32%;
	width: 60%;
	height: 100%;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 50px;
}

HTML

Code:

<!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>EricaFTW</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="JavaScript1.2" src="js/main.js" type="text/javascript"></script>   

</head>
<body>

<div id="TipLayer" style="visibility:hidden;position:absolute;z-index:1000;top:-100;"></div>
<script language="JavaScript1.2" src="js/style.js" type="text/javascript"></script>   

<div id="container">

	<div id="header">
		<img src="images/logo.png" id="logo" alt="" border="0" />
	</div>
	
	<div id="nav">
			<ul id="links">
			<li><a href="index.php">Home</a>  
			<li><a href="about.php">About</a> 
			<li><a href="portfolio.php">Portfolio</a>
			<li><a href="writing.php">Writing</a>
			<li><a href="contact.php">Contact</a>  
			</ul>
	</div>

	<div id="updates">
	</div>

	<div id="wrap">
		<div id="sidebar">sidebar</div>
		<div id="content">content</div>
	</div>
</div>
</body>
</html>

Click here for a live demo.

Thanks in advance,
Erica

Excavator · 11-29-2009, 07:42 PM

Hello EricaL,
With your #nav1 and #nav2 side by side, it's hard to figure out where you want #1 to go if you center #2.

Maybe like this?

Code:

#nav1 {
	height: 35px;
	background: url('images/nav1.png') no-repeat top right;
	width: 40%;
}

#buttons {
	width: 70%;
	margin: 10px;
}

#nav2 {
	height: 35px;
	background: url('images/nav2.png') repeat-x;
	width: 60%;
margin: 0 auto;
	font-size: 10pt;
	text-align: center;
}

Although nav1.png does not look like it is part of #nav1 ...

EricaL · 11-29-2009, 08:16 PM

Excavator,

Thanks for the quick response. I've recently changed the navigation bar, simply because it would make more sense for my design, and the coding was getting messy.

The code has been updated in my original post.

I still can't get the actual links to center though. Any ideas on how that can be done? Also, smaller resolutions will still see the buttons stacking on top of each other, rather than aligned horizontally. I'm not sure how to fix that either.