Forum Moderators: not2easy
<tr><td bgcolor="#9AB1C1"><a href="index.htm"> Home</a></td
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title></title>
<meta name="created" content="Wed, 22 Sep 2010 03:02:05 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="PayneLess Designs">
<meta name="copyright" content="Jan 2004 to present.">
<style>
* { margin: 0; padding: 0; border: 0; }
.photos {
width: 400px;
margin: 0 auto;
overflow: hidden;
/* border: 0 solid #f0f0f0; */
/* padding: 10px; */
}
/* img { border: none;} */
.photos img.logo {
width: #*$!px;
height: YYYpx;
margin: 0 auto;
display: block;
}
.photos div img {
float: left;
/* padding: 10px 0; */
/* margin: 20px 0;
border-bottom: 1px solid #ddd; */
}
.photos ul.thumbs li {
float: left;
padding: 0 0 0 10px;
list-style: none;
width: 390px;
}
.photos ul.thumbs li {
float: left;
width: 60px;
height: 100px;
/* margin: 0 10px 0 0; */
margin: 2%;
overflow: hidden;
/* position: relative; */
border: 5px solid #ddd;
text-align: center;
}
.photos ul.thumbs li:hover {
border: 5px solid #888;
-moz-opacity:.75;
filter:alpha(opacity=75);
opacity:.75;
}
.photos ul.thumbs li img {
position: absolute;
top: -180px;
left: -145px;
}
table#main {
width: 800px;
margin: 0 auto;
border-collapse: collapse;
text-align: center;
background: #9ab1c1;
}
caption {
font-size: 2em;
background: #9ab1c1 url(images/test.jpg) no-repeat center scroll;
}
thead {
font-size: 1.25em;
background: #9ab1c1;
}
caption, thead {
font-family: garamond, verdana; 'times new roman', sans-serif;
color: #fff;
}
tfoot {
height: 2em;
background: #9ab1c1;
}
/* tbody td { height: 300px; overflow: auto; padding: 15px; border: 1px solid #ff0; } */
tbody {
width: 100%;
text-align: justify;
}
td#one {
height: 300px;
}
table#two {
width: 100%;
height: 296px;
/* border="0" bordercolor="yellow" */
/* margin: 7px; */
background: #c3e1ec;
}
table#two td {
width: 300px;
vertical-align: top;
text-align: center;
}
table#two td#text {
width: 500px;
text-align: justify;
}
table#two td#nav {
width: 150px;
height: 50px;
vertical-align: top;
text-align: center;
}
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" type="text/css" href="site_css/css_2010_iestyle.css">
<script type="text/javascript" src="site_js/js_blink4IE.js"></script>
<![endif]-->
</head>
<body>
<table id="main">
<caption>Test <a href="index.htm" title="Home">Home</a></caption>
<thead>
<tr>
<th>HEADER</th>
</tr>
</thead>
<tfoot>
<tr>
<td><h3>FOOTER</h3></td>
</tr>
</tfoot>
<tbody>
<tr>
<td id="one">
<table id="two">
<tr>
<td rowspan="3">
<div class="photos">
<div id="photo_1"><img src="images/jumper1_1.jpg" alt=""></div>
<div id="photo_2" style="display:none;"><img src="images/jumper1_2.jpg" alt=""></div>
<div id="photo_3" style="display:none;"><img src="images/jumper1_3.jpg" alt=""></div>
<ul class="thumbs">
<li><a href="javascript:void(0)" onclick="switch_product_img('photo_1', 3);"><img src="images/jumper1_1.jpg" alt=""></a></li>
<li><a href="javascript:void(0)" onclick="switch_product_img('photo_2', 3);"><img src="images/jumper1_2.jpg" alt=""></a></li>
<li><a href="javascript:void(0)" onclick="switch_product_img('photo_3', 3);"><img src="images/jumper1_3.jpg" alt=""></a></li>
<li><a href="javascript:void(0)" onclick="switch_product_img('photo_3', 3);"><img src="images/jumper1_3.jpg" alt=""></a></li>
</ul>
</div>
<script type="text/javascript">
function switch_product_img(divName, totalImgs) {
for (var i=1; i<=totalImgs; i++) {
var showDivName = 'photo_' + i;
var showObj = document.getElementById(showDivName);
if (showDivName == divName)
showObj.style.display = 'block';
else
showObj.style.display = 'none';
}
}
</script>
<p><a href="http://www.sohtanaka.com/web-design/css-multiple-image-viewer-thumbnails/" title="Multiple Image Viewer by Soh Tanaka">Multiple Image Viewer</a><br>by Soh Tanaka</p>
</td>
<td id="text"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</td>
<td id="nav"><h2>NAVIGATION</h2></td>
</tr>
</table>
<td>
</tr>
</tbody>
</table>
</body></html>
Major_Payne - Not that it matters but I am a she.Determining gender by UserNames is hard. Your Profile didn't specify, but as said, it really doesn't matter.
(all I want to achieve is the image viewer far left, the page text centered and the navigation on the right!)I justified the text, but it may not be as centered on the page as you want as I didn't have the images to put in place and compensate for them if need be. Viewer is left; Navigation is right. May not be exact, but you can change as needed since I kept the (ugh :P) tables.
As stated, tables are no longer used for page layouts. They went out in the late 1990s with the use of CSS. The web standards are changing again and you need to quit being 10 years plus behind the times like Micro$oft and IE. Tables are still used to present tabular data which was their intended use.I'll be honest, there are plenty of projects where I've used tables for layout still. Even with IE7/8/9 there are still a lot of things which do not display correctly Vs. other correct browsers and tables can bridge the gap between older browsers and new ones. And yes I am lazy.
