0

I am trying to position a border-image at the bottom of a slider on top of the rotating images, but I cannot seem to get it right. I want the border to transition into the rest of my page and if I add the border to the images itself it looks strange because it is rotating.

Here is my jsfiddle.

https://jsfiddle.net/bLyd0anj/

CSS Code:

  #wowslider-container1 { 
    zoom: 1; 
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    max-width: auto;
    max-height:640px;
    font-size: 10px;

    /* reset box-sizing (to boostrap friendly) */
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box; 
}
* html #wowslider-container1{ width:2220px }
#wowslider-container1 .ws_images ul{
    position:relative;
    width: 10000%; 
    height:100%;
    left:0px;
    top: 0px;
    list-style:none;
    margin:0;
    padding:0;
    border-spacing:0;
    overflow: hidden;
    /*table-layout:fixed;*/
}
#wowslider-container1 .ws_images ul li{
    position: relative;
    width:1%;
    height:100%;
    line-height:0; /*opera*/
    overflow: hidden;
    top: 0px;
    left: 0px;
    float:left;
    /*font-size:0;*/
    padding:0 0 0 0 !important;
    margin:0 0 0 0 !important;
}

.wowslider-container1 img {
    position: absolute;
    left: 0;
    bottom: 0;
}

#wowslider-container1 .ws_images{
    position: relative;
    left:0;
    top:0;
    height:100%;
    max-height:640px;
    max-width: auto;
    vertical-align: top;
    border:none;
    overflow: hidden;
}
#wowslider-container1 .ws_images ul a{
    width:100%;
    height:100%;
    max-height:640px;
    display:none;
}
#wowslider-container1 img{
    max-width: none !important;
}
#wowslider-container1 .ws_images .ws_list img,
#wowslider-container1 .ws_images > div > img{
    width:100%;
    border:none 0;
    max-width: none;
    padding:0;
    margin:0;
}
#wowslider-container1 .ws_images > div > img {
    max-height:640px;
}

#wowslider-container1 .ws_images iframe {
    position: absolute;
    z-index: -1;
}

#wowslider-container1 .ws-title > div {
    display: inline-block !important;
}

#wowslider-container1 a{ 
    text-decoration: none; 
    outline: none; 
    border: none; 
}

#wowslider-container1  .ws_bullets { 
    float: left;
    position:absolute;
    z-index:70;
}
#wowslider-container1  .ws_bullets div{
    position:relative;
    float:left;
    font-size: 0px;
}
/* compatibility with Joomla styles */
#wowslider-container1  .ws_bullets a {
    line-height: 0;
}

#wowslider-container1  .ws_script{
    display:none;
}
#wowslider-container1 sound, 
#wowslider-container1 object{
    position:absolute;
}

/* prevent some of users reset styles */
#wowslider-container1 .ws_effect {
    position: static;
    width: 100%;
    height: 100%;
}

/* Navigation arrows for preview mode */
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev{
    position:absolute;
    top:50%;
    width:3.6em;
    height:3.6em;
    margin:-2.8em 0 0 0;
    z-index:60;
    cursor:pointer;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
    opacity:0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); 
}
#wowslider-container1 a.ws_next{
    right:2%;
    background: url(../img/slideshow/next1.png) no-repeat 50% 50%;
    background-size: 100%;
    cursor:pointer;
}
#wowslider-container1 a.ws_prev{
    left:2%;
    background: url(../img/slideshow/prev1.png) no-repeat 50% 50%;
    background-size: 100%;
    cursor:pointer;
}
#wowslider-container1 a.ws_next:hover, #wowslider-container1 a.ws_prev:hover{
    opacity:0.9;
        -webkit-transform: scale(1.1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 200ms ease-in;
    transform: scale(1.1);   
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); 
}
#wowslider-container1 .ws_bullets a {
    position:relative;
    background:url("../img/slideshow/bullet.png") no-repeat scroll 0 0 transparent;
    border:0 none;
    float:left;
    cursor:pointer;
    height:10px;
    margin-right:4px;
    text-indent:-9999px;
    width:10px;
    z-index:100;
    outline:none;
    color:transparent;
}
#wowslider-container1 a.ws_selbull,#wowslider-container1 a.ws_overbull,#wowslider-container1 .ws_bullets a:hover{
    background-position:100% 0;
}

