Search code examples
htmlcsswordpresshorizontal-scrollinghorizontalscrollview

HTML CSS linkage error

I linking the style css in my html code and on all HTML editors my code is working absolutely fine except on my site. Requirement: Hyperlinked images should scroll horizontally. Expected output: All the images are hyperlinked, and when the page is opened they start scroll automatically. Actual output: all the images are hyperlinked but the images are linked vertically on my page. On all editors i see the images scrolling.

The website is a wordpress website Here is my 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: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .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>
Solution

  • Fix your 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>