I have placed a jQuery Based Featured Content Slider on my homepage of my site, but I got a tad lost with placement and stuff. Could anyone tell me how to get it to hover in the middle, how to get the text in the right place, and how to get my images to move back up please. I know it's in the CSS, I'm just not sure what part to edit.
My code for my home.tpl is
Code: Select all
<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>
<script type="text/javascript">$(document).ready(function(){$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);});</script>
<style type="text/css">
#featured { background:#ffffff; height:148px; padding-right:148px; position:relative; width:442px; }
#featured ul.ui-tabs-nav { left:335px; list-style:none; margin:0px; padding:0px; position:absolute; top:0px; width:255px; }
#featured ul.ui-tabs-nav li { border-bottom:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px solid #cccccc; color:#666666; font-size:4px; }
#featured ul.ui-tabs-nav li span { font-size:14px; font-weight:bold; padding:2px; }
#featured ul.ui-tabs-nav li small { font-size:11px; padding:3px; }
#featured .ui-tabs-panel { background:#ffffff; border:1px solid #cccccc; height:146px; overflow:hidden; position:relative; width:335px; }
#featured .ui-tabs-hide { display:none; }
#featured li.ui-tabs-nav-item a { background:#ffffff; color:#000000; display:block; height:36px; line-height:30px; outline:none; text-decoration:none; }
#featured li.ui-tabs-nav-item a:hover { background:#f5f5f5; text-decoration:none; }
#featured li.ui-tabs-selected { color:#ffffff; text-decoration:none; }
#featured ul.ui-tabs-nav li.ui-tabs-selected a{ background:transparent url('catalog/view/theme/Linkup/image/selected-item.gif') no-repeat; color:#ffffff; text-decoration:none; }
#featured ul.ui-tabs-nav li img { background:#fff; border:1px solid #eee; float:left; margin:2px 5px; padding:2px; }
#featured .ui-tabs-panel .info { background:url('http://www.12voltsupplyhouse.com/catalog/view/theme/12volt/image/transparent-bg.png'); left:0px; height:70px; position:absolute; top:180px; width:400px; }
#featured .info h2 { color:#fff; font-family:Georgia, serif; font-size:18px; margin:0px; overflow:hidden; padding:5px; }
#featured .info p { color:#f0f0f0; font-family:Verdana; font-size:11px; line-height:15px; margin:0px 5px; }
#featured .info a { color:#fff; text-decoration:none; }
#featured .info a:hover { text-decoration:underline; }
</style>
<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1" style="border-top:1px solid #cccccc;">
<a href="#fragment-1">
<span>Search Page Error</span><br />
<small>Our search page is now back up and running!</small>
</a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-2">
<a href="#fragment-2">
<span>Heading 2</span><br />
<small>Sub Heading 2</small>
</a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-3">
<a href="#fragment-3">
<span>Heading 3</span><br />
<small>Sub Heading 3</small>
</a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-4">
<a href="#fragment-4">
<span>Heading 4</span><br />
<small>Sub Heading 4</small>
</a>
</li>
</ul>
<div id="fragment-1" class="ui-tabs-panel"><a href="#"><img src="image/featured/searchthis.jpg" alt="" /></a></div>
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"><a href="#"><img src="image/featured/topicimage.jpg" alt="" /></a></div>
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"><a href="#"><img src="image/featured/topicimage.jpg" alt="" /></a></div>
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide"><a href="#"><img src="image/featured/topicimage.jpg" alt="" /></a></div>
</div>
<div id="content">
<div class="top">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1><?php echo $heading_title; ?></h1>
</div>
</div>
<div class="middle">
<div><?php echo $welcome; ?></div>
<!-- Modules inserted by Fido-X (http://www.fido-x.net) -->
<?php if ($modules) { ?>
<?php foreach ($modules as $module) { ?>
<?php echo ${$module['code']}; ?>
<?php } ?>
<?php } ?>
<!-- End Modules -->
</div>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</div>
<script type="text/javascript"><!--
$.tabs('.tabs a');
$.tabs('.usertabs a');
//--></script>
<?php echo $footer; ?>
And also, does anyone know how to stop the page from jumping up when it shows a new slide?
Site link:
http://www.linkuppaints.co.nz/eshop/ind ... ommon/home
Thanks heaps
dpDesignz