/* bottom center */
#wowslider-container1  .ws_bullets {
    bottom:20px;
    left:50%;
}
#wowslider-container1  .ws_bullets div{
    left:-50%;


}
#wowslider-container1 .ws-title div{
display:none;
    font-size: 0.857em;
    margin-top:0.25em;
}#wowslider-container1 .ws_images > ul{
    animation: wsBasic 20s infinite;
    -moz-animation: wsBasic 20s infinite;
    -webkit-animation: wsBasic 20s infinite;
}
@keyframes wsBasic{0%{left:-0%} 10%{left:-0%} 20%{left:-100%} 30%{left:-100%} 40%{left:-200%} 50%{left:-200%} 60%{left:-300%} 70%{left:-300%} 80%{left:-400%} 90%{left:-400%} }
@-moz-keyframes wsBasic{0%{left:-0%} 10%{left:-0%} 20%{left:-100%} 30%{left:-100%} 40%{left:-200%} 50%{left:-200%} 60%{left:-300%} 70%{left:-300%} 80%{left:-400%} 90%{left:-400%} }
@-webkit-keyframes wsBasic{0%{left:-0%} 10%{left:-0%} 20%{left:-100%} 30%{left:-100%} 40%{left:-200%} 50%{left:-200%} 60%{left:-300%} 70%{left:-300%} 80%{left:-400%} 90%{left:-400%} }

#wowslider-container1 .ws_bullets  a img{
    text-indent:0;
    display:none;
    bottom:10px;
    left:-72px;
    visibility:hidden;
    position:absolute;
    -moz-box-shadow: 0 0 5px #999999;
    box-shadow: 0 0 5px #999999;
    max-width:none;
}

#wowslider-container1 .ws_bulframe div div{
    display: none;
}
#wowslider-container1 .ws_bulframe div {
display: none;
}
#wowslider-container1  .ws_bullets .ws_bulframe{
display: none;
}
#wowslider-container1 .ws_bulframe span{
    display: none;
}#wowslider-container1 .ws_bulframe div div{
    height: auto;
}

@media all and (max-width:760px) {
    #wowslider-container1 .ws_fullscreen {
        display: block;
    }
}
@media all and (max-width:400px){
    #wowslider-container1 .ws_controls,
    #wowslider-container1 .ws_bullets,
    #wowslider-container1 .ws_thumbs{
        display: none
    }

    /*/
BORDER UP
    /*/
#borderup {
  position: absolute;
  bottom: 0px; 
    }

HTML: 

 <!-- Start slider image section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
        <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/shakespeare1.jpg" alt="shakespeare1" title=""/></li>
        <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/dylan.png" alt="dylan" title=""</li>
        <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/gatsby.jpg" alt="gatsby" title=""/></li>
        <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/hemingway.png" alt="hemingway1" title=""/></li>
        <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/nightking.png" alt="nightking" title=""/></li>
    </div> </ul>
    <div class="ws_bullets"><div>
        <a href="#" title="shakespeare1"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/shakespeare1.jpg" alt="shakespeare1"/>2</span></a>
        <a href="#" title="horror"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/dylan.png" alt="dylan"/>3</span></a>
        <a href="#" title="gatsby"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/gatsby.jpg" alt="gatsby"/>4</span></a>
        <a href="#" title="hemingway"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/hemingway.png" alt="hemingway1"/>5</span></a>
      <a href="#" title="punk"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/nightking.png" alt="nightking"/>5</span></a>
    </div></div>
       </div>
       </div>       

     <div class="borderup"><img src="http://englishclass.dk/_themes/englishclass/img/border-up.png"/></div>

        <!-- End slider image section -->
micks88
  • 57
  • 1
  • 10
  • 1
    You have some tag mismatches in your HTML, by the way. See the red dots in your fiddle. (1) the `dylan` image is missing a closing `/>`, (2) the ` ` tags are the wrong way round (3) there is an extra `,` towards the end. I don't think these are related to your issue/question - but they are worth cleaning up. – andrewJames Mar 08 '20 at 13:59

1 Answers1

1

you have some errors in your html and css tags. try to write beauty codes to less errors. see your red dots in js fiddler in css and html area can help you to find problems.

i fixed your code and you can see it:

#wowslider-container1 {
 zoom: 1;
 position: relative;
 top: 0px;
 left: 0px;
 width: 100%;
 max-width: auto;
 max-height: 640px;
 font-size: 10px;
 /* reset box-sizing (to boostrap friendly) */
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
}

* html #wowslider-container1 {
 width: 2220px
}

#wowslider-container1 .ws_images ul {
 position: relative;
 width: 10000%;
 height: 100%;
 left: 0px;
 top: 0px;
 list-style: none;
 margin: 0;
 padding: 0;
 border-spacing: 0;
 overflow: hidden;
 /*table-layout:fixed;
    */
}

