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 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Extra Length on CSS menu background

    So, here's my problem. I have my CSS and everything working, however I'm having a problem with getting the length of the background on my left menu bar right on each page. It stays standard accross all the pages, however, I want it different lengths on different pages.
    Here's my CSS:
    Code:
    body {
    background: #E8E8E8;
    font: 16px Verdana, sans-serif;
    }
    
    #left {
    width: 159px;
    height: 900px;
    background: url(../Pictures/crackback.gif);
    float: left;
    margin-right: 20px;
    }
    #right {
    width: 75%;
    float: right;
    }
    a:link {color: #104E8B;
    text-decoration: none;
    background-color: transparent }
    a:visited { color: #4169E1;
    text-decoration: none;
    background-color: transparent }
    a:hover { color: #00066;
    text-decoration: underline; 
    background-color: transparent }
    a:active { color: #A9ACB6; 
    text-decoration: underline; 
    background-color: transparent }
    .title { text-align: center}
    .floaty {
    float: right;
    }
    #navlist
    {
    padding: 0 1px 1px;
    font: bold 12px Verdana, sans-serif;
    background: gray;
    width: 13em;
    }
    
    #navlist li
    {
    list-style: none;
    margin: 0;
    border-top: 1px solid gray;
    text-align: left;
    }
    
    #navlist li a
    {
    display: block;
    padding: 0.25em 0.5em 0.25em 0.8em;
    border-left: 1em solid #AAB;
    background: #CCD;
    text-decoration: none;
    }
    
    #navlist li a:link { color: #448; }
    #navlist li a:visited { color: #667; }
    #navlist li a:hover
    {
    border-color: #000066;
    color: #FFF;
    background: #4169e1;
    }
    #good {
    text-align:center;
    }

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Well, you have "height: 900px" set for the #left div, so it's always going to be 900px high... You can leave the height declaration off and it'll adjust to the height of the content inside.

    Alternatively, you can use "min-height" or "max-height," which do what they sound like they should do, but don't work in IE; or, "display: table-cell" which makes the column expand much like a table cell does, but doesn't work in Safari. Height is always tricky when emulating table-layout in CSS...

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Faux columns

    @Richard:
    ... but doesn't work in Safari
    ... nor in IE...

    Kirby,

    As Richard (rmedek) already mentioned, controlling height on web pages is hard. The most flexible solution would be to let the content determine the desired height (which it does by default), and use a visual technique on an element that contains all the "columns" that need to look like they're the same height. This technique is described in the ALA article "Faux Columns". Although Dan Cederholm describes a solution for a fixed width layout, using percentage values for widths and background image positioning makes it equally applicable for fluid layouts.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, my only problem is, is that I want the background, so leaving off a height isn't going to work, because it just fits the left column to my menu. I also need it to work with IE and Mozilla, so...

    any suggestions?

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Yes. You could try this solution. It does exactly what you need it to.

    Or this one, which works if you have only background colors, not images.

  • #6
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, are you talking about the article? or just the auto-format? Cuz I tried the auto format, and all it did was cut my background off right after my menubar. I want the background to extend clear until the bottom of the page, but I want the bottom of the page to be determined by the content in my content div.

    Follow?


  •  

    Posting Permissions

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