i linking style css in html code , on html editors code working absolutely fine except on site. requirement: hyperlinked images should scroll horizontally. expected output: images hyperlinked, , when page opened start scroll automatically. actual output: images hyperlinked images linked vertically on page. on editors see images scrolling.
the website wordpress website here code snippet. css source : designshack.com
<!doctype html> <html> <head> <style> {margin: 0; padding: 0;} body { background: url('dark_geometric.png'); } #container { width: 1000px; 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: 233px; width: 3550px; margin-bottom: 80px; } /*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: 0; } 100% { margin-left: -2125px; } } @-moz-keyframes bannermove { 0% { margin-left: 0; } 100% { margin-left: -2125px; } } @-webkit-keyframes bannermove { 0% { margin-left: 0; } 100% { margin-left: -2125px; } } @-ms-keyframes bannermove { 0% { margin-left: 0; } 100% { margin-left: -2125px; } } @-o-keyframes bannermove { 0% { margin-left: 0; } 100% { margin-left: -2125px; } } .photobanner { height: 233px; width: 3550px; margin-bottom: 80px; } .photobanner img { -webkit-transition: .5s ease; -moz-transition: .5s ease; -o-transition: .5s ease; -ms-transition: .5s ease; transition: .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: 0 3px 5px rgba(0,0,0,0.2); -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.2); box-shadow: 0 3px 5px rgba(0,0,0,0.2); } </style> </head> <body> <div class="photobanner"> <a href="mysite"> <img class="first" src="me.jpg" alt="" /> </a> <a href="site" <img src="ns.jpg" alt="" /></a> <a href="mysite" <img src="gu.jpg" alt="" /></a> <a href="mysite" <img src="ri.jpg" alt="" /></a> <a href="mysite" <img src="me.jpg" alt="" /></a> <a href="mysite" <img src="ns.jpg" alt="" /></a> <a href="mysite" <img src="gu.jpg" alt="" /></a> <a href="mysite" <img src="ri.jpg" alt="" /></a> </div> </body> </html>
fix html syntax first?:
<div class="photobanner"> <a href="mysite"> <img class="first" src="me.jpg" alt="" /> </a> <a href="site"> <img src="ns.jpg" alt="" /> </a> <a href="mysite"> <img src="gu.jpg" alt="" /> </a> <a href="mysite"> <img src="ri.jpg" alt="" /> </a> <a href="mysite"> <img src="me.jpg" alt="" /> </a> <a href="mysite"> <img src="ns.jpg" alt="" /> </a> <a href="mysite"> <img src="gu.jpg" alt="" /> </a> <a href="mysite"> <img src="ri.jpg" alt="" /> </a> </div> 
Comments
Post a Comment