Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: CSS Layout Help

  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    219
    Thanks
    6
    Thanked 0 Times in 0 Posts

    CSS Layout Help

    Hey, I'm having trouble with #nav overlapping #primary-content. I can push it down with a fixed height using padding but then if you increase the text size and the #nav breaks onto 2 lines it overlaps again. Suggestions?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
    <head>
    
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    * { margin: 0; padding: 0; }
    
    html, body, #container-page {
    height: 100%;
    margin: 0; padding: 0 2em;
    }
    
    body {
    font-size: small;
    line-height: 1.56em;
    font-family: "Lucida Grande", "Trebuchet MS", Tahoma, Arial, sans-serif;
    color: #666;
    background: #CCC;
    }
    
    #container-page {
    margin: 0 auto; padding: 0;
    min-width: 650px;
    max-width: 845px;
    }
    
    * html #container-page {
    width: 760px;
    }
    
    #inner-wrap {
    position: relative;
    min-height: 100%;
    margin: 0; padding: 0;
    background: #FFF;
    }
    
    /* HACK: IE 6 doesn't understand min-height */
    * html #inner-wrap {
    height: 100%;
    }
    
    h1 {
    font: 200% Georgia, Palatino, Times, serif;
    border-bottom: 1px solid #E5E5E5;
    margin: 0; padding: 0;
    }
    
    /* HACK: IE 6 needs this to display border-bottom */
    * html h1 {
    position: relative;
    }
    
    h2 {
    font-size: 115%;
    font-weight: normal;
    margin: 0; padding: 15px 0;
    }
    
    #banner {
    height: 120px;
    background: #FFC;
    }
    
    /* Global Nav
    -----------------------------------------------------------------------------*/
    #nav {
    /* height: 3em;
    background: #B31B1B;
    
    Original Height was causing problems with alignment of hover state
    Background color allowed nav text to slide OVER #emblem
    
    */
    }
    
    #nav ol {
    font-size: 75%;
    list-style: none;
    width: 100%;
    }
    
    ol#menu {
    margin: 0; padding: 0;
    background: #B31B1B;
    }
    
    #nav li {
    float: left;
    margin: 0; padding: 0;
    letter-spacing: 1px;
    }
    
    #nav li a {
    float: left;
    padding: 10px 6px;
    color: #FFF;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    border: none;
    }
    
    #nav ol li a:hover {
    color: #fff;
    background-color: #870016;
    }
    
    #menu {
    position: absolute;
    z-index: 2;
    }
    
    /* You are here - Main Nav */
    body#home #home-nav a { background: #C72F2F; margin-left: 8px;}
    
    
    #primary-content {
    padding: 0 15px;
    }
    
    /* Top and Bottom Content Margin */
    #divider-margintop {
    background: #F6F4ED;
    height: 15px;
    }
    
    /* Emblem Float */
    #emblem {
    position: absolute;
    top: 100px; right: 0;
    background: black;
    width: 20%; height: 80px;
    z-index: 2;
    }
    </style>
    
    </head>
    
    <body id="home">
    <div id="container-page">
    <div id="inner-wrap">
    
    <!-- masthead in -->
    <div id="masthead">
    
    <div id="banner"></div>
    
    <!-- navigation in -->
    <div id="nav">
    
    <ol id="menu">
    <li id="home-nav"><a href="/">Section 00</a></li>
    <li id="abou-nav"><a href="/">Section 01</a></li>
    <li id="undr-nav"><a href="/">Section 02</a></li>
    <li id="grad-nav"><a href="/">Section 03</a></li>
    </ol>
    
    <!-- emblem in -->
    <div id="emblem"></div>
    <!-- emblem out -->
    
    </div>
    <!-- navigation out -->
    
    <div id="divider-margintop"></div>
    
    </div>
    <!-- masthead out -->
    
    <!-- content in -->
    <div id="primary-content">
    <h1>Heading</h1>
    <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse purus. Sed ante leo, mollis ut, hendrerit ac, sodales ut, diam. Suspendisse et nunc.</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse purus. Sed ante leo, mollis ut, hendrerit ac, sodales ut, diam. Suspendisse et nunc. Ut non nisl. Aenean volutpat velit eget nibh. Duis ac est ac nunc consectetuer sagittis. Nulla mollis nulla non eros. Ut mi augue, aliquam tempor, aliquet et, fringilla ac, felis. Nulla ut turpis eget augue tincidunt molestie. Donec a urna ut massa facilisis molestie. Pellentesque feugiat magna a sapien. Nullam tincidunt viverra quam. Fusce facilisis consequat augue. Mauris vel mauris. Pellentesque sollicitudin gravida enim. Fusce condimentum. Proin mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
    </div>
    <!-- content out -->
    
    </div>
    </div>
    
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
    <head>
    
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    * { margin: 0; padding: 0; }
    
    html, body, #container-page {
    height: 100%;
    margin: 0; padding: 0 2em;
    }
    
    body {
    font-size: small;
    line-height: 1.56em;
    font-family: "Lucida Grande", "Trebuchet MS", Tahoma, Arial, sans-serif;
    color: #666;
    background: #CCC;
    }
    
    #container-page {
    margin: 0 auto; padding: 0;
    min-width: 650px;
    max-width: 845px;
    }
    
    * html #container-page {
    width: 760px;
    }
    
    #inner-wrap {
    position: relative;
    min-height: 100%;
    margin: 0; padding: 0;
    background: #FFF;
    }
    
    /* HACK: IE 6 doesn't understand min-height */
    * html #inner-wrap {
    height: 100%;
    }
    
    h1 {
    font: 200% Georgia, Palatino, Times, serif;
    border-bottom: 1px solid #E5E5E5;
    margin: 0; padding: 0;
    }
    
    
    /* HACK: IE 6 needs this to display border-bottom */
    * html h1 {
    position: relative;
    }
    
    h2 {
    font-size: 115%;
    font-weight: normal;
    margin: 0; padding: 15px 0;
    }
    
    #banner {
    height: 120px;
    background: #FFC;
    }
    
    /* Global Nav
    -----------------------------------------------------------------------------*/
    
    
    #menu {
    margin: 0; 
    padding: 0;
    background: #B31B1B;
    font-size: 75%;
    list-style: none;
    float: left;
    width: 100%;
    }
    
    #menu li {
    float: left;
    margin: 0; padding: 0;
    letter-spacing: 1px;
    }
    
    #menu li a {
    float: left;
    padding: 10px 6px;
    color: #FFF;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    border: none;
    background-color: #C72F2F;
    }
    
    #menu li a:hover {
    color: #fff;
    background-color: #870016;
    }
    
    
    
    
    
    /* You are here - Main Nav */
    body#home #home-nav a { background: #C72F2F; margin-left: 8px;}
    
    
    #primary-content {
    padding: 0 15px;
    clear: both;
    }
    
    /* Top and Bottom Content Margin */
    #divider-margintop {
    background: #F6F4ED;
    height: 15px;
    }
    
    /* Emblem Float */
    #emblem {
    position: absolute;
    top: 100px; right: 0;
    background: black;
    width: 20%; height: 80px;
    z-index: 2;
    }
    </style>
    
    </head>
    
    <body id="home">
    <div id="container-page">
    <div id="inner-wrap">
    
    
    
    
    <div id="banner"></div>
    
    <!-- navigation in -->
    
    
    <ol id="menu">
    <li id="home-nav"><a href="#">Section 00</a></li>
    <li id="abou-nav"><a href="#">Section 01</a></li>
    <li id="undr-nav"><a href="#">Section 02</a></li>
    <li id="grad-nav"><a href="#">Section 03</a></li>
    </ol>
    
    <!-- emblem in -->
    <div id="emblem"></div>
    <!-- emblem out -->
    
    <!-- navigation out -->
    
    <div id="divider-margintop"></div>
    
    
    
    <!-- content in -->
    <div id="primary-content">
    <h1>Heading</h1>
    <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse purus. Sed ante leo, mollis ut, hendrerit ac, sodales ut, diam. Suspendisse et nunc.</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse purus. Sed ante leo, mollis ut, hendrerit ac, sodales ut, diam. Suspendisse et nunc. Ut non nisl. Aenean volutpat velit eget nibh. Duis ac est ac nunc consectetuer sagittis. Nulla mollis nulla non eros. Ut mi augue, aliquam tempor, aliquet et, fringilla ac, felis. Nulla ut turpis eget augue tincidunt molestie. Donec a urna ut massa facilisis molestie. Pellentesque feugiat magna a sapien. Nullam tincidunt viverra quam. Fusce facilisis consequat augue. Mauris vel mauris. Pellentesque sollicitudin gravida enim. Fusce condimentum. Proin mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
    </div>
    <!-- content out -->
    
    </div>
    </div>
    
    </body>
    </html>
    took out #nav as #menu is all you needed. #menu needs to be floated to encase the floated LI's and needs a 100% width so it's happy. No need to absolute position it since that affects the content as it ignores it. since menu sits under banner in the code, it will on the page. since it's floated, just have the the content area clear the float. I removed #masthead as well as it didnt seem to serve any purpose.

    see if that does anything for you.

    and this

    Code:
    <div id="divider-margintop"></div>
    whats that supposed to do? it's underneath the menu and was when i took the code so I'm not sure.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder
    Join Date
    Feb 2005
    Posts
    219
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Some of the extraneous tags were just leftover from the bigger template I stripped down for simplicity. This seems to work great even without clearing the float in #primary-content. Thanks! That helps a lot.

    Maybe you have some input into another issue I've been looking into. If there are more nav links, the #emblem div which is going to be a PNG graphic overlaps the nav making it unusable. Any ideas how I could solve this and slide the #emblem underneath the nav text but over the red bar?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Is the red bar supposed to be the height of just the nav? I'm guessing you want the emblem to overlap the red bar. If this is the case then give your menu a right padding equal to or greater than the width of the emblem.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Feb 2005
    Posts
    219
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Yes, the emblem should overlap the red bar. The problem is the emblem is positioned absolutely. So padding the menu won't effect the emblem.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yeah it will. It won't let any menu items go behind it so new menu items drop down to two lines. Like this
    Code:
    #nav ol {
    font-size: 75%;
    list-style: none;
    }
    
    ol#menu {
    margin: 0; padding: 0 20% 0 0;
    background: #B31B1B;
    }
    Last edited by _Aerospace_Eng_; 05-24-2007 at 12:12 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    Feb 2005
    Posts
    219
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I see what you're saying. Hmmm...maybe the earlier way is better than your last post then. Not sure. I guess I'll have to explore this a little more.


  •  

    Posting Permissions

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