Clever Geek Handbook

Wrapping images in a div

I am using the following CSS to display images side by side:

#gallery {
    background-color: #444;
    padding: 10px;
    width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
    border: 5px solid #3e3e3e;
    border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
    border: 5px solid #fff;
    border-width: 5px 5px 20px;
    color: #fff;
}
#gallery ul a:hover { color: #fff; }

html code for above css:

<div id="gallery">
    <ul>
        <li>
            <a href="photos/image1.jpg" title="">
                <img src="photos/thumb_image1.jpg"/>
            </a>
        </li>
        <li>
            <a href="photos/image2.jpg" title="">
                <img src="photos/thumb_image2.jpg">
            </a>
        </li>
</div>

Everything works fine, but there may be cases where I will display 20 to 30 images, which makes the page very long. Is there a way to add all of this to something so that the whole page doesn't get big and a scrollbar is added around the container containing all the images?

+2


source to share


2 answers


not sure why you don't want your page to become "long", but you can give the div a specific height and set its overflow to automatic so that the div scrolls while the page remains "short".



+2


source


  • Do not do this. Just let the page be long and make sure you put interesting stuff at the top. My browser has a scrollbar and I prefer to use it.

  • If you need to ... that's okay.



+1


source






More articles:


All Articles