как в объявлении разместить таблицу, чтобы она делилась на 2 части и одна из частей была слайдами?
пробовала так:
Код:
<center><table> <td colspan="2"> <tr> <td width="400" height="100"> 1 </td> <td colspan="1"></td> <td width="400" height="100"> <center> <style> .nav {margin: 2px;} .nav a {display: block; background-color : #ddb570; color : #2f1a0e; text-align: center; width:170px; padding: 4px; text-decoration: none; margin: 1px;} .nav a:hover {background-color: #2f1a0e; color:#ddb570;} #slideshow { margin-left: -5px; width:380px; height: 280px; position:relative; line-height: 10px; } #slideshow #slidesContainer { margin:0 auto; width:380px; height: 300px; overflow:auto; /* allow scrollbar */ position:relative; } #slideshow #slidesContainer .slide { margin:0 auto; width:380px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */ height:300px; } /** * Slideshow controls style rules. */ .control { display:block; width: 46px; height: 44px; text-indent:-10000px; position:absolute; cursor: pointer; } #leftControl { top: 45px; left: -30px; background:transparent url(http://uploads.ru/i/x/B/l/xBlRP.png) no-repeat 0 0; } #rightControl { top: 45px; right: -40px; background:transparent url(http://uploads.ru/i/Z/c/0/Zc0jt.png) no-repeat 0 0; } /*Style rules for Demo page */ * { margin:0; padding:0; } .slide h2, .slide p { margin:15px; } .slide h2 { letter-spacing:-1px; } .slide img { float:center; margin:0 1px; } </style> <script type="text/javascript"> $(document).ready(function(){ var currentPosition = 0; var slideWidth = 380; var slides = $('.slide'); var numberOfSlides = slides.length; // Remove scrollbar in JS $('#slidesContainer').css('overflow', 'hidden'); // Wrap all .slides with #slideInner div slides .wrapAll('<div id="slideInner"></div>') // Float left to display horizontally, readjust .slides width .css({ 'float' : 'right', 'width' : slideWidth }); // Set #slideInner width equal to total width of all slides $('#slideInner').css('width', slideWidth * numberOfSlides); // Insert controls in the DOM $('#slideshow') .prepend('<span class="control" id="leftControl">Clicking moves left</span>') .append('<span class="control" id="rightControl">Clicking moves right</span>'); // Hide left arrow control on first load manageControls(currentPosition); // Create event listeners for .controls clicks $('.control') .bind('click', function(){ // Determine new position currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1; // Hide / show controls manageControls(currentPosition); // Move slideInner using margin-left $('#slideInner').animate({ 'marginLeft' : slideWidth*(-currentPosition) }); }); // manageControls: Hides and Shows controls depending on currentPosition function manageControls(position){ // Hide left arrow if position is first slide if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() } // Hide right arrow if position is last slide if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() } } }); </script> <div style="width: 700px; height:300px; border: none; font-family: arial; font-size: 12px; line-height: 2px; margin: 1px; position: inherit; margin-left: 60px; top: 40px; "> <div id="pageContainer"> <!-- Slideshow HTML --> <div id="slideshow"> <div id="slidesContainer"> <div class="slide"> <p> <center> <table width="100%" border="0" cellspacing="2" cellpadding="2"> <center> 3333 </table> </table> <br> </div> <div class="slide"> <p> <br><br> <table width="100%" border="0" cellspacing="2" cellpadding="2"> <tr> <td colspan=2> <center> 22222222222222222 </table> </center> </p> </div> <div class="slide"> <table width="91%" height="200" style="text-align: center;" border="0"> <center> 111111111111111111111111111 </center> </table> <p> </div> </div> </div> <!-- Slideshow HTML --> </div> </div> </center> </td> </tr></tbody></table></center>
но получается какая-то хрень
форум