Sat, 2018-03-31 04:06
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>
Sat, 2018-03-31 06:48
#1
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.
Sat, 2018-03-31 18:55
#2
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