how to solve slideshow css problem?


Tags: html,css

Problem :

My Css

#container{
    display:block;
}

#container ul{
    list-style:none;
    position:relative;
    margin:0px;
    padding:0px;
    display:block;
}

#container li{
    list-style:none;
    margin:0px;
    padding:0px;
    position:absolute;
    top:0;
    left:0;
}

#container img{
    margin:0px;
    padding:0px;
}

my HTML

<div id="container">
<ul>
<li><img src="1.jpg" alt="" /></li>
<li><img src="2.jpg" alt="" /></li>
<li><img src="3.jpg" alt="" /></li>
<li><img src="4.jpg" alt="" /></li>
</ul>
</div>

all the pictures rendered under each other which is what I want but the problem is that if I add any div after #container it will inserted behind it, I want to insert some divs after it but every time I add another div it goes behind it, how can i solve that?

Thanks



Solution :

You can fix this by setting the height and width on #container ul. That is what I've done when making a photo rotator, since the image sizes are usually known ahead of time.


    CSS Howto..

    how to make minified and readable css file in sublime text?

    How to darken the background image in CSS? [duplicate]

    jQuery hide() and show() not working as expected

    how to make the img at the left side and the texts at the right side vertically line up

    How to target an element under an other element?

    Preload all CSS images while showing a preloader

    How to create equal height columns in pure CSS [duplicate]

    How to apply rounded borders to highlight/selection

    How to add !important to every element in a CSS file [duplicate]

    how to apply css to a particular asp.net table?

    How best to store and download resource files on the page?

    How Can I Make An Odd Shaped Icon into a “Circle”?

    How to make content shareable from a static website

    How to make JS & CSS inline work for eBay template?

    How to change the background image of input button with jquery

    How to apply custom CSS and Javascript specific CMS page Magento

    how to show ng-repeat horizontal?

    How do I get placeholder text in firefox and other browsers that don't support the html5 tag option?

    how to create a vertical menu in html/css [closed]

    How to adjust CSS settings for jquery.simply-scroll plugin to occupy full screen

    How to create a image transition hover effect with css without breaking the grid layout

    How can I change using jekyll bootstrap navbar colour?

    How to Trigger css animation both on scrolling down and up

    How can I hide a div completely from HTML DOM?

    How to install CSS templates with Flask?

    How to maintain page backgroud image zoom fixed? CSS

    How to apply css to html so that it shows as the style property

    How to iqnore mousemove event on child ul

    How to do responsive text overflow with css?

    How to show text on image when hovering?