Sabtu, 17 Maret 2012

CSS Trik

* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 62.5%;
    font-family: Helvetica, sans-serif;
}

#page-wrap {
    width: 500px;
    margin: 0 auto;
}



ul#menu {
    list-style: none;
    }
    ul#menu li {
        display: inline;
    }
    ul#menu li a  {
        text-indent: -9999px;
        display: block;
        height: 93px;
        float: left;
        }
        ul#menu li a.home {
            background: url(images/menu-home.png) no-repeat bottom center;
            width: 162px;
            }
        ul#menu li a.about {
            background: url(images/menu-about.png) no-repeat bottom center;
            width: 151px;
        }
        ul#menu li a.contact {
            background: url(images/menu-contact.png) no-repeat bottom center;
            width: 187px;
            }
            ul#menu li a.home:hover, ul#menu li a.home:active,
            ul#menu li a.about:hover, ul#menu li a.about:active,
            ul#menu li a.contact:hover, ul#menu li a.contact:active {
                background-position: center center;
            }
        body#home ul#menu li a.home,
        body#about ul#menu li a.about,
        body#contact ul#menu li a.contact {
            background-position: top center;
        }




Tidak ada komentar:

Posting Komentar