CODEWITHSUNDEEP
htmlcss
Drake
Drake

Reputation: 2451

wrap images in a div

I'm 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 is:

<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>

All works fine, but there might be cases when I will be displaying 20 to 30 images which makes the page very long. Is there a way to add all this in side something so that the whole page doesnt become big and a scroll bar is added around the container that contains all the images?

Upvotes: 2

Views: 2320

Answers (2)

Samuel Danielson
Samuel Danielson

Reputation: 5471

  1. Don't do it. Just let the page be long and make sure you put the interesting stuff at the top. My browser has a scrollbar and I prefer to use it.

  2. If you must... this is acceptable.

Upvotes: 1

Yevgeny Simkin
Yevgeny Simkin

Reputation: 28349

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 auto, so that the div scrolls while the page remains "short".

Upvotes: 2

Related Questions