...

View Full Version : PLEASE! help me with layout



blueskycaravans
06-21-2010, 08:25 PM
i am making a website for my dad he wanted a image slideshow on the homepage of his website like the one on this websitehttp://opalitecaravans.com.au
here is the code for the home page

<!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>Home-Bluesky caravans</title>
<meta name="Keywords" content="these are your site keywords" />
<meta name="Description" content="This is a keyword rich description of your page. Keep it to 160 characters or less." />
<link href="css/jdstyles.css" rel="stylesheet" type="text/css" />
<link href="css/indentmenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"> <a href="index.html"><img src="images/new logo1.gif" alt="Logo" width="254" height="62" /></a>
<p><a href="email us.html">Email Us</a> | <a href="email us.html"></a></p>
</div>
<div id="navigation">
<ul class="jdmenu">
<li><a href="index.html"><b>Home</b></a></li>
<li><a href="layoutone.html"><b>Layout One</b></a></li>
<li><a href="layouttwo.html"><b>Layout Two</b></a></li>
<li><a href="layoutthree.html"><b>Layout Three</b></a></li>
<li><a href="layoutfour.html"><b>Layout Four</b></a></li>
</ul>
</div>
</div>
<iframe width="780" height="264" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="slideshow/index.html"></iframe>
<div id="mainContent">
<div class="contenttop"></div>
<div class="contentbox">
<table width="750" border="0" cellspacing="0" cellpadding="8">
<tr>
<td width="540" valign="top">
<h1> <img src="images/sample2.jpg" alt="An Apple" width="100" class="fltrt" />Main Content </h1>
<p>This is the main content section of the page. </p>
<h2>H2 level heading</h2>
<h3>Template includes two CSS menu styles!</h3>
<p>This is the indent-style menu. It is installed simply by linking the indentmenu.css file in the CSS directory</p>
<p align="center">.<img src="images/indentmenu.jpg" alt="Indent style menu" width="441" height="124" /></p>
<p>This is the tab-style CSS menu. It is installed by linking the tabmenu.css file in the CSS directory.</p>
<p align="center"><img src="images/tabmenu.jpg" alt="Tab style menu" width="441" height="124" /></p>
<h3>H3 level heading </h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. </p>
<blockquote>
<p>This is a blockquote. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis.</p>
</blockquote>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<h3>Google AdSense Ready</h3>
<p>CSS classes are already created for the perfect fit for a 468x60 and 728x90 AdSense ad. Simply insert your AdSense code and you're ready to go! This ad is enclosed in the &quot;google468&quot; class so it fits perfectly into your layout.</p>
</td>
<td width="200" valign="top">
<div id="sidebar">
<h2>Sidebar Content</h2>
<p>Lorem ipsum dolor sit amet, consectetuer <strong>adipiscing elit.</strong> Praesent aliquam, justo convallis luctus rutrum, erat nulla <strong>fermentum diam</strong>, at nonummy quam ante ac quam. </p>
<p><a href="#">A link to nowhere</a>. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy.</p>
<h3>An Unordered List</h3>
<ul>
<li>Long list item displaying two lines</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>
<p align="center"><img src="images/sample4.jpg" alt="" width="90" height="52" /></p>
<h2>Join our Newsletter</h2>
<form action="" method="get">
Your Name
<input name="input" type="text" style="width:165px;"/>
Email Address
<input type="text" name="textfield" id="textfield" style="width:165px;"/>
<br />
<input name="Button" type="button" value="Sign up" id="submit" />
</form>
<p align="left">
This template is XHTML 1.0 valid</p>
<p align="center"> <a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> </p>
</div>
</tr>
</table>
</div>
<div class="contentbtm"></div>
</div>
<blockquote>
<p>The following
boxes demonstrate the three different built-in box modules that can be positioned anywhere in the page. There is a two-column layout, a three-column layout and a four-column layout. Each is easily implemented simply by copying and pasting the code wherever you need the box to display.</p>
</blockquote>
<div id="twocol">
<div class="contentbox">
<table width="780" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="390" valign="top"><div class="contentboxp"><img src="images/sample3.jpg" alt="Bananas" width="90" class="fltrt" />
<h3>Product Heading</h3>
<p><strong>Product SubHeading</strong></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum.</p>
<div class="arrow"><a href="#">Read more</a></div>
</div></td>
<td width="390" valign="top"><div class="contentboxp">
<h3><img src="images/sample2.jpg" alt="Apples" width="70" class="fltrt" />Product Heading</h3>
<p><strong>Product SubHeading</strong></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum.</p>
<div class="arrow"><a href="#">Read more</a></div>
</div></td>
</tr>
</table>
<div class="contentbtm"></div>
</div>
</div>
<div id="threecol">
<div class="contentbox">
<table width="780" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><div class="contentboxp">
<h3><img src="images/sample4.jpg" alt="Oranges" width="90" height="52" class="fltrt" />Product Heading</h3>
<p><strong>Product SubHeading</strong></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum.</p>
<div class="arrow"><a href="#">Read more</a></div>
</div></td>
<td valign="top"><div class="contentboxp">
<h3><img src="images/sample7.jpg" alt="Fruit Basket" width="65" class="fltrt" />Product Heading</h3>
<p><strong>Product SubHeading</strong></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum.</p>
<div class="arrow"><a href="#">Read more</a></div>
</div></td>
<td valign="top"><div class="contentboxp">
<h3><img src="images/sample5.jpg" alt="Grapefruit" width="80" height="67" class="fltrt" />Product Heading</h3>
<p><strong>Product SubHeading</strong></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum.</p>
<div class="arrow"><a href="#">Read more</a></div>
</div></td>
</tr>
</table>
<div class="contentbtm"></div>
</div>
</div>
<div id="fourcol">
<div class="contentbox">
<table width="780" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><div class="contentboxp">
<h3>Product Heading </h3>
<p><strong>Product Subheading</strong></p>
<p><img src="images/sample4.jpg" alt="Oranges" width="75" class="fltrt" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum.</p>
<div class="arrow"> <a href="#">Read More</a> </div>
</div></td>
<td valign="top"><div class="contentboxp">
<h3>Product Heading</h3>
<p><strong>Product Subheading</strong></p>
<p><img src="images/sample3.jpg" alt="Bananas" width="60" class="fltrt" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum.</p>
<div class="arrow"> <a href="#">Read More</a> </div>
</div></td>
<td valign="top"><div class="contentboxp">
<h3>Product Heading</h3>
<p><strong>Product Subheading</strong></p>
<p><img src="images/sample2.jpg" alt="Apples" width="50" class="fltrt" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum.</p>
<div class="arrow"> <a href="#">Read More</a> </div>
</div></td>
<td valign="top"><div class="contentboxp">
<h3>Product Heading</h3>
<p><strong>Product Subheading</strong></p>
<p><img src="images/sample5.jpg" alt="Grapefruit" width="60" class="fltrt" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum.</p>
<div class="arrow"> <a href="#">Read More</a> </div>
</div></td>
</tr>
</table>
<div class="contentbtm"></div>
</div>
</div>
<blockquote>Below is another styled product display format that is included in the template. The layout is table-based, so to add more products, simple copy and paste the &lt;tr&gt; to &lt;/tr&gt; tags for as many products as you need. For database-driven products, simply attach a repeated region behavior to the table row and specify how many records to repeat per page.</blockquote>
<div class="productwide">
<table width="730" border="0" cellpadding="15" cellspacing="0">
<tr>
<td><img src="images/sample9.gif" alt="Fruit Basket" width="200" height="110" /></td>
<td><h3>Product Heading</h3>
<strong>Product Subheading</strong>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<div class="arrow"> <a href="#">Read More</a></div> </td>
</tr>
<tr>
<td><img src="images/sample10.gif" alt="Fruit Basket" width="200" height="154" /></td>
<td><h3>Product Heading</h3>
<strong>Product Subheading</strong>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<div class="arrow"> <a href="#">Read More</a></div> </td>
</tr>
</table>


