Grow your CSS skills. Land your dream job.

[Solved] Position Problem

  • # December 26, 2009 at 5:57 pm

    I am having some problems with css positions. (An example page is here:http://reformingtoscripture.com/resources/articles/002%20Patrick%20Hamilton.html.)

    For the drop down menu the position needs to be absolute otherwise it will move when the drop down is hovered over (like it does now). But if I do set it do this, then the page will not auto lengthen. What do I have messed up?

    Here is some of the code:
    Drop down

    Code:
    .file #navigation {
    position:relative;
    z-index:2;
    width:780px;
    background:#EAE7DF url(http://i254.photobucket.com/albums/hh92/eblogtemplates/naturalessence/nanav.gif) repeat;
    height:41px;
    border-top:1px solid #996
    }

    .file #navigation ul {
    z-index:2;
    padding:0;
    margin:0;
    background-color:#F66;
    }

    .file #navigation li {
    float:left;
    list-style:none
    }

    .file #navigation li a{
    z-index:2;
    background:#FFF url(http://i254.photobucket.com/albums/hh92/eblogtemplates/naturalessence/nanav.gif) repeat-x;
    border-right:1px solid #C9C6B3;
    color:#553;
    display:block;
    line-height:41px;
    padding:0 14px;
    text-align:center;
    text-decoration:none;
    font-size: 11pt;
    font-weight:bold;
    font-family: Tahoma, Geneva, sans-serif;
    width:100px;
    }

    .file #navigation li ul {
    z-index:2;
    display: none;
    }

    .file #navigation ul li a {
    z-index:2;
    display: block;
    }

    .file #navigation li:hover ul {
    z-index:2;
    display: block;
    }

    .file #navigation a:hover{
    z-index:2;
    background-position:left bottom;
    color:#221;
    }

    .file #navigation .current_page_item a{
    z-index:2;
    color:#331
    }

    Content

    Code:
    .file #mainContent {
    margin: 0 250px 0 0; /* the right margin on this div element creates the column down the right side of the page – no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div’s text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    padding: 0 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    height:100%;
    }

    .file #text {
    width:530px;
    padding: 0 20px;
    line-height: 130%;
    position:inherit;
    }

    Thanks

    # December 26, 2009 at 9:21 pm

    I don’t understand what you mean by it will not auto-lengthen. when I add an absolute position to this bit of code like this

    .file #navigation li ul {
    position:absolute;
    z-index:2;
    display: none;
    }

    It works fine for me viewing it from my computer. You need to be more specific and I will be able to help you further.

    try removing the height:100% from this bit of code

    .file #mainContent {
    margin: 0 250px 0 0;
    padding: 0 0px;
    height:100%;
    }

    The height will automatically be 100% of whatever content you have in the element.

    # December 28, 2009 at 12:47 pm

    That fixed it. Thanks!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".