Grow your CSS skills. Land your dream job.

i want these css buttons badly!

  • # July 20, 2010 at 9:55 am

    Hi.
    just wanted to have the navigation exactly like this http://web.appstorm.net/ , and put that in this site http://www.grou.ps/persianers

    ive tried myself by copying the css code

    Code:
    #navigation ul li.active > a, #navigation > ul li a:hover, #navigation ul li.sub-nav:hover > a {
    background:-moz-linear-gradient(center top , #88D790, #55AB61) repeat scroll 0 0 transparent;
    border-color:#ADE9B6;
    }
    #navigation ul li.sub-nav > a:hover:before, #navigation ul li.sub-nav:hover > a:before {
    border-top-color:#ADE9B6 !important;
    }
    #navigation ul li.sub-nav > a:hover:after, #navigation ul li.sub-nav:hover > a:after {
    border-top-color:#55AB61 !important;
    }
    #navigation ul ul li a:hover {}

    but nothing changed in my site
    maybe the code i chose arent right !

    Here is my site CSS navigation ( grou.ps/persianers)

    Code:
    #menu {
    overflow: hidden;
    clear: both;
    /*background: #ffffff url(/navi_bg.png) no-repeat center bottom;
    */
    border-top: 0px solid #dedcd0;
    background: url() repeat ; /* customizable.advanced.background.33.[Navigation Background] */
    }
    #nav {
    margin: 0 auto;
    width: 960px;
    list-style: none;
    padding: 0;
    }
    #nav li.selected a {
    color: #b0c387;
    }
    #nav ul {
    list-style: none;
    }
    #nav li {
    float: left;
    }
    #nav li a, #nav li.unselected a {
    /*border-right: 1px solid #b0c387;
    */
    font-size: 12px;
    color: #333; /* customizable.advanced.color.07.[Navigation Link Color] */
    text-decoration: none;
    padding: 8px 11px;
    line-height: 18px;
    text-shadow: 0 1px #fff;
    -webkit-transition: color 0.5s ease-in-out;
    -moz-transition: color 0.5s ease-in-out;
    -o-transition: color 0.5s ease-in-out;
    }
    /*
    #nav li:first-child {
    border-left: 1px solid #dedbd1;
    }
    */
    #nav li a:hover {
    background: transparent url() repeat ; /* customizable.advanced.background.08.[Navigation Link Hover Background] */
    color: #b0c387; /* customizable.advanced.color.31.[Navigation Link Hover Color] */
    }

    please tell me what should i do to make it right

    REGARDS

    # July 20, 2010 at 4:01 pm

    The css you copied calls for #navigation, in your css you are calling it #nav, try renaming it ;)

    # July 20, 2010 at 6:32 pm

    ah, the old "copy and pasted styles but didn’t change the id" scenario, classic

    # July 21, 2010 at 12:30 am

    8-)

    # July 21, 2010 at 9:09 am

    Thanks
    I made it , and i had to change #menu not #nav

    However i have 2 problems
    1-sub menu changed to that color aswell which i dont want to . how can i keep the submenu in bg white and font black ? when the one button has been selected the menu changed to the button i wanted (green) and sub menu as well(green)

    2- i copied the code but still cannot see that TRIANGLE in center bottom of each bottoms that includes SUB MENU.

    Cheers

    # July 21, 2010 at 11:38 am

    Hey guys, how about that ol’ copyright infringement thing? Remember, using a site as inspiration is one thing, but actually taking someone else’s code is a whole other deal.

    # July 21, 2010 at 12:23 pm

    I don’t usually copy other peoples code. Sometimes I reuse some of my other code or take code from a working model that I can’t figure out. But I always customize it to be quite original. I’d never take something and keep it verbatim

    # July 21, 2010 at 3:28 pm

    my question is too clear and both related to this subject , and i changed the code from the original to that i wanted , the only thing that i needed to copy was

    Code:
    background:-moz-linear-gradient(center top , #88D790, #55AB61) repeat scroll 0 0 transparent;

    However i changed the color of that as well, but i want to know about that triangle which i have told about it before.

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

You must be logged in to reply to this topic.

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