Grow your CSS skills. Land your dream job.

More Help

  • # August 8, 2008 at 11:15 pm

    Thank you everyone for your help over the past few days. I have most of the page done now. The submenu is still frustrating me! I have it positioned where I want it I just cannot get it centered. I have put the "margin: 0 auto;" everywhere and still now effect. In both FF and IE the further right I go on the menu… the more right it drifts.

    http://www.nucm.org

    Here is my CSS for the menu:

    /*


    START menu


    */

    div#menu {
    height: 260px;
    width: 970px;
    background-image: url(‘../images/imgHeader.png’);
    background-repeat: no-repeat;
    list-style: none;
    }

    div#menu li {
    float: left;
    }

    div#menu li a {
    display: block;
    float: left;
    height: 58px;
    }

    div#menu div#table {
    display: table;
    margin-top: 155px;
    }

    div#menu .selectmenu {
    list-style: none;
    display: table-cell;
    white-space: nowrap;
    }

    div#menu .selectmenu a#home {
    text-indent: -9999px;
    background: url(‘../images/home.png’);
    background-position: top center;
    background-repeat: no-repeat;
    width: 88px;
    }

    div#menu .selectmenu a#about {
    text-indent: -9999px;
    background: url(‘../about/images/about.png’);
    background-position: top center;
    background-repeat: no-repeat;
    width: 95px;
    }

    div#menu .selectmenu a#believe {
    text-indent: -9999px;
    background: url(‘../believe/images/believe.png’);
    background-position: top center;
    background-repeat: no-repeat;
    width: 128px;
    }

    div#menu .selectmenu a#schedule {
    text-indent: -9999px;
    background: url(‘../schedule/images/schedule.png’);
    background-position: top center;
    background-repeat: no-repeat;
    width: 122px;
    }

    div#menu .selectmenu a#events {
    text-indent: -9999px;
    background: url(‘../events/images/events.png’);
    background-position: top center;
    background-repeat: no-repeat;
    width: 132px;
    }

    div#menu .selectmenu a#city {
    text-indent: -9999px;
    background: url(‘../city/images/city.png’);
    background-position: top center;
    background-repeat: no-repeat;
    width: 74px;
    }

    div#menu .selectmenu a#action {
    text-indent: -9999px;
    background: url(‘../action/images/action.png’);
    background-position: top center;
    background-repeat: no-repeat;
    width: 129px;
    }

    div#menu .selectmenu a#request {
    text-indent: -9999px;
    background: url(‘../request/images/request.png’);
    background-position: top center;
    background-repeat: no-repeat;
    width: 106px;
    }

    div#menu .selectmenu a#giving {
    text-indent: -9999px;
    background: url(‘../giving/images/giving.png’);
    background-position: top center;
    background-repeat: no-repeat;
    width: 89px;
    }

    div#menu .selectmenu li:hover a#home {
    background-image: url(‘../images/home.png’);
    background-repeat: no-repeat;
    background-position: bottom center;
    width: 88px;
    }

    div#menu .selectmenu li:hover a#about {
    background-image: url(‘../about/images/about.png’);
    background-repeat: no-repeat;
    background-position: bottom center;
    width: 95px;
    }

    div#menu .selectmenu li:hover a#believe {
    background-image: url(‘../believe/images/believe.png’);
    background-repeat: no-repeat;
    background-position: bottom center;
    width: 128px;
    }

    div#menu .selectmenu li:hover a#schedule {
    background-image: url(‘../schedule/images/schedule.png’);
    background-repeat: no-repeat;
    background-position: bottom center;
    width: 122px;
    }

    div#menu .selectmenu li:hover a#events {
    background-image: url(‘../events/images/events.png’);
    background-repeat: no-repeat;
    background-position: bottom center;
    width: 132px;
    }

    div#menu .selectmenu li:hover a#city {
    background-image: url(‘../city/images/city.png’);
    background-repeat: no-repeat;
    background-position: bottom center;
    width: 74px;
    }

    div#menu .selectmenu li:hover a#action {
    background-image: url(‘../action/images/action.png’);
    background-repeat: no-repeat;
    background-position: bottom center;
    width: 129px;
    }

    div#menu .selectmenu li:hover a#request {
    background-image: url(‘../request/images/request.png’);
    background-repeat: no-repeat;
    background-position: bottom center;
    width: 106px;
    }

    div#menu .selectmenu li:hover a#giving {
    background-image: url(‘../giving/images/giving.png’);
    background-repeat: no-repeat;
    background-position: bottom center;
    width: 89px;
    }

    div#menu .selectsubmenu {
    display: none;
    }

    div#menu .submenu {
    display: table;
    padding: 66px 0 0 0;
    list-style: none;
    }

    div#menu .selectmenu :hover .selectsubmenu {
    display: block;
    position: absolute;
    z-index: 100;
    }

    div#menu .selectmenu :hover .submenu li a {
    display: block;
    float: left;
    background: transparent;
    padding: 0 10px 0 10px;
    white-space: nowrap;
    border: 0;
    }

    div#menu .selectmenu :hover .submenu li a:hover; {
    visibility: visible;
    }

    /*


    END menu


    */

    # August 9, 2008 at 4:26 pm

    I am not so active on these forums last weeks -sorry for that- but it’s really nice that everytime I see your website again, it’s improved a little bit. I’ve tried a little with firebug, but couldn’t find the solution for your problem so fast. Good luck!

    # August 9, 2008 at 5:47 pm

    Like Edwin i couldn’t find a solution. Although i did find a possible bug with your menu.

    All of your submenus seem to be left aligned however when you go through the links some of the ul elements shift depending on the page. A page refresh gets rid of this but it might be something to look at just incase it is a prob.

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".