jquery - Bottom Center in CSS (thumb tray) -
i have spent hours googleing on how , have tried many different things. cant thumb tray center @ bottom of page. wanted see if maybe can me out. here website. www.gabitee.com , code have been messing with...
from file supersized.css
/* thumbnail tray ----------------------------*/ #thumb-tray{ background:#fff; position:fixed; z-index:3; bottom:3px; right:0; background: transparent; padding-top: 8px; height:80px; width:100%; overflow:hidden; text-align:center; } #thumb-back, #thumb-forward{ position:absolute; z-index: 9999; bottom: -2px; height:108px; width: 40px; } #thumb-back{ left:0; background: transparent;} #thumb-forward{ right:0; background: transparent no-repeat center center;} #thumb-back:hover, #thumb-forward:hover{ cursor:pointer; background-color:rgba(256,256,256, 0.1); } #thumb-back:hover{ border-right:1px solid rgba(256,256,256, 0.2); } #thumb-forward:hover{ border-left:1px solid rgba(256,256,256, 0.2); } #thumb-tray{ display:inline-block; list-style:none; padding:0 0px; background: #fff; } ul#thumb-list li{ background:#fff;list-style:none; display:inline; overflow:hidden; float: left; } ul#thumb-list li img { opacity:0.6; -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=60)"; filter:alpha(opacity=60); margin: 10px 5px 10px 5px; width: 60px; height: 60px; } ul#thumb-list li.current-thumb img, ul#thumb-list li:hover img{ opacity:1; -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=100)"; filter:alpha(opacity=100); } ul#thumb-list li:hover{ cursor:pointer; } #tray-button { position: fixed; right: 50px; top: 20px; cursor: pointer; }
i messing #thumb-tray{} @ top firebug , textwrangler (osx)...i got move around not the bottom center... have background in java me confusing.
this first time asking question on here. i'm not sure if asking correctly.... lol sorry ... please let me know if need more info.
adding following styles center thumbs:
#thumb-list { text-align: center; /* centers <li> */ width: 100% !important; /* overwrites inline width */ } ul#thumb-list li { display: inline-block; /* <li> wrap <img> nicely */ float: none; /* allows text-align: center on parent element kick in */ }
edit: work:
#thumb-list { margin: 0 auto; }
Comments
Post a Comment