Question : Jquery Cycle Plugin Relative Div

Hello,

I am using jQuery Cycle Plugin to create a slideshow. I am adding it to a custom CMS.
The problem is that it makes the 'slideshow' div a relative and this causes
some of the buttons of the CMS to be on top of the images.

Expected Result:
The slide show to take its width and to push the "Add to Content" link down [see attached image].

Here are the snippets

<script type="text/javascript">
// src: http://jquery.malsup.com/cycle/options.html
jQuery(document).ready(function() {
jQuery('.slideshow').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
timeout: 1000, // milliseconds between slide transitions (0 to disable auto advance)
random: 1, // true for random, false for sequence (not applicable to shuffle fx)
pause: 1, // true to enable "pause on hover"
containerResize: false,
fit: 1, // force slides to fit container
delay: 0,
speed: 2000
});
});

<div class="slideshow">

</div>

<div class="content-area">
      <h1>Image Gallery</h1>
      
      <div id="ws_article_wrapper_141">
            <a name="n141"></a>
            <div class="article" id="n141">
                  <div class="ws_article_nav">
                        <ul>
                              <li class="publish">
                              <a href="javascript:ws_manage_content_publish('images', '141', 'column_1', 'n');" class="helper published_article ws_processed_item"><span>Currently Published (visible to everyone). Click to Unpublish.</span></a>
                              </li>
                              <li class="moveup">
                              <a href="/admin/order/move/up/page/images/content/141/area/column_1" class="helper ws_processed_item"><img alt="" src="/modules/admin/images/icons/arrow_up.png"></a>
                              </li>
                              <li class="movedown">
                              <a href="/admin/order/move/down/page/images/content/141/area/column_1" class="helper ws_processed_item"><img alt="" src="/modules/admin/images/icons/arrow_down.png"></a>
                              </li>
                              <li class="moveto">
                              <a onclick="ws_manage_content_move_article_form('images', '141', 'column_1'); return false;" href="javascript:void(0);" class="helper ws_processed_item"><img alt="" src="/modules/admin/images/icons/copy.png"></a>
                              </li>
                              <li class="edit_button">
                              <a href="javascript:ws_manage_content_edit('images', '141', 'column_1');" class="helper ws_processed_item"><img alt="" src="/modules/admin/images/icons/pencil.png"></a>
                              </li>
                              <li class="delete_button">
                              <a onclick="ws_manage_content_delete('images', 141); return false;" href="javascript:void(0);" class="helper ws_processed_item">
                              <img alt="" src="/modules/admin/images/icons/bin_closed.png"></a>
                              </li>
                        </ul>
                  </div>
                  <p>
                         
                  </p>
                  <div class="slideshow">
                        <p style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 166px;">
                              <img width="450" height="205" border="0" style="border: 0pt none;" src="/image/file/id/108/width/450">
                        </p>
                        <p style="position: absolute; top: 0px; left: 0px; display: block; z-index: 6; opacity: 1; width: 166px;">
                              <img width="450" height="193" border="0" style="border: 0pt none;" src="/image/file/id/110/width/450">
                        </p>
                        <p style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 166px;">
                              <img width="450" height="292" border="0" style="border: 0pt none;" src="/image/file/id/111/width/450">
                        </p>
                  </div>
            </div>
      </div>
      <div class="article2">
            <div class="ws_article_nav2">
                  <ul>
                        <li><a title="Add Content to column_1" href="/admin/add/page/images/area/column_1"><img alt="" src="/modules/admin/images/icons/add_16.png"> Add Content</a></li>
                        <li><a title="Add gallery widget to column_1" href="/admin/add/page/images/area/column_1/widget/gallery"><img alt="" src="/modules/admin/images/icons/photos.png"> Add gallery widget</a></li>
                  </ul>
            </div>
      </div>
      
      <div class="wrapper_home">
      </div>
</div>

#content-inner-pane div.content-area {
      -moz-background-clip:border;
      -moz-background-origin:padding;
      -moz-background-size:auto auto;
      background-attachment:scroll;
      background-color:transparent;
      background-image:url("../images/columnbg.png");
      background-position:0 0;
      background-repeat:repeat-x;
      float:left;
      margin-bottom:0;
      margin-left:0;
      margin-right:0;
      margin-top:33px;
      padding-bottom:2%;
      padding-left:2%;
      padding-right:2%;
      padding-top:2%;
      width: 96%;
}

Attachments:

jquery-cycle.jpg (47 KB) (File Type Details)

Add to content is on top of the image

Answer : Jquery Cycle Plugin Relative Div

svetoslavm:
I've had a look on the page, I have focused only on the section you mentioned but the page structure is still messy and if it was me I would start it all again from scratch, it could take you a much longer time to repair than to start a clean layout.

I've noticed in the page source that there are 9+ css files, it also returns 300+ errors when validated against W3 validator you can view the validation results here.

Before you start using jQuery you should have a clean validated document and css, I'm aware that CMS solutions such as Modo CMS etc.. makes it very difficult to obtain a valid document but one should note that jQuery requires a valid document to function properly and it also minimizes cross-browser compatibility issues.

However, I don't think the validation is the problem here, but it's the way the Page is constructed and CSS, there seems to be a lot of positioning (relative, absolute, static) even without the slideshow script and the more absolute position the more problems you're going to face.

For the slideshow you will need to give the slideshow container's class a width and height that would fit the images inside, since they're absolute positioned due to layering.

Modifying you .slideshow class as below will fix it for you but I still believe that further work would be required.

I hope I have helped in any way

Best of luck

                       
             .slideshow {
display:block;
height:292px;
margin-bottom:20px;
margin-top:20px;
position:relative;
width:450px;
}