CODEWITHSUNDEEP
htmlcss
TCM
TCM

Reputation: 16900

a simple css issue about overflow:hidden

This is my css content :-

   <style type = "text/css">
       li
    {
        display:inline;
    }
    .carousel
    {
        position:absolute; 
        white-space:nowrap;

    }
    .sliderGallery
    {
        width:800px;
        overflow:hidden;
        height:100px;

    }
 </style>

This is my html content :-

 <div id="sliderGallery" class = "sliderGallery">

        <ul id = "carousel" class="carousel">
            <li>
                <img src ="Images/1.jpg" />
            </li>

            <li>
                        <img src ="Images/2.jpg" />


            </li>

            <li>
                    <img src ="Images/3.jpg" />

            </li>

            <li>
                        <img src ="Images/4.jpg" />

            </li>

            <li>
                        <img src ="Images/5.jpg" />

            </li>

            <li>
                                <img src ="Images/6.jpg" />

            </li>
        </ul>
      </div>

As you can see i have set overflow:hidden but still, my content is being displayed if it is more than 800px. Where am i wrong?

Thanks in advance :)

Upvotes: 0

Views: 171

Answers (3)

electrichead
electrichead

Reputation: 1170

Danixd above should be correct: setting position:relative on .sliderGallery (the div) will make the ul slide around inside it. Currently, it is sliding around relative to the outer container (or body if you don't have one). You can also try specifying an explicit width for the li.

Upvotes: 0

theorise
theorise

Reputation: 7425

What about adding a height to the div too?

Also try removing position:absolute; on the carousel.

Upvotes: 3

Jimmy
Jimmy

Reputation: 555

Try changing .sliderGallery to #sliderGallery in your CSS

Upvotes: 2

Related Questions