huge trouble from slideshow

No replies

Wed, 2013-12-11 17:33

dymitr1557

Offline

newbie

Last seen: 9 years 25 weeks ago

Timezone: GMT+1

Joined: 2013-12-11

Posts: 1

Points: 2

Hello, firstable I apologase from my lanugages mistake but I'am foreigner. I've got a trobule with my scroller. I am building a website. Fisrt I got a ready script and i would like to add to this layout- scroller. I did It, but when I changing my screen resolution I've got a problem because the sccoller is changing position. I wille be very gratefull if You help me with this problem
this is a adress to my website: http://puzzledesign.cba.pl/#page_1/
HTML:

<div class="extra">
  <div id="page_2">
    <div class="main">
      <!--header -->
      <header>
        <a href="index.html"><img src="images/logo.png" alt=""/></a>
        <nav>
          <ul class="menu">
            <li class="active"><a href="#page_2">News</a></li>
            <li><a href="#page_3">Spa &amp; Wellnes</a></li>
            <li><a href="#page_4">Price</a></li>
            <li><a href="#page_5">Children Zone</a></li>
            <li><a href="#page_6">Contacts</a></li>
          </ul>
        </nav>
      </header>
         <ul class="cb-slideshow">
            <li><span>Image 01</span><div><h3></h3></div></li>
            <li><span>Image 02</span><div><h3></h3></div></li>
            <li><span>Image 03</span><div><h3></h3></div></li>
            <li><span>Image 04</span><div><h3></h3></div></li>
            <li><span>Image 05</span><div><h3></h3></div></li>
            <li><span>Image 06</span><div><h3></h3></div></li>
        </ul>
      <!--header end-->
      <!--content -->

CSS of script:

.left {
	float:left;
}
.right {
	float:right;
}
.wrapper {
	width:100%;
	overflow:hidden;
}
/* Global properties ======================================================== */
 
body {
	background:#f0f1f0;
	border:0;
	font:14px Arial, Helvetica, sans-serif;
	color:#6b6b6b;
	line-height:20px;
}
.block {
	height:78px;
}
.extra {
	min-height:100%;
	height:auto !important;
	height:100%;
	margin: 0 auto -78px;
	background:url(../images/extra.jpg) bottom repeat;
}
.extra3 {
	min-height:100%;
	height:auto !important;
	height:100%;
	margin: 0 auto -78px;
	background:url(../images/extra2.jpg) bottom repeat;
}
.extra3 {
	min-height:100%;
	height:auto !important;
	height:100%;
	margin: 0 auto -78px;
	background:url(../images/extra3.jpg) bottom repeat;
}
.extra4 {
	min-height:100%;
	height:auto !important;
	height:100%;
	margin: 0 auto -78px;
	background:url(../images/extra4.jpg) bottom repeat;
}
.extra6 {
	min-height:100%;
	height:auto !important;
	height:100%;
	margin: 0 auto -78px;
	background:url(../images/extra5.jpg) bottom repeat;
}
body, html {
	height:100%;
}
.block2 {
	height:130px;
}
.extra2 {
	min-height:100%;
	height:auto !important;
	height:100%;
	margin: 0 auto -130px;
	background:url(../images/extra6.jpg) bottom repeat;
}
.body1 {
}
.css3 {
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	box-shadow: 0 0 4px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .4);
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .4);
	position: relative;
}
/* Global Structure ============================================================= */
.main {
	width: 100%;
}
/* ============================= main layout ====================== */
 
a {
	color:#6b6b6b;
	text-decoration: underline;
	outline:none
}
a:hover {
	text-decoration: none
}
p {
	padding-bottom:20px;
}
h2 {
	font-size:26px;
	color:#000000;
	line-height:1.2em;
	padding:8px 0 18px 0;
	letter-spacing:-1px;
}
/* ============================= header ====================== */
header {
	width:100%;
	overflow:hidden
}
h1 {
	font-size:74px;
	line-height:1.2em;
	padding:78px 0 0 0;
	text-transform:uppercase;
	margin-left:-5px;
	letter-spacing:-1px;
	margin-bottom:-17px
}
h1 a {
	text-decoration:none
}
* +html h1 {
	padding-top:82px;
	margin-bottom:-21px;
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:<img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> {
 h1 {
padding-top:81px;
margin-bottom:-20px;
}
}
.menu {
	padding:0 25px;
	overflow:hidden;
}
.menu li {
	float:left;
}
.menu li a {
	display: block;
	padding:0 18px;
	font-size:40px;
	color:#fff !important;
	text-decoration:none;
	line-height:54px;
	height:57px;
	letter-spacing:-1px;
}
.menu li a:hover, .menu .active a {
	background:#f0f1f0
}
#logo {
	margin:0px 20%;
	display:block;
	background:url(../images/logo.png) 0 0 no-repeat;
	width:800px;
	height:313px;
	text-indent:-9999px;
}
#bgmenu {
	width:100%;
	height:70px;
	margin:-70px 0 0 0px;
	background-color: #000;
	z-index:101;
	position:relative;
	opacity:0.7;
}
#menu {
	width:1024px;
	height:70px;
	margin:-65px 0 0 20%;
 
}
#menu li {
	float:left;
}
#menu a {
	font-size:30px;
	text-decoration:none;
	letter-spacing:-1px;
}
.nav1 {
	padding:20px 0 0 65px;
	z-index:10000;
	position:relative;
}
.nav2 {
	padding:20px 0 0 65px;
	z-index:10000;
	position:relative;
}
.nav3 {
	padding:20px 0 0 65px;
	z-index:10000;
	position:relative;
}
.nav4 {
	padding:20px 0 0 65px;
	z-index:10000;
	position:relative;
}
.nav4 a {
	color:#FF0080;
}
.nav1 a, .nav2 a, .nav3 a, .nav5 a {
	color:#fff;
}
.nav5 {
	padding:20px 0 0 65px;
	z-index:10000;
	position:relative;
}
#menu .nav1 a:hover {
	color:#bb0e0e
}
#menu .nav2 a:hover {
	color:#ca6509
}
#menu .nav3 a:hover {
	color:#3f9711
}
#menu .nav4 a:hover {
	color:#0ca0ce
}
#menu .nav5 a:hover {
	color:#8606c5
}
/* ============================= content ====================== */
 
