html - How do I put images next to each other? -
i want make slide show put images won't show next each other.
i have made code, can't figure out how put next each other.
each image same size: 960 x 600
thanks in advance.
html
<div class="container"> <img src="images/logo.png" alt="club penguin item codes" align:"left" class="logo" /> <nav> <ul class="navigation"> <li><a href="index.html" class="active">home</a></li> <li><a href="clothing/index.html">clothing items</a></li> <li><a href="furniture/index.html">furniture items</a></li> <li><a href="igloos/index.html">igloos</a></li> <li><a href="stamps/index.html">stamps</a></li> <li><a href="music/index.html">music</a></li> <li><a href="chat/index.html">chat</a></li> </ul> </nav> <div class="homepage"> <div id=slider> <figure> <img src="images/ss_clothes.png" alt="club penguin clothes" align:"center" /> <img src="images/ss_furniture.png" alt="club penguin furniture" align:"center" /> <img src="images/ss_igloos.png" alt="club penguin igloos" align:"center" /> </figure> </div> <div class="checkout"> <h4>also check out penguin lodge , penguin gold more club penguin cheats!</h4> </div> </div> </div>
css
@keyframes slider { 0% { left: 0; } 20% { left: 0; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200% } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400; } } #slider { overflow: hidden; } #slider figure img { width: 100%; float: left; display: inline; } #slider figure { position: relative; width: 300% margin: 0; left: 0; text-align: left; font-size: 0; animation: 20s slider infinite; }
you need make images 33% in order put them next each other:
#slider figure img { width:33%; float: left; }
Comments
Post a Comment