2 replies [Last post]
Leea
Leea's picture
Offline
newbie
Last seen: 1 year 46 weeks ago
Timezone: GMT-5
Joined: 2018-03-31
Posts: 4
Points: 6

I am a newbie and admit I know not what I am doing. I tend to borrow/steal code I find and then adapt it for my use. I tried to adapt this CSS but I don't know CSS. I am trying to make a banner with pictures that keep scrolling over and over.
This sort of works. I have two issues. What happens is it displays/scrolls 7 and 1/2 pictures and then starts over at the beginning again. The last four photos never scroll. The second problem is I see the top of the last four photos at the bottom of the banner. They just jump from one to the other. If I make the banner taller I see the whole picture. I am willing to try any clue you have.

<div id="container">
       <a href="http://www.somelink.com">
        <div class="photobanner">
           <img class="first" src="Cedarburg.png" alt="" />
           <img src="Govenor.png" alt="" />
           <img src="Holy hill.png" alt="" />
           <img src="Horicon.png" alt="" />
           <img src="Monches.png" alt="" />
           <img src="Perrot2003.png" alt="" />
           <img src="Perrot2007 Larry Manz2.png" alt="" />
           <img src="Retzer r.png" alt="" />
           <img src="Rice r.png" alt="" />
           <img src="Riveredge.png" alt="" />
           <img src="Wally r.png" alt="" />
         </div>
         </a>
  </div>

<style>
     * {margin: 0; padding: 0;}
 
     body { background-color: #666;}
 
    #container {
        width:70%;
        overflow: hidden;
        margin: 50px auto;
        background: white;
    }
 
    /*header*/
    header {
        width: 800px;
        margin: 40px auto;
    }
 
    header h1 {
        text-align: center;
        font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
    }
 
    header p {
        font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
        text-align: justify;
    }
 
    /*photobanner*/
 
    .photobanner {
        height: 500px;
        width: 3550px;
        margin-bottom: -45px;  <!--  -45 -->
		margin-top: 5px;  <!--  wasn't here didn't help -->
    }
 
    /*keyframe animations*/
    .first {
        -webkit-animation: bannermove 30s linear infinite;
           -moz-animation: bannermove 30s linear infinite;
            -ms-animation: bannermove 30s linear infinite;
             -o-animation: bannermove 30s linear infinite;
                animation: bannermove 30s linear infinite;
    }
 
    @keyframes "bannermove" {
     0% {
        margin-left: 0px;
     }
     100% {
        margin-left: -2125px;
     }
    }
 
    @-moz-keyframes bannermove {
     0% {
       margin-left: 0px;
     }
     100% {
       margin-left: -2125px;
     }
    }
 
    @-webkit-keyframes "bannermove" {
     0% {
       margin-left: 0px;
     }
     100% {
       margin-left: -2125px;
     }
    }
 
    @-ms-keyframes "bannermove" {
     0% {
       margin-left: 0px;
     }
     100% {
       margin-left: -2125px;
     }
    }
 
    @-o-keyframes "bannermove" {
     0% {
       margin-left: 0px;
     }
     100% {
       margin-left: -2125px;
     }
    }
 
 
 
    .photobanner img {
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
<!--
    .photobanner img:hover {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
        cursor: pointer;
 
        -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
        box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    }
-->
    </style>

Leea
Leea's picture
Offline
newbie
Last seen: 1 year 46 weeks ago
Timezone: GMT-5
Joined: 2018-03-31
Posts: 4
Points: 6

I figured out that if I

I figured out that if I change the margin-left to -3500 instead of -2125 I get all the pictures. However I still see some along the bottom which I can't get rid of.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 29 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Not tested

Try this as a generic type fix.

.photobanner {
    ...
    white-space: nowrap;
    }

That should be enough to fix things. Not tested against your markup, so buyer beware.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.