PDA

View Full Version : Cant center Translucent slideshow Script



bradford789
07-03-2011, 10:17 AM
1) Script Title: Translucent slideshow Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/translucentslide.htm

3) Describe problem: i can not get this script to center on my web site The code is marked in red

here is a copy of my site code and here is the link to the site so you can see my problem http://renegadetransportation.us All the CSS info i could not post on here so go to the site to see the full source code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Renegade Transportation Inc</title>
</style>
</head>

<body class="thrColHybHdr">
<div class="mainbulk" id="container">
<div id="header">
<div class="mainbulk">
<div class="ads">
<h2>&nbsp;</h2>
<h2><img src="httpdocs/images/RenegadeMaster4.gif" alt="" width="246" height="60" border="0" title="" /><br />
Transportation Inc<br />
DOT 1457614 MC 550730<br />
<span class="division">A Division of Freeman Investment Services, Inc</span></h2>
</div>
<div class="textcontent">
<h1 align="center">&nbsp;</h1>
<h1 align="center"><strong>MUCH MORE THAN &quot;JUST&quot; A LOAD BOARD</strong></h1>
<strong><br />
Our goal is to eliminate your deadhead miles &amp; layovers by providing loads to keep your equipment loaded &amp; moving.</strong>
<h2 align="center">The Leading Provider Of Global Transportation!</h2>
<p align="center"><img src="/httpdocs/images/construction/index_clip_image0052.jpg" width="307" height="21" longdesc="http://www.renegadetransportation.us/images/construction/index_clip_image0052.jpg" /></p>
</div>
<div class="runner">
<p><img src="/httpdocs/images/construction/index_clip_image003.gif" width="160" height="80" longdesc="http://www.renegadetransportation.us/images/construction/index_clip_image003.gif" /></p>
<p><img src="images/globe2.gif" width="90" height="90" longdesc="http://renegadetranpsortation.us/images/globe2.gif" /></p>
</div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="907" height="73">
<param name="movie" value="../banner2.swf" />
<param name="quality" value="best" />
<param name="menu" value="true" />
<param name="allowScriptAccess" value="sameDomain" />
<embed src="../banner2.swf" quality="best" menu="true" width="907" height="73" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="sameDomain" />
</object>
</div>
</div>
<!-- end #header -->
<div id="sidebar1">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="237" height="693">
<param name="movie" value="../indexmenu.swf" />
<param name="quality" value="best" />
<param name="menu" value="true" />
<param name="allowScriptAccess" value="sameDomain" />
<embed src="../indexmenu.swf" quality="best" menu="true" width="237" height="693" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="sameDomain" />
</object>
<br />
<h3>&nbsp;</h3>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
<!-- end #sidebar1 -->
</p>
<p>&nbsp;</p>
</div>
<div id="mainContent">
<table width="950" border="0" bordercolor="red" cellpadding="0" cellspacing="0" height="1011">
<tbody>
<tr>
<td valign="top" align="left" height="572">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script src="translucentslideshow.js" type="text/javascript">

/***********************************************
* Translucent slideshow- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>
<style type="text/css">

#myslideshow{ /*sample CSS for demo*/
border:;
}
</style>
<div style="width: 750px; height: 220px; margin: 0 auto;">
<script type="text/javascript">

