<body>
<ui:define name="content">
<div id="left">
<table border="0" cellpadding="0" cellspacing="0" width="686">
<tbody>
<tr>
<td class="homepageTd_1" valign="top" width="380">
<div class="left_articles">
<div class="right_articles_hd">Special news</div>
<div class="listBody" style="height: 353px;">
<ul id="slideshow">
<li>
<h3>TinySlideshow v1</h3>
<span>photos/orange-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/orange-fish-thumb.jpg" alt="Orange Fish" /></a>
</li>
<li>
<h3>Sea Turtle</h3>
<span>photos/sea-turtle.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<img src="thumbnails/sea-turtle-thumb.jpg" alt="Sea Turtle" />
</li>
<li>
<h3>Red Coral</h3>
<span>photos/red-coral.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/red-coral-thumb.jpg" alt="Red Coral" /></a>
</li>
<li>
<h3>Coral Reef</h3>
<span>photos/coral-reef.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/coral-reef-thumb.jpg" alt="Coral Reef" /></a>
</li>
<li>
<h3>Blue Fish</h3>
<span>photos/blue-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<img src="thumbnails/blue-fish-thumb.jpg" alt="Blue Fish" />
</li>
<li>
<h3>TinySlideshow v.2</h3>
<span>photos/yellow-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/yellow-fish-thumb.jpg" alt="Yellow Fish" /></a>
</li>
<li>
<h3>Squid</h3>
<span>photos/squid.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/squid-thumb.jpg" alt="Squid" /></a>
</li>
<li>
<h3>Small Fish</h3>
<span>photos/small-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/small-fish-thumb.jpg" alt="Small Fish" /></a>
</li>
</ul>
<div id="wrapper">
<div id="fullsize">
<div id="imgprev" class="imgnav" title="Previous Image"></div>
<div id="imglink"></div>
<div id="imgnext" class="imgnav" title="Next Image"></div>
<div id="image"></div>
<div id="information">
<h3></h3>
<p></p>
</div>
</div>
<div id="thumbnails">
<div id="slideleft" title="Slide Left"></div>
<div id="slidearea">
<div id="slider"></div>
</div>
<div id="slideright" title="Slide Right"></div>
</div>
</div>
<script type="text/javascript" src="javascript/compressed.js"></script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>
</div>
</div>
</td>
<td class="homepageTd_2" valign="top" width="250">
<div class="left_articles">
<div class="right_articles_hd">The Latest news</div>
<div class="listBody" style="height: 353px;">
</div>
</div>
</td>
</tr></tbody></table>my slide content can't be right design in
Special news
.....The fault that is outbalance in
Special news
tag...
slide.css
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:356px; margin:2px; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:350px; height:250px; padding:1px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:350px; height:0; background:#000; color:#fff; overflow:hidden; z-index:150; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 3px 3px; font-size:14px}
#information p {padding:0 3px 3px}
#image {width:350px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(../img/left.gif) left top no-repeat}
#imgnext {right:0; background:url(../img/right.gif) right top no-repeat}
#imglink {position:absolute; height:190px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
#thumbnails {margin-top:5px}
#slideleft {float:left; width:15px; height:57px; background:url(../img/scroll-left.gif) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:15px; height:57px; background:#222 url(../img/scroll-right.gif) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:320px; margin-left:3px; height:57px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px} what solution ?