#wowslider-container1 .ws_images ul li {
 position: relative;
 width: 1%;
 height: 100%;
 line-height: 0;
 /*opera*/
 overflow: hidden;
 top: 0px;
 left: 0px;
 float: left;
 /*font-size:0;
    */
 padding: 0 0 0 0 !important;
 margin: 0 0 0 0 !important;
}

.wowslider-container1 img {
 position: absolute;
 left: 0;
 bottom: 0;
}

#wowslider-container1 .ws_images {
 position: relative;
 left: 0;
 top: 0;
 height: 100%;
 max-height: 640px;
 max-width: auto;
 vertical-align: top;
 border: none;
 overflow: hidden;
}

#wowslider-container1 .ws_images ul a {
 width: 100%;
 height: 100%;
 max-height: 640px;
 display: none;
}

#wowslider-container1 img {
 max-width: none !important;
}

#wowslider-container1 .ws_images .ws_list img,
#wowslider-container1 .ws_images>div>img {
 width: 100%;
 border: none 0;
 max-width: none;
 padding: 0;
 margin: 0;
}

#wowslider-container1 .ws_images>div>img {
 max-height: 640px;
}

#wowslider-container1 .ws_images iframe {
 position: absolute;
 z-index: -1;
}

#wowslider-container1 .ws-title>div {
 display: inline-block !important;
}

#wowslider-container1 a {
 text-decoration: none;
 outline: none;
 border: none;
}

#wowslider-container1 .ws_bullets {
 float: left;
 position: absolute;
 z-index: 70;
}

#wowslider-container1 .ws_bullets div {
 position: relative;
 float: left;
 font-size: 0px;
}


/* compatibility with Joomla styles */

#wowslider-container1 .ws_bullets a {
 line-height: 0;
}

#wowslider-container1 .ws_script {
 display: none;
}

#wowslider-container1 sound,
#wowslider-container1 object {
 position: absolute;
}


/* prevent some of users reset styles */

#wowslider-container1 .ws_effect {
 position: static;
 width: 100%;
 height: 100%;
}


/* Navigation arrows for preview mode */

#wowslider-container1 a.ws_next,
#wowslider-container1 a.ws_prev {
 position: absolute;
 top: 50%;
 width: 3.6em;
 height: 3.6em;
 margin: -2.8em 0 0 0;
 z-index: 60;
 cursor: pointer;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 opacity: 0.6;
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

#wowslider-container1 a.ws_next {
 right: 2%;
 background: url(../img/slideshow/next1.png) no-repeat 50% 50%;
 background-size: 100%;
 cursor: pointer;
}

#wowslider-container1 a.ws_prev {
 left: 2%;
 background: url(../img/slideshow/prev1.png) no-repeat 50% 50%;
 background-size: 100%;
 cursor: pointer;
}

#wowslider-container1 a.ws_next:hover,
#wowslider-container1 a.ws_prev:hover {
 opacity: 0.9;
 -webkit-transform: scale(1.1);
 -ms-transition: all 200ms ease-in;
 -ms-transform: scale(1.1);
 -moz-transition: all 200ms ease-in;
 -moz-transform: scale(1.1);
 transition: all 200ms ease-in;
 transform: scale(1.1);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}

#wowslider-container1 .ws_bullets a {
 position: relative;
 background: url("../img/slideshow/bullet.png") no-repeat scroll 0 0 transparent;
 border: 0 none;
 float: left;
 cursor: pointer;
 height: 10px;
 margin-right: 4px;
 text-indent: -9999px;
 width: 10px;
 z-index: 100;
 outline: none;
 color: transparent;
}

#wowslider-container1 a.ws_selbull,
#wowslider-container1 a.ws_overbull,
#wowslider-container1 .ws_bullets a:hover {
 background-position: 100% 0;
}


/* bottom center */

#wowslider-container1 .ws_bullets {
 bottom: 20px;
 left: 50%;
}

#wowslider-container1 .ws_bullets div {
 left: -50%;
}

#wowslider-container1 .ws-title div {
 display: none;
 font-size: 0.857em;
 margin-top: 0.25em;
}

#wowslider-container1 .ws_images>ul {
 animation: wsBasic 20s infinite;
 -moz-animation: wsBasic 20s infinite;
 -webkit-animation: wsBasic 20s infinite;
}

@keyframes wsBasic {
 0% {
  left: -0%
 }
 10% {
  left: -0%
 }
 20% {
  left: -100%
 }
 30% {
  left: -100%
 }
 40% {
  left: -200%
 }
 50% {
  left: -200%
 }
 60% {
  left: -300%
 }
 70% {
  left: -300%
 }
 80% {
  left: -400%
 }
 90% {
  left: -400%
 }
}

