Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Center Nav Top Level With Drop Container Background Image

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #32801
    grovesk
    Member

    Hi

    I’m using an image for the background on the drop down for this menu bar (for IE7).

    Here’s our staging page

    This menu has been tricky but it’s getting there. Initially, I had the top level set to a min width so that they were close to the width of the background image and it looked good

    However, the client prefers the top level be centered and only as wide as the text (i.e. width:auto). Example: About Us would be centered over the drop. How do I achieve this?

    Here’s the CSS for that area:


    /*NAVIGATION FOR INTERIOR
    */

    #navBar {
    position: absolute;
    left: 340px;
    top: 70px;
    }

    #nav {
    margin: 0;
    padding-top: 7px;
    padding-right: 6px;
    padding-bottom: 0;
    padding-left: 6px;
    }


    #nav li {
    float: left;
    list-style: none;
    width:auto;
    max-width: 350px;
    /*min-width: 178px;*/
    position: relative;
    margin-top: 0;
    padding-right: 10px;
    }


    /* main level link */
    #nav li a {
    font-family: 'InterstateRegular', Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: normal;
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    margin-left: auto;
    margin-right:auto;
    /*margin: 0;*/
    background-color: #aca700;
    width: auto;
    padding: 8px;
    }

    #nav li a:hover {
    color: #fff;
    /* background-color: #FFFFFF;
    */}

    #nav .current a {
    color: #FFF;
    background-color: #aca700;
    }

    #nav .current a:hover {
    color: #FFF;
    background-color: #990000;
    }

    #nav li:hover a {
    color: #FFF;
    background-color: #990000;
    }

    #nav ul li:hover a, #nav li:hover li a {
    width: auto;
    background: none;
    color: #aca700;
    }

    #nav ul a:link {
    color:#aca700;
    margin-left: 5px;
    margin-right:5px;
    text-align: center;
    }

    #nav ul a:hover {
    color:#333333 !important;
    background-color:#f4f2f2 !important;
    margin-left: 5px;
    margin-right:5px;
    text-align: center;
    }


    /* DROPDOWN ACTION*/
    #nav li:hover ul {
    display: block;
    }

    /* LEVEL 2 LIST */
    #nav ul {
    display: none;
    background-image: url(../images/ul_background.png);
    background-position: -2px top;
    background-repeat: repeat-y;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 27px; /*adjusted to get rid of gap*/
    width: 182px;
    }
    #nav ul li {
    float: none;
    margin: 0;
    padding: 0;
    }

    #nav ul li a {
    font-weight: normal;
    }

    /*BOTTOM IMAGES*/

    #nav .corner_left {
    position:absolute;
    left:-2px;
    top:0px;
    }

    #nav .corner_right {
    position: absolute;
    left: 162px;
    top: 0px;
    }

    #nav .middle {
    position: absolute;
    left: 16px;
    height: 20px;
    width: 148px;
    top: 0px;
    }


    /*END NAVIAGAITON FOR INTERIOR
    */

    Thanks, Karen

    #75663
    grovesk
    Member

    Thanks wolfcry911.

    Worked perfectly. So that I understand for next time, how did you decide on the -95px. Is it because it’s half (well, close to half) of the 182px wide background image? So, you figure out what is half of that and then move it 50%?

    Karen

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.