Results 1 to 9 of 9

Thread: Div Menu CSS Not Looking Right

  1. #1
    Join Date
    Feb 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Div Menu CSS Not Looking Right

    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 {
    }
    Last edited by Atlantis; 02-12-2009 at 07:18 PM.

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Add this to your css code:
    Code:
    .navlist {
    margin: 0;
    }
    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Feb 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  4. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  5. #5
    Join Date
    Feb 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #6
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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/
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  7. #7
    Join Date
    Feb 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I'll check them out. thanks Snookerman!

  8. #8
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  9. #9
    Join Date
    Feb 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you! I set it to Resolved!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •