Log in

View Full Version : Resolved 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 (http://rwb01.net/dpa/main_template.php)

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

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

@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:

.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! :D

To center the menu, try adding this:

.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 (http://www.hotdesign.com/seybold/everything.html)
This should also be interesting:
http://nettuts.com/videos/screencasts/everything-you-know-is-wrong/ (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 http://www.dynamicdrive.com/forums/images/buttons/edit.gif 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!