ui-dev/css/coda-slider.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
* { margin: 0; padding: 0 } /* I've used a hard CSS reset above, but you should consider a more sophisticated reset, such as this one: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */ p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100% } a:focus { outline:none } img { border: 0 } .stripViewer .panelContainer .panel ul { text-align: left; margin: 0 15px 0 30px; } .slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */ margin: 20px 0; position: relative; width: 100%; } /* These 2 lines specify style applied while slider is loading */ .csw {width: 100%; height: 460px; background: #fff; overflow: scroll} .csw .loading {margin: 200px 0 300px 0; text-align: center} .stripViewer { /* This is the viewing window */ position: relative; overflow: hidden; margin: auto; width: 700px; /* Also specified in .stripViewer .panelContainer .panel below */ height: 460px; clear: both; background: #fff; } .stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS */ position: relative; left: 0; top: 0; width: 100%; list-style-type: none; /* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */ } .stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */ float:left; height: 100%; position: relative; width: 700px; /* Also specified in .stripViewer above */ } .stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */ padding: 10px; } .stripNav { /* This is the div to hold your nav (the UL generated at run time) */ margin: auto; display:none; } .stripNav ul { /* The auto-generated set of links */ list-style: none; } .stripNav ul li { float: left; margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */ } .stripNavL, .stripNavR { /* The left and right arrows */ position: absolute; top: 230px; text-indent: -9000em; } .stripNavL a, .stripNavR a { display: block; height: 40px; width: 40px; } .stripNavL { left: 0; } .stripNavR { right: 0; } .stripNavL { background: url("../images/coda-slider/arrow-left.gif") no-repeat center; } .stripNavR { background: url("../images/coda-slider/arrow-right.gif") no-repeat center; } |