PDA

View Full Version : column span


cjs
11-18-2005, 09:03 PM
I am creating a page for someone, and am having trouble with spanning.
I have several main columns at the top of the page with logo and picture,
then below those columns are about 13 columns on the left for the navigation menu and 4 or 5 more below with the center one being used to for text links
and maybe small photos. Then to the right of those 18 columns is the main context column with all of the product information.

I want the columns with the logo and the navigation bar to remain fixed,
but have the small table below the navigation bar span, and the table to the
right to span independently. Below is the code. Thank you for any help.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" src="mm_functions.js"></script>
<script language="JavaScript1.2" src="mm_menu.js"></script>
<script language="JavaScript" src="repFunctions.js"></script>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->

<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(../images/right_2.gif);
}
body,td,th {
font-family: Tahoma;
font-size: small;
color: #000000;
}
.style2 {
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
color: #FFFFCC;
}
.style3 {
color: #FF0000;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
}
.style7 {
font-size: x-small;
font-weight: bold;
}
.style8 {color: #7B7979}
a {
font-family: Tahoma;
font-size: x-small;
color: #4377C1;
font-weight: bold;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #4377C1;
}
a:hover {
text-decoration: underline;
color: #EBAF01;
}
a:active {
text-decoration: none;
}
.style10 {font-size: 11px; }
-->
</style>

</head>

<body onLoad="MM_preloadImages('../images/contact_2.gif','
../images/map_2.gif','
../images/home_2.gif','
../images/menu_mlm_2.gif','
../images/menu_flook_2.gif','
../images/menu_products_2.gif','
../images/menu_about_2.gif','
../images/menu_home_2.gif','../images/menu_login_2.gif')">

<script language="JavaScript1.2">mmLoadMenus();</script>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="10"><img src="../images/t.gif" width="1" height="1"></td>
</tr>
</table>
<table width="760" height="0" border="0" align="center" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="583" height="4" align="center" valign="baseline"></td>
<td width="168" align="center" valign="bottom"><img src="../images/bar_o.gif" width="168" height="4"></td>
<td width="9" align="center" valign="baseline"></td>
</tr>
</table>
<table width="760" height="6" border="0" align="center" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td height="6"></td>
</tr>
</table>
<table width="760" height="5" border="0" align="center" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td height="4"><img src="../images/bar_wt.gif" width="760" height="5">
</td>
</tr>
</table>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="331" height="21" bgcolor="#FFFFFF"></td>
<td bgcolor="#FFFFFF"></td>
<td width="107" bgcolor="#FFFFFF"></td>
<td width="32" bgcolor="#FFFFFF"><a href="home.htm" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image7','','../images/home_2.gif',1)">
<img src="file:///D|/Dennis/BWA%20Website/template%20images/home_1.gif" name="Image7" width="32" height="21" border="0"></a></td>
<td width="18" bgcolor="#FFFFFF"></td>
<td width="44" bgcolor="#FFFFFF"><a href="map.htm" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image6','','../images/map_2.gif',1)">
<img src="../images/map_1.gif" name="Image6" width="44" height="21" border="0"></a></td>
<td width="13" bgcolor="#FFFFFF"></td>
<td width="38" bgcolor="#FFFFFF"><a href="contact.htm" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image5','','../images/contact_2.gif',1)">
<img src="../images/contact_1.gif" name="Image5" width="38" height="21" border="0"></a></td>
<td width="23" bgcolor="#FFFFFF"></td>
</tr>
</table>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td height="7" bgcolor="#FFFFFF"></td>
</tr>
</table>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="11" height="167" bgcolor="#FFFFFF"></td>
<td width="207" bgcolor="#FFFFFF">
<img src="../images/logo.gif" width="191" height="167"></td>
<td width="21" bgcolor="#FFFFFF"></td>
<td width="372" bgcolor="#FFFFFF">
<!-- TemplateBeginEditable name="Banner Image" -->
<img src="../images/home_img.gif" width="354" height="167"><!-- TemplateEndEditable --></td>
<td width="181" valign="top" bgcolor="#FFFFFF">
<!-- TemplateBeginEditable name="News" -->
<p class="style6"><span class="style3"><strong>Latest News!</strong></span><br>
<br>
<span class="style7">BWA is going on tour, and you don't want to miss this show...</span>
<span class="style8">
<a href="tour.asp">Click Here</a></span></p>
<p class="style9"><span class="style7"><strong>For all other news and announcments...</strong></span><a href="news.asp">Click Here</a>
</p>
<!-- TemplateEndEditable --></td>
</tr>
</table>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<!--DWLayoutTable-->
<tr>
<td height="7"></td>
</tr>
</table>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<!--DWLayoutTable-->
<tr>
<td width="553" height="9"></td>
</tr>
</table>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="29" rowspan="18"></td>
<td width="155" height="3" colspan="3" bgcolor="#FFFFFF"><img src="../images/g_spacer.gif" width="155" height="3"></td>
<td width="22" rowspan="18"></td>
<td width="1" rowspan="18" background="../images/line_spacer.gif">
<img src="file:///D|/Dennis/BWA%20Website/template%20images/line_spacer.gif" width="1" height="1"></td>
<td width="22" rowspan="18" bgcolor="#FFFFFF"></td>
<td width="550" rowspan="18" valign="top">
<!-- TemplateBeginEditable name="Page Content" -->
<p>Page content goes here!</p>
<!-- TemplateEndEditable --></td>
<td rowspan="18"></td>
</tr>
<tr>
<td width="126" height="1" colspan="3" bgcolor="#339933"><a href="home.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu_home','','../images/menu_home_2.gif',1)"><img src="../images/menu_home_1.gif" name="menu_home" width="155" height="22" border="0"></td>
</tr>
<tr>
<td width="155" colspan="3">
<img src="../images/dot_spacer.gif" width="155" height="1"></td>
</tr>
<tr>
<td width="126" height="1" colspan="3" bgcolor="#339933">
<a href="aboutbwa.asp" onMouseOut="MM_swapImgRestore();
MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1111121724 _0,155,0,null,'menu_about_1');
MM_swapImage('menu_about_1','','../images/menu_about_2.gif',1)"><img name="menu_about_1" src="../images/menu_about_1.gif" width="155" height="22" border="0"></a></td>
</tr>
<tr>
<td width="155" colspan="3">
<img src="../images/dot_spacer.gif" width="155" height="1"></td>
</tr>
<tr>
<td width="126" height="1" colspan="3" bgcolor="#339933">
<a href="products.asp" onMouseOut="MM_swapImgRestore();
MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1110170018 _0,155,0,null,'menu_products_1');
MM_swapImage('menu_products_1','','../images/menu_products_2.gif',1);"><img name="menu_products_1" src="../images/menu_products_1.gif" width="155" height="22" border="0"></a></td>
</tr>
<tr>
<td width="155" colspan="3"><img src="../images/dot_spacer.gif" width="155" height="1"></td>
</tr>
<tr>
<td width="126" height="1" colspan="3" bgcolor="#339933">
<a href="flook.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu_flook','','../images/menu_flook_2.gif',1)"><img src="../images/menu_flook_1.gif" name="menu_flook" width="155" height="22" border="0"></td>
</tr>
<tr>
<td width="155" colspan="3">
<img src="../images/dot_spacer.gif" width="155" height="1"></td>
</tr>
<tr>
<td width="126" height="1" colspan="3" bgcolor="#339933">
<a href="mlm.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu_mlm','','../images/menu_mlm_2.gif',1)">
<img src="../images/menu_mlm_1.gif" name="menu_mlm" width="155" height="22" border="0"></td>
</tr>
<tr>
<td width="155" colspan="3"><img src="../images/dot_spacer.gif" width="155" height="1"></td>
</tr>
<tr>
<td width="126" height="1" colspan="3" bgcolor="#339933">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu_login','','../images/menu_login_2.gif',1)">
<a href="distributorLogin.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu_login','','../images/menu_login_2.gif',1)">
<img src="../images/menu_login_1.gif" name="menu_login" width="155" height="22" border="0"></td>
</tr>
<tr>
<td width="155" colspan="3">
<img src="../images/g_spacer_b.gif" width="155" height="3"></td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFFFFF">
<img src="../images/w_spacer.gif" width="1" height="7"></td>
</tr>
<tr>
<td colspan="3"><img src="../images/o_spacer.gif" width="155" height="3"></td>
</tr>
<tr>
<td width="8" align="left" valign="top" bgcolor="#EBAF01"></td>
<td width="142" align="left" valign="top" bgcolor="#EBAF01"><!-- TemplateBeginEditable name="Orange Box" --> Insert other text here <br>
and keep typing on and <br>
on until you are tired! <!-- TemplateEndEditable --></td>
<td width="5" align="left" valign="top" bgcolor="#EBAF01"></td>
</tr>
<tr>
<td colspan="3"><img src="../images/o_spacer_b.gif" width="155" height="3"></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>
<table width="760" height="8" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#FFFFFF"><img src="../images/cp_spacer.gif" width="1" height="8"></td>
</tr>
</table>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="11"><img src="../images/l_w_spacer.gif" width="1" height="5"></td>
<td width="4"><img src="../images/l_g_spacer.gif" width="4" height="5"></td>
<td bgcolor="#DEDEDE"><img src="../images/b_g_spacer.gif" width="1" height="5"></td>
<td width="4"><img src="../images/r_g_spacer.gif" width="4" height="5"></td>
<td width="11"><img src="file:///D|/Dennis/BWA%20Website/template%20images/l_w_spacer.gif" width="1" height="5"></td>
</tr>
</table>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#FFFFFF"><img src="../images/bt_spacer.gif" width="1" height="8"></td>
</tr>
</table>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="20" bgcolor="#FFFFFF"><div align="center" class="style8">Copyright &copy; 2005 Better World Alternatives. Privacy Policy.</div></td>
</tr>
</table>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="5"><img src="../images/bl_bar.gif" width="5" height="5"></td>
<td bgcolor="#FFFFFF"><img src="../images/b_bar.gif" width="1" height="5"></td>
<td width="5"><img src="../images/br_bar.gif" width="5" height="5"></td>
</tr>
</table>
<table width="760" height="20" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
</body>
</html>

cjs
11-18-2005, 09:44 PM
I have an idea that may or may not work. If I place 2 tables within a table, perhaps that will allow the right table to move independently. The question is, how do I tell the column on the left to stay at the top?

Creative Insanity
11-18-2005, 10:55 PM
Just make the logo table a fixed size and the other set to percentage. That should do it.