var translideshow1=new translideshow({
wrapperid: "myslideshow", //ID of blank DIV on page to house Slideshow
dimensions: [750, 220], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["/images/Proud_To_be_An_American1.jpg"], //["image_path", "optional_link", "optional_target"]
["/images/RenegadePortal32.jpg"],
["/images/auto1.jpg"],
["/images/boat1.jpg"],
["/images/HHmachine.jpg"],
["/images/intermodal.jpg"],
["/images/LTL.jpg"],
["/images/FTL.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3000, cycles:0, pauseonmouseover:true},
orientation: "v", //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 400 //transition duration (milliseconds)
})

</script>
</div>
<div id="myslideshow"></div>
<h4 align="center">Renegade Transportation best viewed in Firefox and Internet Explore 7+</h4>
<h4 align="center"><em><em><img alt="" title="" src="http://www.renegadetransportation.us/images/realtimefreightservice.gif" width="348" height="33" /></em></em></h4>
<p align="center"><img src="http://www.renegadetransportation.us/images/banner-shortterm.gif" alt="" width="312" height="133" /></p>
<p align="center"><em><em><img alt="" title="" src="http://www.renegadetransportation.us/images/OldTimeCompany_001.gif" width="500" height="44" /></em></em></p>
<div align="center"></div>
<p><strong>**** Renegade Transportation Inc Global Logistics operates as a sales agent for a wide array of carriers and third party logistics providers in addition to the furnishing supply chain solutions. Renegade Transportation Inc Global Logistics is non-exclusive to a particular carrier and offers additional pricing leverage. Prospective lanes and volumes are applied to the wide array of service providers. Unlike a broker, Renegade Transportation Inc Global Logistics utilizes its broad base of 3PLs and asset–based carriers to administer the most optimal and competitive of pricing. Carrier partners are fully insured; safety rated and operate in union and non-union environments.</strong></p></td>
</tr>
<tr>
<td colspan="1" valign="top" align="left" background="../img/pagebg.jpg" height="438"><p><strong>Customers Drive Our Business:</strong>*Our team has more than 30 years of trucking knowledge in LTL, refrigerated, flatbed and power only trucking. Our team will ensure you are getting the best service by providing daily tracking reports and equipment updates. Our customer service team is ready to handle all your transportation needs.</p>
<p><strong><strong><strong>We Provide Personal Service:</strong>*Every one of our customer service associates plays an important role in the transportation of your goods and services. Our dispatchers are trained to treat each encounter with a customer as a &quot;moment of truth,&quot; knowing the outcome will have an impact on the relationship.</strong></strong></p>
<p><strong><strong><strong>We Work as a Team:</strong> Our goal is to be the trucking company that provides the best service to our clients while creating an environment that allows our associates to achieve their full potential.</strong></strong></p>
<div>
<p><strong>We Believe in Continuous Improvement: We strive to improve on today's successes so we can do even better tomorrow through benchmarking and sharing best practices. We continually set, achieve then reset higher performance and quality standards.</strong></p>
</div>
</p>
<strong>Our growth: Over the last 30 years has been predicated on listening to our customers needs, learning their business, collaborating and strategizing and ultimately delivering solutions that address their unique circumstance. We tailor our solutions to meet our customer's specific needs rather than making their needs fit us. Our business is getting to know our customers so we can offer customized solutions that evolve around them.</strong></td>
</tr>
</tbody>
</table>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"><img alt="" src="http://www.renegadetransportation.us/images/btn_logos_000.gif" width="920" height="97" /></p>
<p align="center" style="margin-bottom: 0;">&nbsp;</p>
</div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
<div id="footer">
<div align="center">
<p align="center"> Copyright 2011 Freeman Investment Services, Inc, All rights reserved.<br />
<a href="mailto:admin@renegadetransportation.us"><strong>admin@renegadetransportation.us</strong></a> 785-250-6777<br />
Site maintained by Freeman Investment Services, Inc</p>
</div>
<!-- end #footer -->
</div>
<!-- end #container -->
</div>
</body>
</html>

Beverleyh
07-03-2011, 10:57 AM
The first thing you should do is install the script properly following the instructions on the demo page on DD - you shouldnt have the javascript, DD copyright or CSS in the body of your web page - that should all be in the head.

Next remove this line: <div style="width: 750px; height: 220px; margin: 0 auto;"> plus associated closing div tag.

The div you need to concentrate on is this one (the div that holds the slideshow): <div id="myslideshow"></div>
You should be able to enclose it in another set of div tags set to 100% width with content aligned centrally, like this:

<div style="width:100%; text-align:center; margin:auto;">
<div id="myslideshow"></div>
</div>

bradford789
07-03-2011, 11:10 AM
Thank You its been a long night i should of realized my mistake on the placing of the code

The final out put for the code had to be


<div style="width: 750px; height: 220px; margin:auto;">
<div id="myslideshow"></div>
</div>