treehouse : what would you like to learn today?
Web Design Web Development iOS Development

More Help

  • 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 -------------------------------------------------- */
  • 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!
  • 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.