make a jquery slide show conform to wrapper size

hi,

 

i working on responsive layout. within overall page container, have wrapper house jquery slideshow.

 

#slideshowwrapper{

    position: relative;

    width: 100%;

    margin: auto;

    background-image: url(../woodgrain_pattern.png);

    background-repeat: repeat;

 

nested in id is:

 

ul#slideshow{

    list-style: none;

    width: 1100px;

    height: 480px;

    overflow: hidden;

    margin-right: auto;

    margin-bottom: auto;

    margin-left: auto;

}

 

source:

<div id="slideshowwrapper">

    <ul id="slideshow">

        <li><img src="jqueryslideshow/images/4.jpg" width="1100" height="480" border="0" alt="" /></li> <!-- last image in slideshow -->

        <li><img src="jqueryslideshow/images/3.jpg" width="1100" height="480" border="0" alt="" /></li>

        <li><img src="jqueryslideshow/images/2.jpg" width="1100" height="480" border="0" alt="" /></li>

        <li><img src="jqueryslideshow/images/1.jpg" width="1100" height="480" border="0" alt="" /></li> <!-- first image in slideshow -->

    </ul><br clear="all" />

</div>

 

of course, when max browser window, slideshow fits within overall container without spilling out on edge. when "restore down" or make browser window move , narrow, slideshow spills outside of container due fixed width & height i'd imagine. have tried 2 things.

 

1) adding 'position: relative'

2) trying width: 100% ul#slideshow did not seem work

 

how can achieve effect i'm aiming for? somehow combine 2 since they'll fall on same place?

 

thanks!

i have never made jquery slide show in div resizable ("elastic"). , think way of jquery slide widgets work start slide in upper left hand corner of div (which might tick off right-to-left readers , writers).

 

i think have not create list series of divs elastic pictures filling divs.

More discussions in Dreamweaver support forum

adobe