SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard johntabita's Avatar
    Join Date
    Mar 2001
    Location
    In a big, big house, with lotsa lotsa room
    Posts
    1,060
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)

    Problem setting left navbar to 100% height

    This is my first real attempt at a completely CSS-based layout.

    To my amazement, I managed to get it to look 95% of how I intended, with one exeception: I can't get the left navbar background color to go all the way down the page.

    Here is a jpeg comp of how the site should look.

    Here is what I end up with.

    I'd appreciate any help from the CSS experts out there. The stylesheet is embedded, so feel free to look at the source code.

    The problem is occurring in IE 5.5. It works perfectly in NN6.

    Thanks!
    Last edited by johntabita; Oct 5, 2001 at 14:18.

  2. #2
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Woops, forgot all about this - sorry for the delay.

    Anyway, I think I've got it worked out. Your layout looks fine in NN6.1 but IE doesn't like it much. This workaround seems to work OK in both, although you might have to play with it a little bit.

    The <div class="main"> should expand (or shrink) to fit the text in the <div class="text">. If the links on the left are longer (<div class="menu">), you'll need to throw in a few break tags in the <div class="text"> so the links don't overflow on the bottom.

    Here it is:

    <html>

    <head>

    <style>

    body
    {
    background: #00315D;
    margin-bottom:0px;
    margin-left:0px;
    margin-right:0px;
    margin-top:0px;
    padding-left:10px;
    padding-top:20px;
    padding-right:10px;}
    .main
    {
    background: #d4d4e1;
    width:100%;
    }
    .menu
    {
    position:absolute;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 12px;
    top:172px;
    left:0px;
    width145px;
    }
    .menu p {
    margin-left: 12px;
    margin-right: 8px;
    margin-top: 20px;
    margin-bottom: 8px;
    color: #00315D;
    font-weight: bold;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
    line-height: 15px;
    width:135px;
    }

    .menu ul {
    list-style-type: disc;
    color: #00315D;
    margin-top: 6px;
    font-size: 11px;
    width:115px;
    }

    .menu li {
    margin-bottom: 3px;
    }

    .menu a {
    padding-left:12px;
    color: #00315D;
    }

    .menu a:hover {
    color: #00315D;
    font-weight: bold;
    }
    .text
    {
    background: #fff url(http://www.mmtglobal.com/intranet_co...m_bkgd_btm.jpg) no-repeat right bottom;
    border-left:solid #00315D 1px;
    margin-left:145px;
    padding:20px;
    }
    .masthead {
    z-index: 300;
    width: 100%;
    height: 121px;
    background: #FFFFFF;
    border-bottom: solid #D4D4E1 1px;
    }
    .logo {
    position: absolute;
    top: 34px;
    left: 65px;
    }

    .drumgraphic {
    position: absolute;
    top: 98px;
    left: 10px;
    }
    .topnav {
    z-index: 400;
    width: 100%;
    height: 40px;
    background: #00315D;
    margin-left: 0px;
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
    }

    .topnav p {
    margin-left: 12px;
    margin-right: 8px;
    margin-top: 12px;
    color: #E9821A;
    font-weight: bold;
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size: 14px;
    line-height: 15px;
    }

    .topnav a {
    color: #D4D4E1;
    }
    .footer {
    text-align: center;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 10px;
    line-height: 15px;
    padding-top: 15px;
    padding-bottom:35px;
    color: #D4D4E1;
    background: #00315D;
    width:100%;
    }
    </style>
    </head>

    <body>

    <div class="masthead">
    <img src="http://www.mmtglobal.com/intranet_comp/layers/images/mmt_logo_top.gif" width="245" height="64" class="logo">
    <img src="http://www.mmtglobal.com/intranet_comp/layers/images/drum_graphic_top.gif" width="599" height="43" class="drumgraphic">
    </div>

    <div class="topnav">
    <p><a href="sales_marketing.html">Home</a></p>
    </div>

    <div class="main">
    <div class="menu">
    <p><a href="sales_marketing.html">Sales & Marketing</a></p>
    <ul>
    <li><a href="mmt_store.html">MMT Store more more more </a></li>
    <li><a href="file_downloads.html">File Downloads</a></li>
    <li><a href="sales_training.html">Sales Training</a></li>
    </ul>
    </div>
    <div class="text">
    <h1>MMT Company Intranet</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

    <h2>Ut wisi enim et accumsa</h2>
    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum.</p>
    </div>
    </div>
    <div class="footer">&copy; 2001 Metromedia Technologies, Inc. All rights reserved.</div>

    </body>

    </html>

  3. #3
    SitePoint Wizard johntabita's Avatar
    Join Date
    Mar 2001
    Location
    In a big, big house, with lotsa lotsa room
    Posts
    1,060
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    isotope,

    I appreciate you posting that code. I'll be taking a good look at it to see what you did differently from my attempt. I'm sure I can learn a lot from it... as I said, this is my first real venture into CSS positioning.

    Thanks again!


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
  •