javascript - White space after slideshow -
i created slideshow, cant remove white space after image
please help, tried everything, in vain. @ first thought margin, couldn't find any. slideshow-container absolute earlier on other slider, why?
var slideindex = 0; showslides(); function showslides() { var i; var slides = document.getelementsbyclassname("myslides"); var dots = document.getelementsbyclassname("dot"); (i = 0; < slides.length; i++) { slides[i].style.display = "none"; } slideindex++; if (slideindex> slides.length) {slideindex = 1} (i = 0; < dots.length; i++) { dots[i].classname = dots[i].classname.replace(" active", ""); } slides[slideindex-1].style.display = "block"; dots[slideindex-1].classname += " active"; settimeout(showslides, 6000); // change image every 2 seconds }@media screen , (max-width: 900px) { body { overflow: scroll; } } body { background-color: white; background-attachment: fixed; font-family: 'open sans', serif; color: white; } #container { height: 1000px; } /* header nav bar , login snippet */ #head { position: absolute; height: 150px; width: 100%; background-color: #ffffff; right: 0px; left: 0px; top: 0px; } #logo-image { position: relative; margin-top: 40px; margin-left: 40px; } #logo-image:hover { -webkit-animation: blur 0.5s ease-in; } @-webkit-keyframes blur { 0% { -webkit-filter: blur(0px); filter: blur(0px); } 50% { -webkit-filter: blur(1px); filter: blur(2px); } 100% { -webkit-filter: blur(0px); filter: blur(0px); } } .navbar-fixed { top: 0; z-index: 100; position: fixed; width: 100%; } .navigationmenu-main { list-style-type: none; overflow: hidden; background-color: #333; } .navigationmenu-parent { float: left; } .navigationmenu-child { display: inline-block; color: white; width: 50px; text-align: center; padding: 10px 16px; text-decoration: none; background-color: #333; -webkit-transition: background-color .3s; } .navigationmenu-child:hover { background-color: #111; } .navigationmenu-child:hover + .navigationmenu-line { width: 100%; } .navigationmenu-line { height: 3px; background-color: red; width: 0%; -webkit-transition: width .3s; -webkit-transition-timing-function: ease; } .login-parent { float: right; cursor: pointer; } .login-child { display: inline-block; color: white; width: auto; text-align: center; padding: 10px 16px; text-decoration: none; background-color: #333; -webkit-transition: background-color .3s; } .login-child:hover { background-color: #111; } .login-child:hover + .navigationmenu-line { width: 100%; } #loginbox { display: block; visibility: hidden; position: absolute; width: 300px; top: 136px; right: 90px; z-index: 999; background: #4c4c4c; /* old browsers */ background: -moz-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* ff3.6-15 */ background: -webkit-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* chrome10-25,safari5.1-6 */ background: linear-gradient(135deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* w3c, ie10+, ff16+, chrome26+, opera12+, safari7+ */ filter: progid: dximagetransform.microsoft.gradient( startcolorstr='#4c4c4c', endcolorstr='#131313', gradienttype=1); /* ie6-9 fallback on horizontal gradient */ padding: 15px; box-shadow: 5px 5px 6px rgba(0, 0, 0, 1); border-radius: 3px 0 3px 3px; -webkit-transition: padding .3s; } .login-parent:hover #loginbox { visibility: visible; } #loginform { padding: 5px; } #loginelement { padding: 5px; } /*----------------------*/ /* main body */ #main { position: relative; height: 100%; width: 90%; margin-left: auto; margin-right: auto; background-color: #ffffff; top: 0px; bottom: 100px; } #box { position: relative; height: 100%; width: 90%; margin-left: auto; margin-right: auto; background-color: rgba(255, 255, 255, 0.4); top: 140px; bottom: 100px; box-shadow: 4px 4px 3px 1px rgba(0, 0, 0, 0.4); } /*---------------*/ /* slider */ /* slideshow container */ .slideshow-container { position: absolute; width: 1500px; left: 0px; margin-top: 128px; background-size: cover; } /* caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* dots/bullets/indicators */ .dot { height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active { background-color: #717171; } /* fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 0.5s; } @-webkit-keyframes fade { {opacity: .4} {opacity: 1} } @keyframes fade { {opacity: .4} {opacity: 1} } /* .slide1 { position: absolute; width: 100%; height: 800px; background-size: cover; animation: fade 36s infinite; -webkit-animation: fade 36s infinite; } @keyframes fade { 0% { background: url("1.jpg") no-repeat center; } 20% { background: url("1.jpg") no-repeat center; } 33.333% { background: url("2.jpg") no-repeat center; } 50% { background: url("2.jpg") no-repeat center; } 66.666% { background: url("3.jpg") no-repeat center; } 80% { background: url("3.jpg") no-repeat center; } 100% { background: url("1.jpg") no-repeat center; } }*/ .button { cursor: pointer; position: relative; font-size: 48px; color: rgba(0, 0, 0, 0.5); top: 250px; display: inline-block; } #rightarrow { float: right; } .floattext { position: relative; top: 800px; width: 800px; background:transparent; z-index: 999; left: 350px; animation: fadein 4s ease forwards; } @keyframes fadein { 0% { top: 800px; opacity: 0; } 100% { top: 500px; opacity: 1; } } /*-----------------*/ /* foot area fixed */ #foot { position: fixed; height: 70px; width: 100%; background-color: #333; right: 0px; left: 0px; bottom: 0px; z-index: 9999; }<!doctype html> <html> <head> <title>le meridian | home away home</title> <link href="style.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=open+sans" rel="stylesheet"> </head> <body> <div id="container"> <div id="head"> <img height="20%" id="logo-image" src="logo.png" width="20%"> <ul class="navigationmenu-main" id="nav_bar"> <li class="navigationmenu-parent"> <a class="navigationmenu-child" href="">a</a> <div class="navigationmenu-line"> </div> </li> <li class="navigationmenu-parent"> <a class="navigationmenu-child" href="">b</a> <div class="navigationmenu-line"> </div> </li> <li class="navigationmenu-parent"> <a class="navigationmenu-child" href="">c</a> <div class="navigationmenu-line"> </div> </li> <li class="navigationmenu-parent"> <a class="navigationmenu-child" href="">d</a> <div class="navigationmenu-line"> </div> </li> <li class="navigationmenu-parent"> <a class="navigationmenu-child" href="">e</a> <div class="navigationmenu-line"> </div> </li> <li class="navigationmenu-parent"> <a class="navigationmenu-child" href="">f</a> <div class="navigationmenu-line"> </div> </li> <li class="navigationmenu-parent"> <a class="navigationmenu-child" href="">g</a> <div class="navigationmenu-line"> </div> </li> <li class="login-parent"> <div class="login-child"> <a href="sign up.html" style="color: inherit; text-decoration: none; "> sign up</a> </div> <div class="navigationmenu-line"> </div> </li> <li class="login-parent"> <div class="login-child" id="trigger"> login ▼ </div> <div class="navigationmenu-line"> </div> <div id="loginbox"> <form id="loginform" name="loginform"> <center> login form<br> <br> <input id="loginelement" name="email" placeholder="userid / email" type="email"><br> <br> <input id="loginelement" name="password" placeholder="password" type="password"><br> <br> <input id="loginelement" name="loginsubmit" type="submit"> <input id="loginelement" name="loggedin" type="checkbox"> stay signed in </center> </form> </div> </li> </ul> </div> <!--div class='slider'> <div class='slide1'> <div class="button"> ◀ </div> <div class="button" id="rightarrow"> ▶ </div> </div> </div--> <div class="slideshow-container"> <div class="myslides fade"> <div class="numbertext">1 / 3</div> <img src="1.jpg" style="width:100%"> <div class="text">caption text</div> </div> <div class="myslides fade"> <div class="numbertext">2 / 3</div> <img src="2.jpg" style="width:100%"> <div class="text">caption two</div> </div> <div class="myslides fade"> <div class="numbertext">3 / 3</div> <img src="3.jpg" style="width:100%"> <div class="text">caption three</div> </div> </div> <br> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> <div class="floattext"> <font size="7"></font> <center> <font size="7">a home away home<br> book now</font> </center> <font size="7"></font> </div> <div id="foot"> <p align="center">windsor place, new delhi, new delhi, 110001, india</p> </div> </div> </body> </html>
there few problems in code.
problem 1-
.textclass taking more width window have fixed .problem 2-
slider-containerclass given fixed width of 1500px have changed 100%.
below working code no white space.
var slideindex = 0; showslides(); function showslides() { var i; var slides = document.getelementsbyclassname("myslides"); var dots = document.getelementsbyclassname("dot"); (i = 0; < slides.length; i++) { slides[i].style.display = "none"; } slideindex++; if (slideindex > slides.length) { slideindex = 1 } (i = 0; < dots.length; i++) { dots[i].classname = dots[i].classname.replace(" active", ""); } slides[slideindex - 1].style.display = "block"; dots[slideindex - 1].classname += " active"; settimeout(showslides, 6000); // change image every 2 seconds }@media screen , (max-width: 900px) { body { overflow: scroll; } } body { background-color: white; background-attachment: fixed; font-family: 'open sans', serif; color: white; margin: 0px; padding: 0px; } #container { height: 1000px; } /* header nav bar , login snippet */ #head { position: absolute; height: 150px; width: 100%; background-color: #ffffff; right: 0px; left: 0px; top: 0px; } #logo-image { position: relative; margin-top: 40px; margin-left: 40px; } #logo-image:hover { -webkit-animation: blur 0.5s ease-in; } @-webkit-keyframes blur { 0% { -webkit-filter: blur(0px); filter: blur(0px); } 50% { -webkit-filter: blur(1px); filter: blur(2px); } 100% { -webkit-filter: blur(0px); filter: blur(0px); } } .navbar-fixed { top: 0; z-index: 100; position: fixed; width: 100%; } .navigationmenu-main { list-style-type: none; overflow: hidden; background-color: #333; } .navigationmenu-parent { float: left; } .navigationmenu-child { display: inline-block; color: white; width: 50px; text-align: center; padding: 10px 16px; text-decoration: none; background-color: #333; -webkit-transition: background-color .3s; } .navigationmenu-child:hover { background-color: #111; } .navigationmenu-child:hover+.navigationmenu-line { width: 100%; } .navigationmenu-line { height: 3px; background-color: red; width: 0%; -webkit-transition: width .3s; -webkit-transition-timing-function: ease; } .login-parent { float: right; cursor: pointer; } .login-child { display: inline-block; color: white; width: auto; text-align: center; padding: 10px 16px; text-decoration: none; background-color: #333; -webkit-transition: background-color .3s; } .login-child:hover { background-color: #111; } .login-child:hover+.navigationmenu-line { width: 100%; } #loginbox { display: block; visibility: hidden; position: absolute; width: 300px; top: 136px; right: 90px; z-index: 999; background: #4c4c4c; /* old browsers */ background: -moz-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* ff3.6-15 */ background: -webkit-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* chrome10-25,safari5.1-6 */ background: linear-gradient(135deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* w3c, ie10+, ff16+, chrome26+, opera12+, safari7+ */ filter: progid: dximagetransform.microsoft.gradient( startcolorstr='#4c4c4c', endcolorstr='#131313', gradienttype=1); /* ie6-9 fallback on horizontal gradient */ padding: 15px; box-shadow: 5px 5px 6px rgba(0, 0, 0, 1); border-radius: 3px 0 3px 3px; -webkit-transition: padding .3s; } .login-parent:hover #loginbox { visibility: visible; } #loginform { padding: 5px; } #loginelement { padding: 5px; } /*----------------------*/ /* main body */ #main { position: relative; height: 100%; width: 90%; margin-left: auto; margin-right: auto; background-color: #ffffff; top: 0px; bottom: 100px; } #box { position: relative; height: 100%; width: 90%; margin-left: auto; margin-right: auto; background-color: rgba(255, 255, 255, 0.4); top: 140px; bottom: 100px; box-shadow: 4px 4px 3px 1px rgba(0, 0, 0, 0.4); } /*---------------*/ /* slider */ /* slideshow container */ .slideshow-container { position: absolute; /*width: 1500px;*/ width: 100%; left: 0px; margin-top: 128px; background-size: cover; } /* caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; text-align: center; /*width:100%; */ width:calc(100%-24px); } /* number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* dots/bullets/indicators */ .dot { height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active { background-color: #717171; } /* fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 0.5s; } @-webkit-keyframes fade { { opacity: .4 } { opacity: 1 } } @keyframes fade { { opacity: .4 } { opacity: 1 } } /* .slide1 { position: absolute; width: 100%; height: 800px; background-size: cover; animation: fade 36s infinite; -webkit-animation: fade 36s infinite; } @keyframes fade { 0% { background: url("1.jpg") no-repeat center; } 20% { background: url("1.jpg") no-repeat center; } 33.333% { background: url("2.jpg") no-repeat center; } 50% { background: url("2.jpg") no-repeat center; } 66.666% { background: url("3.jpg") no-repeat center; } 80% { background: url("3.jpg") no-repeat center; } 100% { background: url("1.jpg") no-repeat center; } }*/ .button { cursor: pointer; position: relative; font-size: 48px; color: rgba(0, 0, 0, 0.5); top: 250px; display: inline-block; } #rightarrow { float: right; } .floattext { position: relative; top: 800px; width: 800px; background: transparent; z-index: 999; left: 350px; animation: fadein 4s ease forwards; } @keyframes fadein { 0% { top: 800px; opacity: 0; } 100% { top: 500px; opacity: 1; } } /*-----------------*/ /* foot area fixed */ #foot { position: fixed; height: 70px; width: 100%; background-color: #333; right: 0px; left: 0px; bottom: 0px; z-index: 9999; }<!doctype html> <html> <head> <title>le meridian | home away home</title> <link href="style.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=open+sans" rel="stylesheet"> </head> <body> <div id="container"> <div id="head"> <img height="20%" id="logo-image" src="logo.png" width="20%"> <ul class="navigationmenu-main" id="nav_bar"> <li class="navigationmenu-parent"> <a class="navigationmenu-child" href="">a</a> <div class="navigationmenu-line"> </div> </li> <li class="navigationmenu-parent"> <a class="navigationmenu-child" href="">b</a> <div class="navigationmenu-line"> </div> </li> <li class="navigationmenu-parent"> <a class="navigationmenu-child" href="">c</a> <div class="navigationmenu-line"> </div> </li> <li class="navigationmenu-parent"> <a class="navigationmenu-child" href="">d</a> <div class="navigationmenu-line"> </div> </li> <li class="navigationmenu-parent"> <a class="navigationmenu-child" href="">e</a> <div class="navigationmenu-line"> </div> </li> <li class="navigationmenu-parent"> <a class="navigationmenu-child" href="">f</a> <div class="navigationmenu-line"> </div> </li> <li class="navigationmenu-parent"> <a class="navigationmenu-child" href="">g</a> <div class="navigationmenu-line"> </div> </li> <li class="login-parent"> <div class="login-child"> <a href="sign up.html" style="color: inherit; text-decoration: none; "> sign up</a> </div> <div class="navigationmenu-line"> </div> </li> <li class="login-parent"> <div class="login-child" id="trigger"> login ▼ </div> <div class="navigationmenu-line"> </div> <div id="loginbox"> <form id="loginform" name="loginform"> <center> login form<br> <br> <input id="loginelement" name="email" placeholder="userid / email" type="email"><br> <br> <input id="loginelement" name="password" placeholder="password" type="password"><br> <br> <input id="loginelement" name="loginsubmit" type="submit"> <input id="loginelement" name="loggedin" type="checkbox"> stay signed in </center> </form> </div> </li> </ul> </div> <!--div class='slider'> <div class='slide1'> <div class="button"> ◀ </div> <div class="button" id="rightarrow"> ▶ </div> </div> </div--> <div class="slideshow-container"> <div class="myslides fade"> <div class="numbertext">1 / 3</div> <img src="https://dummyimage.com/600x400/000/fff" style="width:100%"> <div class="text">caption text</div> </div> <div class="myslides fade"> <div class="numbertext">2 / 3</div> <img src="https://dummyimage.com/600x400/000/fff" style="width:100%"> <div class="text">caption two</div> </div> <div class="myslides fade"> <div class="numbertext">3 / 3</div> <img src="https://dummyimage.com/600x400/000/fff" style="width:100%"> <div class="text">caption three</div> </div> </div> <br> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> <div class="floattext"> <font size="7"></font> <center> <font size="7">a home away home<br> book now</font> </center> <font size="7"></font> </div> <div id="foot"> <p align="center">windsor place, new delhi, new delhi, 110001, india</p> </div> </div> </body> </html>
Comments
Post a Comment