@-moz-keyframes wsBasic {
 0% {
  left: -0%
 }
 10% {
  left: -0%
 }
 20% {
  left: -100%
 }
 30% {
  left: -100%
 }
 40% {
  left: -200%
 }
 50% {
  left: -200%
 }
 60% {
  left: -300%
 }
 70% {
  left: -300%
 }
 80% {
  left: -400%
 }
 90% {
  left: -400%
 }
}

@-webkit-keyframes wsBasic {
 0% {
  left: -0%
 }
 10% {
  left: -0%
 }
 20% {
  left: -100%
 }
 30% {
  left: -100%
 }
 40% {
  left: -200%
 }
 50% {
  left: -200%
 }
 60% {
  left: -300%
 }
 70% {
  left: -300%
 }
 80% {
  left: -400%
 }
 90% {
  left: -400%
 }
}

#wowslider-container1 .ws_bullets a img {
 text-indent: 0;
 display: none;
 bottom: 10px;
 left: -72px;
 visibility: hidden;
 position: absolute;
 -moz-box-shadow: 0 0 5px #999999;
 box-shadow: 0 0 5px #999999;
 max-width: none;
}

#wowslider-container1 .ws_bulframe div div {
 display: none;
}

#wowslider-container1 .ws_bulframe div {
 display: none;
}

#wowslider-container1 .ws_bullets .ws_bulframe {
 display: none;
}

#wowslider-container1 .ws_bulframe span {
 display: none;
}

#wowslider-container1 .ws_bulframe div div {
 height: auto;
}

@media all and (max-width:760px) {
 #wowslider-container1 .ws_fullscreen {
  display: block;
 }
}

@media all and (max-width:400px) {
 #wowslider-container1 .ws_controls,
 #wowslider-container1 .ws_bullets,
 #wowslider-container1 .ws_thumbs {
  display: none
 }
}


/*/
 BORDER UP 
/*/

.borderup {
 position: absolute;
 bottom: -3px;
 width: 100%;
}
<div id="wowslider-container1">
    <div class="ws_images">
        <ul>
            <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/shakespeare1.jpg" alt="shakespeare1" title="" /></li>
            <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/dylan.png" alt="dylan" title="" /> </li>
            <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/gatsby.jpg" alt="gatsby" title="" /></li>
            <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/hemingway.png" alt="hemingway1" title="" /></li>
            <li><img src="http://englishclass.dk/_themes/englishclass/img/sliders/nightking.png" alt="nightking" title="" /></li>
        </ul>
    </div>

    <div class="ws_bullets">
        <div>
            <a href="#" title="shakespeare1"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/shakespeare1.jpg" alt="shakespeare1"/>2</span></a>
            <a href="#" title="horror"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/dylan.png" alt="dylan"/>3</span></a>
            <a href="#" title="gatsby"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/gatsby.jpg" alt="gatsby"/>4</span></a>
            <a href="#" title="hemingway"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/hemingway.png" alt="hemingway1"/>5</span></a>
            <a href="#" title="punk"><span><img src="http://englishclass.dk/_themes/englishclass/img/sliders/nightking.png" alt="nightking"/>5</span></a>
        </div>
    </div>
    <div class="borderup">
      <img src="http://englishclass.dk/_themes/englishclass/img/border-up.png" />
    </div>
</div>
Reza ghasemi
  • 198
  • 1
  • 10
  • Thanks. It did fix some flutter I had, but only during previews. – micks88 Mar 08 '20 at 15:28
  • @micks88 try make local images will fix preview problem. http://englishclass.dk restrict access to images from remote server. if your problem is solved i hope you tick my answer. – Reza ghasemi Mar 08 '20 at 15:42
  • Oh it didn't. I wasn't asking to have someone clean up my code :) The only reason that they are not local is that I wanted the jsfiddle to work. – micks88 Mar 08 '20 at 17:26
  • @micks88 it's ok. :-) your mistake was in syntax of html and css. if you have no another problem please tick my answer. – Reza ghasemi Mar 08 '20 at 17:32
  • I don't think you understand. I was trying to put this border at the bottom (http://englishclass.dk/_themes/englishclass/img/border-up.png) of the sliding images. If you can help me with that, I will tick your answer as that was my real question. – micks88 Mar 08 '20 at 17:36
  • i think i understand. you want to put image outside of slider at the bottom yes? now it's inside – Reza ghasemi Mar 08 '20 at 17:48
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/209261/discussion-between-reza-ghasemi-and-micks88). – Reza ghasemi Mar 08 '20 at 17:51