Question

I have an infinite Carousel function applied to a series of images here: http://nokkam.com/showcase.html
I have had a request to make the captions appear “out of the way of the images”… ugh. Being as the textholder div that is created by the script is based on the height of the images, my method of attempting to alter its positioning has failed (Im assuming its failing based on the height math, not sure). I located the the textholder in firebug and attemped to give it a “bottom:-80px” value to no avail. It just seems to disappear behind some other element. It appears to still be there, just not visible. I then thought that I may be the “slidecontainer” element preventing it from being visible so I adjusted its height rather drastically to find it still is not visible. My question is: is it possible to somehow modify some aspect of the script or its variables to produce the textholder beneath the actual slideshow? Any help, as always, is greatly appreciated.

PERTINENT PARTS OF SCRIPT

   (function($){
    $.fn.extend({ 
        infiniteCarousel: function(options)
        {
            var defaults = 
            {
                transitionSpeed : 1000,
                displayTime : 6000,
                textholderHeight : .15,
                displayProgressBar : 1,
                displayThumbnails: 0,
                displayThumbnailNumbers: 0,
                displayThumbnailBackground: 0,
                thumbnailWidth: '20px',
                thumbnailHeight: '20px',
                thumbnailFontSize: '.65em'
            };

// Build textholder div thats as wide as the carousel and 20%-25% of the height
$(obj).append('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0;margin-bottom:'+-imgHeight*o.textholderHeight+'px;left:'+$(obj).css('paddingLeft')+'"></div>');
var correctTHWidth = parseInt($('#textholder'+randID).css('paddingTop'));
var correctTHHeight = parseInt($('#textholder'+randID).css('paddingRight'));
$('#textholder'+randID).width(imgWidth-(correctTHWidth*2)).height((imgHeight*o.textholderHeight)-(correctTHHeight * 2)).css({'backgroundColor':'#ccc','opacity':'0.9'});                showtext($('li:eq(1) p', obj).html());

HTML

<div id="slidecontainer">
<div id="carousel">
<ul>
  <li><img alt="midrar sports logo design, custom bag and banner" src="/assets/images/1.jpg" width="824" height="410" />
    <p>
    <span>CLIENT:</span> Midrar Sports Management LLC, Jordan <br/>
    <span>Category:</span> Brand Consultancy<br/>
    <span>Description:</span> Branding Strategy and Collateral Printed Materials</p>
  </li>
  <li><img alt="Nissan North America large format poster on white wall" src="/assets/images/2.jpg" width="824" height="410" />
    <p>
    <span>CLIENT:</span> Nissan North America <br/>
    <span>Category:</span> Design and Large Format Printing<br/>
    <span>Description:</span>  Nissan Poster Design and Large Format Printing</p>
    </li>
    <li><img alt="Natural Pick Tea packaging design cinnamon and green tea varieties" src="/assets/images/3.jpg" width="824" height="410" />
    <p>
    <span>CLIENT:</span> Natrual Pick Brand | Sri Lanka and USA <br/>
    <span>Category:</span> Brand Consultancy, Package Design<br/>
    <span>Description:</span> Naming, Design Strategy for the Development of Brand Identity and Packaging Design for 13 Varieties of Tea</p>
    </li>
    <li><img alt="" src="/assets/images/4.jpg" width="824" height="410" />
    <p>
    <span>CLIENT:</span> Plateau Systems<br/>
    <span>Category:</span> Conferences and Trade Shows<br/>
    <span>Description:</span> Conference at San Francisco | Designed entire look/feel/tone/collateral materials + Printing &amp; Execution of entire package including Large format posters, Name Tags, Backdrops and Conference Guide</p>
    </li>   
    </ul>
</div> <!-- END CAROUSEL -->

Answer 1

#carousel {
  padding-bottom: 62px;
}

That should do it… I think