Help - Search - Members - Calendar
Full Version: Slideshow not working
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
Gurjyot
This is the Style.CSS of my slideshow,
QUOTE
.pix_diapo {background: #000;-moz-box-shadow: 0 0px 10px #000;-webkit-box-shadow: 0 0px 10px #000;box-shadow: 0 0px 10px #000;height: 350px;overflow: hidden;position: relative;width: 780px;margin:0 auto;margin-top:30px;}
.pix_diapo > div {display: none;height: 100%;left: 0;position: absolute;top: 0;width: 780px;}
#pix_prev, #pix_next {cursor: pointer;display: block;height: 40px;margin-top: -20px;position: absolute;top: 50%;width: 40px;z-index: 1001;}
#pix_prev {background: url(images/diapo/prev.png) no-repeat;left: 10px;}
#pix_next {background: url(images/diapo/next.png) no-repeat;left: auto!important;right: 10px!important;}
#pix_pag {margin: 0 auto;position: relative;width: 780px;z-index: 1002;}
#pix_commands {cursor: pointer;display: block;float: left;height: 26px;margin: 15px 0 0 13px;position: relative;width: 24px;}
#pix_play {background: url(images/diapo/play.png) center no-repeat;height: 24px;left: 0;position: absolute;top: 0;width: 24px;}
#pix_stop {background: url(images/diapo/pause.png) center no-repeat;height: 24px;left: 0;position: absolute;top: 0;width: 24px;}
#pix_pag_ul {margin:0 auto;padding: 0;}
#pix_pag_ul > li {cursor: pointer;display: block;float: left;list-style: none;margin: 0 10px 0 0;padding: 20px 8px 0;text-align: center;text-indent: -9999px;width: 16px;}
#pix_pag_ul > li > span {background: #222;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;display: block;height: 16px;width: 16px;}
#pix_pag_ul > li:hover > span > span {background: #ccc;}
#pix_pag_ul > li > span > span {-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;display: block;float: left;height: 8px;margin: 4px;width: 8px;}
#pix_pag_ul > li.diapocurrent > span > span {background: #ff0;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;}
#pix_pag_ul > li > .pix_thumb {border: 4px solid #f2f2f2;-moz-box-shadow: 0 1px 8px #000;-webkit-box-shadow: 0 1px 8px #000;box-shadow: 0 1px 8px #000;height: 58px;left: -17px;position: absolute;top: -40px;width: 58px;}
#pix_pag_ul > li > .thumb_arrow {border-left: 4px solid transparent;border-right: 4px solid transparent;border-top: 4px solid #e6e6e6;top: 26px;left: 12px;position: absolute;}
.pix_relativize {overflow: hidden;position: relative;}
.imgFake {cursor: pointer;}
.elemHover {position: absolute;}
.caption {background: rgba(0, 0, 0, 0.5);.filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000, endColorstr=#cc000000)\9;bottom: 20px;color: #fff;display: block;font-size: 13px;padding: 20px;width: 500px;}
.ui-loader {display: none;}


And this is my code in my index file,

QUOTE
<div id="intro">
<div class="container">
<div class="pix_diapo">

<div>

<img src="slider/firefighters.jpg" alt="TeamDRD Firefighters">

<div class="caption elemHover fromLeft">
Having fun as Fire Fighters!
</div>
</div>

<div>

<img src="slider/admin.jpg" alt="Administrators">

<div class="elemHover caption fromLeft">
Our awesome administrators team biggrin.gif!
</div>
</div>

<div>
<img src="slider/slides/race.jpg" alt="Awesome races">
<div class="elemHover caption fromLeft">

</div>
</div>

</div>
</div>
</div>


It's not working, you can check out this site, www.countryside-roleplay.Co.CC
Gurjyot
Anyone?
Darin McGrew
The online tools report markup and CSS errors:
http://validator.w3.org/check?uri=http%3A%...ine&group=0
http://jigsaw.w3.org/css-validator/validat...ng=&lang=en

And there are other errors in the browser's error console. Some are caused by http://bs-rp.net84.net/js/modernizr.js being redirected to http://error404.000webhost.com/?
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.