</div>
<blockquote>AdSense 728x90 ad placement. Simply enclose the AdSense code in the &quot;google728&quot; class and it fits precisely into the page layout.</blockquote>
<div class="google728"><script type="text/javascript"><!--
google_ad_client = "pub-6682731491675426";
/* JD Fruit Co 728 */
google_ad_slot = "0440331654";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
<div id="footer">
<div id="footerwrap">
<div id="footertop"></div>
<div id="footercontent">
<table width="740" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="175" valign="top"><p><strong>Our Produce Specials</strong></p>
<ul>
<li><a href="#">Apples</a></li>
<li><a href="#">Oranges</a></li>
<li><a href="#">Grapefruit</a></li>
<li><a href="#">Pineapple</a></li>
<li><a href="#">Kiwi</a></li>
</ul></td>
<td width="175" valign="top"><p><strong>Links to Other Sites</strong></p>
<ul>
<li><a href="http://motorhomes.autotrader.co.nz/">Motorhomes and Caravans</a></li>
<li><a href="#">My Favorite Site 2</a></li>
<li><a href="#">My Favorite Site 3</a></li>
<li><a href="#">My Favorite Site 4</a></li>
<li><a href="#">My Favorite Site 5</a></li>
</ul></td>
<td width="175" valign="top"><p><strong>Our Quality Guarantee</strong></p>
<ul>
<li>100% Satisfaction Guaranteed</li>
<li>Full refund policy</li>
<li>Top-quaity fruit</li>
<li>Hand selected</li>
</ul></td>
<td width="175" valign="top"><p><strong>Customer Service</strong></p>
<ul>
<li><a href="#">Contact via Email</a></li>
<li><a href="#">Customer Service hours</a></li>
<li><a href="#">Return a shipment</a></li>
<li><a href="#">Spoiled Produce</a></li>
</ul></td>
</tr>
<tr>
<td colspan="4" valign="top">
<p class="copyright">Copyright 2008 Fruit Company, Inc. All Rights Reserved. &nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="#">Site Map</a></p>
<div id="about">
<p><a href="http://www.justdreamweaver.com">Free Dreamweaver Templates</a> by JustDreamweaver.com </p>
</div></td>
</tr>
</table>
</div>
<div id="footerbtm"></div>
</div>
</div>
</body>
</html>
the red code is the image slide show i have tried changing the height of the iframe but no luck!
please someone tell me what im doing wrong or at least show me some other code i could use.............please look at attachments!

optimus203
06-21-2010, 10:56 PM
Have you tried wrapping the iframe in a div, and giving the div your desired dimensions?

Your also missing a </td> on line 79.

Posting a link to live testing site will also help troubleshoot.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum