Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- veteran needs help updating old school skills

SpiralDreams - 9:17 pm on Jan 6, 2012 (gmt 0)


By the way, the above post was very kindly edited by the moderator to bring me up to speed on forum rules I was unaware of. I had posted a link to an example but will instead post some representative code of the page I am working on.

FYI - I am NOT looking for anyone to critique or rewrite my code. I am simply wondering, in very general terms, how you might approach a page like this. I am using the nested tables to hold expandable graphic tables in place and control where everything lies, perfectly. From the code below, how might I, in theory, achieve the same results? Oh, and I cannot change the layout more than a smidge due to the clients wishes.
Thanks in advance for any insight.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<!--- LINK TO STYLESHEET - CSS --->
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body topmargin="11" leftmargin="0" rightmargin="0" bottommargin="0" background="images/image.jpg">

<!--- MAIN TABLE - WHOLE PAGE ---->
<div align="center">
<!--- SUN GUARANTEE GRAPHIC - LAYERED DIV --->
<div id="containbadge">
<div id="badge" style="top: 10px;">
<img src="images/resources/image.png" width="277" height="276" alt="alt text" />
</div>
</div>
<!--- END SUN GRAPHIC --->
<table border="0" width="813" cellspacing="0" cellpadding="0">
<!--- BEGIN TOPNAVBAR--->
<tr>
<!---TOPNAV GRAPHIC--->
<td background="images/main_tables/main_top.png" width="813">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="43">
<tr>
<!---BEGIN EDITABLE AREA - TOPNAV---->
<td width="21">&nbsp;</td>
<td width="381">
<p align="left">HOME </p>
</td>
<td>
<p align="right">LOGIN </p>
</td>
<td width="18">&nbsp;</td>
<!----END EDITABLE AREA--->
</tr>
</table>
</div>
</td>
</tr>
<!--- End TOPNAVBAR--->
<!---LOGO DISPLAY AREA--->
<tr>
<td>
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/main_tables/main_fill.png">
<tr>
<td>
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="113">
<tr>
<td width="22">&nbsp;</td>
<td>
<!----LOGO GRAPHIC--->
<!---TO CHANGE LOGO GRAPHIC - UPLOAD A NEW IMAGE TO IMAGES FOLDER AND CHANGE NAME BELOW BETWEEN QUOTE MARKS FOR src--->&nbsp;<!---END LOGO GRAPHIC--->LOGO
HERE</td>
<td>&nbsp;</td>
<td width="25">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<!---END LOGO DISPLAY AREA--->
<!---BEGIN MIDNAVBAR--->
<tr>
<td background="images/main_tables/main_bar.png" height="44">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="43">
<tr>
<td width="20" rowspan="2">&nbsp;</td>
<!---BEGIN EDITABLE AREA--->
<td width="190" valign="bottom" height="32">
<p class="small">I am an:
<!--- DROPDOWN 1 --->
<select size="1" name="D1" style="font-size: 10pt">
<!--- BEGIN DROPDOWN OPTIONS - TO ADD MORE JUST COPY AND PASTE BELOW LINE AND CHANGE WORDING BETWEEN OPTION TAGS AS DESIRED --->
<option>TEST</option>
<option>Other</option>
<!--- END DROPDOWN OPTIONS ---></select></p>
</td>
<td width="190" valign="bottom" height="32">
<p class="small">Licensed in:
<!---DROPDOWN 2---->
<select size="1" name="D2" style="font-size: 10pt">
<!--- BEGIN DROPDOWN OPTIONS - TO ADD MORE JUST COPY AND PASTE BELOW LINE AND CHANGE WORDING BETWEEN OPTION TAGS AS DESIRED --->
<option>TEST</option>
<!--- END DROPDOWN OPTIONS ---></select></p>
</td>
<!---END EDITABLE AREA--->
<td valign="middle" rowspan="2">&nbsp;</td>
<td width="19" rowspan="2">&nbsp;</td>
</tr>
<tr>
<td width="380" colspan="2"></td>
</tr>
</table>
</div>
</td>
</tr>
<!---END MIDNAVBAR--->
<tr>
<td>
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/main_tables/main_fill.png">
<tr>
<td>
<div align="center">
<!--- BEGIN SALES BANNER --->
<table border="0" width="780" cellspacing="0" cellpadding="0" background="images/sales_banner/banner.png" height="152">
<tr>
<td>
<div align="center">
<table border="0" width="747" cellspacing="0" cellpadding="0" height="120">
<tr>
<td width="210">&nbsp;</td>
<td width="331">
<!--- ENGINEERING ETHICS COPY --->
<p align="center">
<font color="#C96532"><b>
<font face="Times New Roman" size="4">
TEST</font></b></font></p>
<p align="center"><b>
<font face="Times New Roman" size="4" color="#C96532">
TEST</font></b></p>
<p align="center"><b>
<font face="Times New Roman" size="4" color="#C96532">
TEST</font></b><a href="page.shtml">
</a></p>
</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<!--- END SALES BANNER ---></div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/main_tables/main_fill.png">
<tr>
<td>
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="188" valign="top">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="19" valign="top">&nbsp;</td>
<td valign="top">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td background="images/main_tables/SUBTOP.png" width="171" height="46">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="46">
<tr>
<td width="41" rowspan="2">&nbsp;</td>
<td valign="middle">
<p class="smallmenu">
<!--- TITLE - FEATURED --->
TITLE</p>
</td>
</tr>
<tr>
<td valign="middle" height="4">
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td background="images/main_tables/SUBFILL.png">
<div align="center" id="menulist">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="19">&nbsp;</td>
<td>
<ul>
<!--- BEGIN LINK LISTING --->
<li>
<a href="http://www.example.com">
LINK</a></li>
<li>
LINK</li>
<li>
LINK</li>
<li>
LINK</li>
<li>
LINK</li>
<!--- END LINK LISTING --->
</li>
</ul>
</td>
<td width="18">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="171" height="46" background="images/main_tables/SUBMID.png">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="46">
<tr>
<td width="40" rowspan="2">&nbsp;</td>
<td>
<p class="smallmenu">
<!--- TITLE - GUARANTEED --->
TITLE
<!--- END TITLE --->
</p>
</td>
</tr>
<tr>
<td height="4">
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td background="images/main_tables/SUBFILL.png">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="19">&nbsp;</td>
<td>
<p>LORUM
IPSUM DOLOR.
<!--- END COPY --->
</p>
</td>
<td width="19">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td background="images/main_tables/SUBMID.png" width="171" height="46">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="46">
<tr>
<td width="39" rowspan="2">&nbsp;</td>
<td height="38">
<p class="smallmenu">
<!--- TITLE - COMING SOON --->
TITLE
<!--- END TITLE --->
</p>
</td>
</tr>
<tr>
<td height="4">
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td background="images/main_tables/SUBFILL.png">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="19">&nbsp;</td>
<td>
<p>
<!--- BEGIN COMING SOON COPY --->
THINGY
</p>
</td>
<td width="19">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<img border="0" src="images/main_tables/SUBBOT.png" width="171" height="13"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
<td valign="top">
<div align="center">
<table border="0" width="433" cellspacing="0" cellpadding="0">
<tr>
<!--- TOP OF MIDDLE TABLE --->
<td align="center" background="images/main_tables/midtop.png" width="433" height="17">
</td>
<!--- END TOP --->
</tr>
<tr>
<!--- MIDDLE OF MIDDLE TABLE --->
<td align="center" background="images/main_tables/midfill.png">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="13">&nbsp;</td>
<td>
<!---Paragraph One IMAGE--->
<img border="0" src="images/resources/image.png" width="92" height="147" align="left">
<!---End Paragraph One IMAGE--->
<!---Paragraph One - Main body--->
<p>Sed ut perspiciatis
</p>
<!---End Paragraph One--->
<!---Paragraph two IMAGE--->
<img border="0" src="images/resources/image.png" width="150" height="123" align="left">
<!---End Paragraph two IMAGE--->
<!--Paragraph two - Main body--->
<p>Sed ut perspiciatis
</p>
<!---End Paragraph Two--->
</td>
<td width="17">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
<!--- END MIDDLE OF MIDDLE TABLE --->
<tr>
<!--- BOTTOM OF MIDDLE TABLE --->
<td align="center" background="images/main_tables/midbot.png" width="433" height="22">
</td>
<!--- END BOTTOM --->
</tr>
</table>
</div>
</td>
<td width="184" valign="top">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td background="images/main_tables/SUBTOP.png" width="171" height="46">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="46">
<tr>
<td width="39" rowspan="2">&nbsp;</td>
<td>
<p class="smallmenu">
<!--- TITLE - TEACH AND EARN --->
TITLE
<!--- END TITLE --->
</p>
</td>
</tr>
<tr>
<td height="4">
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td background="images/main_tables/SUBFILL.png">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="18">&nbsp;</td>
<td>
<p>
<!--- BEGIN TEACH AND EARN COPY --->
Text</p>
</td>
<td width="19">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="171" height="46" background="images/main_tables/SUBMID.png">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="46">
<tr>
<td width="38" rowspan="2">&nbsp;</td>
<td>
<p class="smallmenu">
TITLE
<!--- END TITLE --->
</p>
</td>
</tr>
<tr>
<td height="4">
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td background="images/main_tables/SUBFILL.png">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="18">&nbsp;</td>
<td>
<p align="center">
<!--- BEGIN SOCIAL MEDIA IMAGES AND LINKS --->
<img border="0" src="images/Social_icons/googleplus.png" width="25" height="25">
<img border="0" src="images/Social_icons/linkdin.png" width="25" height="25">
<img border="0" src="images/Social_icons/twitter.png" width="25" height="25">
<img border="0" src="images/Social_icons/facebook.png" width="25" height="25">
<!--- END SOCIAL MEDIA CONTENT --->
</p>
</td>
<td width="19">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td background="images/main_tables/SUBMID.png" width="171" height="46">
<div align="center">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="46">
<tr>
<td width="38" rowspan="2">&nbsp;</td>
<td>
<p class="smallmenu">
<!--- TITLE - STATES --->
TITLE</p>
</td>
</tr>
<tr>
<td height="4">
</td>
</tr>
</table>
</div>
</td>
</tr>
<!---BEGIN STATES BOX--->
<tr>
<td background="images/main_tables/SUBFILL.png">
<div align="center">
<table border="0" width="100%" cellspacing="1" cellpadding="0">
<tr>
<td width="14">&nbsp;</td>
<td>
<!---STATE DROPDOWN - YOU WILL HAVE TO CHANGE THE FORM CODING--->
<form>
<p align="center">
<select size="10" name="STATES">
<option>
Alabama
</option>
</select></p>
</form>
</td>
<td width="16">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
<!---END STATES BOX--->
<tr>
<td>
<img border="0" src="images/main_tables/SUBBOT.png" width="171" height="13"></td>
</tr>
</table>
</td>
<td width="16">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td background="images/main_tables/main_footer.png" height="95">
<table border="0" width="100%" cellspacing="10" cellpadding="0" height="100%">
<tr>
<td valign="top" style="height: 37px">
<p align="center" class="footer1">
<!--- BEGIN TOP FOOTER TEXT - COPYRIGHT NOTICE --->ŠANONYMOUS</p>
<p align="center" class="footerlink">
<!--- BEGIN FOOTER LINKS ---><a href="index.shtml">HOME </a>&nbsp;&nbsp;
CONTACT US&nbsp;&nbsp;&nbsp; ABOUT US&nbsp;&nbsp;&nbsp; PRIVACY
POLICY <br>
FAQ&nbsp;&nbsp;&nbsp; TERMS OF USE&nbsp;&nbsp;&nbsp; LICENSE
REQUIREMENTS&nbsp;&nbsp;
<!--- END FOOTER LINKS ---></p>
</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</div>

</body>

</html>

[edited by: SpiralDreams at 9:25 pm (utc) on Jan 6, 2012]

Thread source:: http://www.webmasterworld.com/css/4404148.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com