Joi:
1. I understand what was said about creating a transparent spacer gif...but could someone give me a hint as to how to accomplish this in HTML?[nbsp][nbsp]Do I just add 1 column to the left and add the spacer as the only item in that column?
Say, for a 100 pixel column on the left:
<body hspace=0 vspace=0 other_attributes=whatever>
<table attributes=whatever>
<tr>
<td width=100>
<img src="/path_to/spacer.gif" height=1 width=150>
</td>
<td>
content here . . .
etc
(The hspace=0 vspace=0 in you body tag prevents browsers from "padding" images with extra space around them. The td width is optional, it *should* work if you leave it out, but I tend to put it in anyway.)
2. No matter what I do...removing & reducing size of images, the load time on my main page is still a bit long.[nbsp][nbsp]I would hate to take out anything else at this point, but I just[nbsp][nbsp]might have to.
Part of the problem here might be the "perception" of long loading time, because everything is in tables, maybe even all in the same big outer table. (I didn't comb through your code to match up table tags so I don't know if you've done this, and on my cable modem, it all loads quite fast ;)[nbsp][nbsp]). . . In that case, none of the table contents would show until ALL of the table contents are received by the visitor's browser.[nbsp][nbsp]
Solution: split the big outer table into several tables whereever you can, so that content will be appearing in stages to give the visitor something to look at while the rest of it loads.
Eg, working with your current design without changing the look of it: put the banner ad outside any tables, it will show up right away. Put your logo and title banner and welcome text in a separate table. Then close that table and start a new one for your 3-column "content" section. Then close that table before your textlinks and buttons on the bottom (these might not need to be in a table at all).[nbsp][nbsp](Note that you'll want to put the spacer column in each separate table.)
so (pseudo code):
<html><body>
<img src="banner">
<table>
spacer
logo
title banner, and welcome text
</table>
<table>
spacer
content column 1
content column 2
content column 3
</table>
text-links and buttons
</body>
</html>
3. The "Go shopping" drop down box at the end of the 3rd column always adds a lot of space just above it (I don't add it)...I'd like to get rid of that space![nbsp][nbsp]Can someone tell me how??
um . . . sorry, don't know offhand . . . :o I use FQ's built in redirection script for drop-down menus, and I don't think I've had this problem. . . . I don't see anything obvious in your HTML at first glance, but I don't know JavaScript which you seem to have going on there.
4. The background behind the subhead "Share your Thoughts" doesn't quite go the length of the column as "Great Informative Site" does...wondering why?
Because you coded it that way . . . look:
<TABLE border="0" BGCOLOR="#FFFFFF">
<TR align="center" bgcolor="#ffee2b">
<TD align="center">
<FONT color="#ff00bd" size="4">Great Informative Site!</FONT></FONT></TD>
compare to:
<TABLE border="0" align="center" BGCOLOR="#FFFFFF" <font color=#FF0000>width="240"</font>>
<TR align="center" bgcolor="#ffee2b">
<TD align="center" <font color=#FF0000>width="240"</font>>
<CENTER><FONT color="#ff00bd" size="4">Share Your Thoughts!</FONT></FONT></TD>
Other than that, comments . . . looks good, except when resized . . . it doesn't work at 600 pixel's wide.[nbsp][nbsp]
To get it to work at resolutions from 600 pixels wide on up, here's what I would do:
For each table:
1) Figure out the minimum width you want for each column, so that the total of the columns, plus their cellspacing and padding (if you have them set), add up to 585 pixels.[nbsp][nbsp]
2) Put a spacer.gif in each column (at the bottom below your text works fine) sized to the minimum width you want each column to be.[nbsp][nbsp]
3) Set your table width to 100% and don't set pixel widths in your <td> tags except for the left spacer column (though you can use width percentages).
Result: when the browser window is larger than 600, the table will "expand" to fill the available width, when the browser window is 600, the table will "shrink" to the widths of the spacers (the spacer.gif's prevent the column width from getting any smaller than that width).
Hope this helps . . .
Bekariso
------------------
www.LeafWind.com (http://www.LeafWind.com)
Growing web sites that thrive in the winds of change.