Forums

  • # October 8, 2008 at 3:22 pm

    Website: http://stuckpixelstudio.com/clients/carolinapeo/

    So on my navigation bar, I have a 1px wide slice of a gradient that is repeating horizontally across the nav bar. On the left side and right side, I want to replace the background image with an image that has a rounded corner. For some reason, I can’t get it to override the background image that is already set.

    HTML:

    CSS:

    Code:
    #navigation {color:#ffffff; display:block; list-style: none;; width:778px; height:42px; min-height:42px; margin-top: 20px;}
    #navigation li {float:left; text-align: center; line-height: 42px; display:block; background-image:url(images/buttonslice.png); height:42px; min-height:42px;}
    #navigation li:hover {float:left; text-align: center; line-height: 42px; display:block; background-image:url(images/buttonslice-over.png); height:42px; min-height:42px;}
    #navigation a {display:block; background:url(images/divider.png) repeat-y left top; text-decoration:none; color: #ffffff; padding: 0 10px;}

    #navigation .first li {background-image:url(images/leftedge.png) !important;}
    #navigation .first li:hover {background-image:url(images/leftedge-over.png) !important;}

    Thanks.

    # October 8, 2008 at 3:47 pm

    It looks to me as if you’ve got your class in the wrong place.

    You have:

    Code:
    #navigation .first li {your styles}

    And you should have

    Code:
    #navigation li.first {your styles}
    # October 8, 2008 at 5:29 pm

    What you should probably do is leave the normal repeating slice as the background, and set your li to position: relative, and then absolutely position the corner piece. Without testing, I believe something like this may work.

    css

    Code:
    #navigation li {float:left; text-align: center; line-height: 42px; display:block; background:url(images/buttonslice.png) repeat-x; height:42px; min-height:42px; position: relative;}

    #navigation li .leftEdge{background: url(images/leftedge.png) no-repeat; width: 5px; height: 42px; position: absolute; left: -1px; top: -1px;}

    html

    Code:
  • Home
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag