Home › Forums › JavaScript › Anythingslider problem – Active page › Re: Anythingslider problem – Active page
December 6, 2011 at 1:11 pm
#92006
Mottie
Member
Try this method…
CSS
#externalNav img {
float: left;
}
#externalNav a {
float: left;
width : 60px;
height : 88px;
overflow: hidden;
}
#externalNav a span {
text-indent: -9999em;
display: block;
}
.tab-why { background-image: url(../images/navbar/bottom-01-white.png); }
.tab-health { background-image: url(../images/navbar/bottom-02-white.png); }
.tab-family { background-image: url(../images/navbar/bottom-03-white.png); }
.tab-how { background-image: url(../images/navbar/bottom-04-white.png); }
.tab-profs { background-image: url(../images/navbar/bottom-05-white.png); }
.tab-join { background-image: url(../images/navbar/bottom-06-white.png); }
.tab-about { background-image: url(../images/navbar/bottom-07-white.png); }
.tab-why.current, .tab-why:hover { background-image: url(../images/navbar/bottom-01-yellow.png); }
.tab-health.current, .tab-health:hover { background-image: url(../images/navbar/bottom-02-yellow.png); }
.tab-family.current, .tab-family:hover { background-image: url(../images/navbar/bottom-03-yellow.png); }
.tab-how.current, .tab-how:hover { background-image: url(../images/navbar/bottom-04-yellow.png); }
.tab-profs.current, .tab-profs:hover { background-image: url(../images/navbar/bottom-05-yellow.png); }
.tab-join.current, .tab-join:hover { background-image: url(../images/navbar/bottom-06-yellow.png); }
.tab-about.current, .tab-about:hover { background-image: url(../images/navbar/bottom-07-yellow.png); }
.clear { clear: both; }
and change the HTML to this:
It would be even better if you made an image sprite with all of the images combined.