Div Menu CSS Not Looking Right

**Atlantis** · 02-12-2009, 06:21 PM

I am trying to do my nav in a div with a ul and css. However i'm getting a break between my banner div and the nav div. Here's a link of what i'm talking about. Click Here

I'd like for the nav to be snug against the banner, and for the ul links to be inlined and centered vertically in the nav div. Thanks for any help!

Here's the 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>Departed Angels Foundation</title>
<link href="css/dpa.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body,td,th {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
}
body {
	background-color: #394E65;
	margin-top: 0px;
	text-align: center;
}

-->
</style></head>

<body>
<div id="maincontainer">
  <div id="banner"></div>
  <div id="navbar">
    <ul class="navlist">
      <li class="navlink">Home</li>
      <li class="navlink">Home</li>
      <li class="navlink">Home</li>
      <li class="navlink">Home</li>
    </ul>
  </div>
  <div id="body">
  	<div id="sidecolumn">
  	  <p><img src="images/sub_feat.jpg" width="174" height="174" class="columnphoto" /></p>
  	  <h2 class="sidecolhead">How we can help.</h2>
  	  <p class="sidecolbody">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam interdum, ante eget rutrum tincidunt, dui ante sagittis libero, id interdum.</p>
  	</div>
    <div id="mainbody">
      <p><img src="images/home_image.jpg" width="540" height="222" /></p>
      <h1>Headline</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam interdum, ante eget rutrum tincidunt, dui ante sagittis libero, id interdum magna elit at orci. Pellentesque eget diam. Mauris eu sem vitae lacus ultrices condimentum. Duis suscipit erat. Pellentesque gravida risus ut urna. Morbi ullamcorper, tellus nec posuere volutpat, lectus urna ullamcorper tellus, sed congue sem velit id quam. </p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
  </div>
  <div id="footer">Departed Angels Non-Profit Foundation. 2009</div>
</div>

</body>
</html>

Here's the CSS

Code:

@charset "UTF-8";
#maincontainer {
	width: 900px;
	margin: auto;
}
#banner {
	height: 250px;
	background-color: #CCCCCC;
	background-image: url(../images/banner.jpg);
	background-repeat: no-repeat;
}
#navbar {
	background-color: #EAF3FB;
	background-image: url(../images/nav_background.gif);
	background-repeat: repeat-x;
	height: 50px;
}
h1 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #394E65;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 2px;
}
h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 40px;
	font-style: italic;
	color: #FFFFFF;
	text-transform: capitalize;
	line-height: 32px;
	text-align: left;
	margin-left: 20px;
	font-weight: normal;
}
.columnphoto {
	border: 5px solid #FFFFFF;
}
#sidecolumn {
	background-color: #C3DEF4;
	width: 225px;
	position: absolute;
}
.sidecolbody {
	text-align: left;
	margin-right: 20px;
	margin-left: 20px;
	line-height: 18px;
	font-size: 12px;
	color: #394E65;
	font-weight: normal;
}
#body {
	width: 900px;
	position: static;
	height: auto;
	background-color: #C3DEF4;
}
#footer {
	background-color: #D4ECFF;
	height: 15px;
	padding: 15px;
	font-size: 10px;
	color: #666666;
}
#mainbody {
	background-color: #FFFFFF;
	height: auto;
	width: 635px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 225px;
	padding: 20px;
	text-align: left;
}
p {
	line-height: 20px;
}
.navlink {
	text-transform: uppercase;
	display: inline;
	width: 6em;
	background-color: #999999;
	float: left;
	margin-right: 1em;
}
.navlist {
}

**Snookerman** · 02-12-2009, 06:52 PM

Add this to your css code:

Code:

.navlist {
margin: 0;
}

Good luck!

**Atlantis** · 02-12-2009, 07:17 PM

Thank you!! That worked. I updated the FTP. Sorry, I'm new at div coding. I was brought up on tables, and am trying to change. My only other question would be how do I center the ul list so that it floats in the center of the #navbar div instead of the top??

Your help is much appreciated!

**Snookerman** · 02-12-2009, 07:22 PM

You get a golden star for not using tables!

To center the menu, try adding this:

Code:

.navlist {
margin: 0;
padding-top: 18px;
}

Good luck!

**Atlantis** · 02-12-2009, 07:29 PM

Perfect! Thank you for your table comment. Just for your thoughts, I've read several arguments on divs vs. tables. Some people say that it doesn't matter what you use, and you should choose what you are more efficient at. While others strongly defend their sides. CSS are applicable to both, so I never really saw the light. But im trying to learn the div side to quiet my peers.

What are your thoughts?

**Snookerman** · 02-12-2009, 07:43 PM

I am of the opinion that tables should only be used for tabular data. You might find the article in my signature interesting:
http://www.hotdesign.com/seybold/everything.html
This should also be interesting:
http://nettuts.com/videos/screencasts/everything-you-know-is-wrong/

**Atlantis** · 02-12-2009, 08:00 PM

I'll check them out. thanks Snookerman!

**Snookerman** · 02-12-2009, 08:04 PM

You're welcome, glad to help!
You can go to your first post in this thread, click

then click Go Advanced and add the Resolved prefix to the thread title.
This will let other users know the problem has been solved.

Good luck with your site!

**Atlantis** · 02-12-2009, 08:19 PM

Thank you! I set it to Resolved!

Thread: Div Menu CSS Not Looking Right

Thread Tools

Search Thread

Div Menu CSS Not Looking Right

Bookmarks

Bookmarks

Posting Permissions