modifying javascript "slideshow" image wtih css -
im quite beginner in css , js, need implement working "slide show image", tried google it, , working script complete css.
but got if insert shorter image :
i have tried modify self, control/button disappear everytime tried change height.
i think have 3 choices :
- delete margin-botton
- centering image
- do both of them
which 1 easiest? , how? :d
this complete css code :
#slides { display: none } #slides .slidesjs-navigation { margin-top:5px; } a.slidesjs-next, a.slidesjs-previous, a.slidesjs-play, a.slidesjs-stop { background-image: url(../image/btns-next-prev.png); background-repeat: no-repeat; display:block; width:12px; height:18px; overflow: hidden; text-indent: -9999px; float: left; margin-right:5px; } a.slidesjs-next { margin-right:10px; background-position: -12px 0; } a:hover.slidesjs-next { background-position: -12px -18px; } a.slidesjs-previous { background-position: 0 0; } a:hover.slidesjs-previous { background-position: 0 -18px; } a.slidesjs-play { width:15px; background-position: -25px 0; } a:hover.slidesjs-play { background-position: -25px -18px; } a.slidesjs-stop { width:18px; background-position: -41px 0; } a:hover.slidesjs-stop { background-position: -41px -18px; } .slidesjs-pagination { margin: 7px 0 0; float: right; list-style: none; } .slidesjs-pagination li { float: left; margin: 0 1px; } .slidesjs-pagination li { display: block; width: 13px; height: 0; padding-top: 13px; background-image: url(../image/pagination.png); background-position: 0 0; float: left; overflow: hidden; } .slidesjs-pagination li a.active, .slidesjs-pagination li a:hover.active { background-position: 0 -13px } .slidesjs-pagination li a:hover { background-position: 0 -26px } #slides a:link, #slides a:visited { color: #333 } #slides a:hover, #slides a:active { color: #9e2020 } .navbar { overflow: hidden } #slides { display: none } .container { margin: 0 auto; width: 600px; }
Comments
Post a Comment