html - Button not absolutely positioned in section -
these buttons supposed absolutely positioned within .gallery
, reason, when expand viewport, stretch outside of gallery , positioned viewport. missing here?
html:
<section class="gallery"> <div> <a href="http://www.cnn.com"> <img src="/img/gallery-img-1.jpg" alt="cover of lookbook"> </a> </div> <ul> <li><a href="http://www.cnn.com"><img src="/img/gallery-img-1.jpg" alt="cover of lookbook"></a></li> <li><a href="http://www.cnn.com"><img src="/img/gallery-img-2.jpg" alt="some beautiful necklaces"></a></li> <li><a href="http://www.cnn.com"><img src="/img/gallery-img-3.jpg" alt="more beautiful necklaces"></a></li> </ul> <button class="arrow leftarrow"><</button> <button class="arrow rightarrow">></button> </section>
css:
.gallery { width: 100%; box-sizing: border-box; position: relative; } .gallery div, .gallery li:not(:first-child) { display: none; } .arrow { position: absolute; z-index: 9999; background-color: transparent; border: none; font-size: 2em; color: white; cursor: pointer; text-decoration: none; } .leftarrow { top: 40%; left: 5%; } .rightarrow { top: 40%; right: 5%; }
okay, fixed it. had add display: inline-block;
.gallery
, kept boundries of gallery stretching beyond width of images. help, everyone!
Comments
Post a Comment