SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css placement with nested divs

    Hi guys -

    I have a slight alignment problem. I haven't been able to get the code uploaded to the web for all to see, but I have included the code so hopefully someone will take a look at it.

    I simply want to align the main navigation beside the logo to the bottom of it's container to press it right down against bottom of the header_wrapper div. I can't find a way to get it down from it's default alignment.

    Any suggestions anyone?

    Many thanks in advance.

    DS

    FILE:

    Code HTML4Strict:
    <div class="header_wrapper"> 
        <div id="logo"> <img src="images/logo.jpg" alt="Well Armed"/> </div> 
        <div id="navigation"> <a name="navigation" class="hidden">Navigation</a> 
          <ul> 
            <li><a href="#">Home</a></li> 
            <li id="current"><a href="#">Sign Up</a></li> 
            <li><a href="#">Contact Us</a></li> 
            <li><a href="#">My Account</a></li> 
            <li><a href="#">Free Betting Money</a></li> 
          </ul> 
        </div> 
      </div>

    CSS:

    Code CSS:
    body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 80&#37;; color: #333; background-color: #eee; margin: 0 auto;}
    img {border: 0;}
     
     
    .master_wrapper { width: 1000px; overflow: auto; margin: 0 auto; text-align: left;}
    .wrapper {width: 100%; overflow: auto; clear: both; margin: 0; padding: 0;}
    .content_wrapper {width: 100%; clear: both; overflow: auto; background-color: #777; min-height: 300px;}
    .header_wrapper {width: 100%; overflow: auto; clear: both; margin: 0; padding: 0; background-image: url(../images/banner_bg.jpg); background-position: top left; background-repeat: repeat-x; vertical-align: bottom;}
     
    #logo {margin: 0; width: 30%; min-height: 80px;  float: left; overflow: auto; background-image: url(../images/banner_bg.jpg); background-position: top left; background-repeat: repeat-x;}
    #logo img {margin: 25px 0px 20px 30px;}
     
    #navigation { border: 1px solid #fff; float:right; width:69%; background:#36303c url("../images/bg.gif") repeat-x bottom; font-size:93%; line-height:normal; }
    #navigation ul { margin:-5px 0 0 0; float: right; padding:0 0 0 0; list-style:none; bottom: 0;}
    #navigation li { float:left; margin:0; padding:0 0 0 9px; }
    #navigation a { float:left; display:block; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; color:#eee; }
    #navigation a:hover { color: #F90; }
    /* Commented Backslash Hack
       hides rule from IE5-Mac \*/
    #navigation a {float:none;}
    /* End IE5-Mac hack */
    #navigation #current { float:left; background:url("../images/tab_left.jpg") no-repeat left top; margin:0; padding:0 0 0 9px; }
    #navigation #current a { float:left; display:block; background:url("../images/tab_right.jpg") no-repeat right top; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; color:#eee; }
     
     
    .content {background-color: #fff; overflow: auto;}
    .hidden {visibility: hidden; display: none; margin: 0; padding: 0;}
     
    .top_bar {background-color: #000; font-size: 80%; color: #ddd; margin-top: 0; width: 100%; clear:both; overflow: auto; text-align: right;}
    .top_bar ul {background-color: #000; margin: 0; padding: 0; list-style-type: none;}
    .top_bar li {margin: 8px 5px; padding: 0; list-style-type: none; float: left; }
    .top_bar li a {color: #ccc; text-decoration: none;}
    .top_bar li a:hover {color: #fff; text-decoration: underline;}
    Last edited by SirDaveTheBrave; Jan 15, 2009 at 10:21. Reason: mistake in description

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    If you header wrapper will be a known height you can just push the nav down with a top margin.

    If you header wrapper will be an unknown height you can position the navbar absolutely and remove the float. You will need to give position:relative to the header wrapper to make a new stacking context for the absolute positioned nav.

    Like this -
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    
    /* ---------- ::Resets:: --------------------- */
    body, address, blockquote, dl, ol, ul, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, pre {
    margin:0;
    padding:0;
    }
    body {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 80&#37;; color: #333; 
    background-color: #eee; 
    margin: 0 auto;
    }
    img {border: 0;}
     
     
    .master_wrapper { 
    width: 1000px; 
    overflow: auto; 
    : 0 auto; 
    text-align: left;
    }
    .wrapper {
    width: 100%; 
    overflow: auto; 
    clear: both; 
    margin: 0; 
    padding: 0;
    }
    .content_wrapper {
    width: 100%; 
    clear: both; 
    overflow: auto; 
    background-color: #777; 
    min-height: 300px;
    }
    .header_wrapper {
    width: 100%; 
    overflow: auto; 
    clear: both; 
    margin: 0; 
    padding: 0;
    background:blue; 
    background-position: top left; 
    background-repeat: repeat-x; 
    vertical-align: bottom;
    position:relative;
    }
     
    #logo {
    margin: 0; 
    width: 30%; 
    min-height: 80px;  
    float: left; 
    overflow: auto; 
    background:yellow; 
    background-position: top left; 
    background-repeat: repeat-x;
    }
    #logo img {margin: 25px 0px 20px 30px;}
     
    #navigation {
    position:absolute;
    right:0;
    bottom:0; 
    border: 1px solid #fff; 
    /*float:right; */
    width:69%; 
    background:#36303c url("../images/bg.gif") repeat-x bottom; 
    font-size:93%; line-height:normal; 
    }
    
    #navigation ul { margin:-5px 0 0 0; float: right; padding:0 0 0 0; list-style:none; bottom: 0;}
    #navigation li { float:left; margin:0; padding:0 0 0 9px; }
    #navigation a { float:left; display:block; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; color:#eee; }
    #navigation a:hover { color: #F90; }
    /* Commented Backslash Hack
       hides rule from IE5-Mac \*/
    #navigation a {float:none;}
    /* End IE5-Mac hack */
    #navigation #current { float:left; background:url("../images/tab_left.jpg") no-repeat left top; margin:0; padding:0 0 0 9px; }
    #navigation #current a { float:left; display:block; background:url("../images/tab_right.jpg") no-repeat right top; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; color:#eee; }
     
     
    .content {background-color: #fff; overflow: auto;}
    .hidden {visibility: hidden; display: none; margin: 0; padding: 0;}
     
    .top_bar {background-color: #000; font-size: 80%; color: #ddd; margin-top: 0; width: 100%; clear:both; overflow: auto; text-align: right;}
    .top_bar ul {background-color: #000; margin: 0; padding: 0; list-style-type: none;}
    .top_bar li {margin: 8px 5px; padding: 0; list-style-type: none; float: left; }
    .top_bar li a {color: #ccc; text-decoration: none;}
    .top_bar li a:hover {color: #fff; text-decoration: underline
    
    </style>
    </head>
    <body>
    
    <div class="header_wrapper">
        <div id="logo"> <img src="images/logo.jpg" alt="Well Armed"/> </div>
        <div id="navigation"> <a name="navigation" class="hidden">Navigation</a>
          <ul>
            <li><a href="#">Home</a></li>
            <li id="current"><a href="#">Sign Up</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">My Account</a></li>
            <li><a href="#">Free Betting Money</a></li>
          </ul>
        </div>
      </div>
    
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is exactly what I'm looking for - many thanks indeed

    DS


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
  •