.content {
	padding-top:40px;
	width:100%;
	overflow:hidden
}
.pad_left1 {
	padding-left:39px;
}
.marg_right1 {
	margin-right:19px;
}
.pad_bot1 {
	padding-bottom:10px;
}
.pad_bot2 {
	padding-bottom:40px;
}
.pad_bot3 {
	padding-bottom:15px;
}
.pad_top1 {
	padding-top:20px;
}
.color1 {
	color:#000
}
.font1 {
	font-size:16px;
	color:#000
}
.list1 {
	margin-top:-4px;
}
.list1 li {
	line-height:30px;
}
.list1 li a {
	color:#6b6b6b !important;
	padding-left:13px;
	background:url(../images/marker_1.gif) 0 4px no-repeat
}
.button {
	display:inline-block;
	color:#fff !important;
	text-decoration:none;
	line-height:34px;
	padding:0 17px;
	background:#000
}
.button:hover {
	background:#fff !important;
	color:#000 !important
}
/* ============================= footer ====================== */
 
footer {
	height:78px;
	text-align:center;
	width:100%;
	overflow:hidden;
}
.footer_end {
	height:130px
}
.footer_end a {
	color:#8606c5
}
.footer_end a:hover {
}
.icons {
	display:inline-block;
	padding:30px 0 10px 0
}
.icons li {
	float:left;
	padding:0 3px;
}
* +html .icons {
	display: inline
}
/* Tooltips */
.aToolTip {
	border:1px solid #000;
	background: url(../images/opacity_50_black.png) repeat;
	color:#fff;
	margin:0;
	padding:0px 5px;
	font-size:11px;
}
.aToolTip .aToolTipContent {
	position:relative;
	margin:0;
	padding:0;
}
a.aToolTipCloseBtn {
	display:block;
	height:20px;
	width:20px;
	overflow:hidden;
	background:no-repeat;
	text-indent:-9999px;
	outline:none;
	position:absolute;
	top:-15px;
	right:-20px;
}
/* ============================= forms ============================= */
 
#ContactForm {
}
#ContactForm .wrapper {
	min-height:40px;
}
#ContactForm .textarea_box {
	height:145px;
	padding-bottom:6px;
	width:100%;
	overflow:hidden
}
#ContactForm {
}
#ContactForm a {
	margin-right:10px;
	float:left;
}
#ContactForm .input {
	width:224px;
	border:1px solid #e3e4e3;
	background:#fff;
	padding:6px 8px;
	color:#bebebe;
	font:14px Arial, Helvetica, sans-serif;
	height:16px
}
#ContactForm textarea {
	overflow: auto;
	width:224px;
	border:1px solid #e3e4e3;
	background:#fff;
	padding:6px 8px;
	color:#bebebe;
	font:14px Arial, Helvetica, sans-serif;
	height:127px;
	margin:0
}
#kontakt {
	position:relative;
	top:-120px;
	width: 450px;
	height:150px;
	z-index:101000;
	background-color:#FFF;
	margin:0px;
	padding:0px;
}

CSS od scroller:

.cb-slideshow,
.cb-slideshow:after { 
    position: absolute;
    width: 100%;
    height: 400px;
    top: 1920px;
    left: 0px;
    z-index: 100;
	border-bottom: solid 3px #FF0080;
	border-top: solid 1px #FF0080;
}
 
.cb-slideshow:after { 
    content: '';
    background: transparent url(../images/pattern.png) repeat top left; 
	top: 0px;
}
.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}
.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/1.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(../images/3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(../images/4.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(../images/5.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url(../images/6.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
 
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
 
.cb-slideshow,
.cb-slideshow:after { 
    position: absolute;
    width: 100%;
    height: 400px;
    top: 1920px;
    left: 0px;
    z-index: 100;
	border-bottom: solid 3px #FF0080;
	border-top: solid 1px #FF0080;
}
 
.cb-slideshow:after { 
    content: '';
    background: transparent url(../images/pattern.png) repeat top left; 
	top: 0px;
}
.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}
.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/1.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(../images/3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(../images/4.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(../images/5.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url(../images/6.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
 
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

Tags:

huge trouble from slideshow

User login

Navigation