I have created a knew look on a test page in my site and here is the problem I am having with TABLES with Image buttons.<br />
<br />
On a 15" monitor they look fine and all joined like one continued image. When I look at it on a 17" or bigger it brakes apart with gaps in between my coloms.<br />
<br />
I need hekp with a simple thing I am doing wrong....<br />
<br />
this is the page that I need help with:<br />
<br />
<!-- m --><a class="postlink" href="http://www.shooter4hire.com/headshots.html">http://www.shooter4hire.com/headshots.html</a><!-- m --><br />
<br />
Can anyone help out a 30 second question and fix my codeing...<br />
<br />
Thank you...<!--content-->Originally posted by Shooter4hire Ph <br />
I have created a knew look on a test page in my site and here is the problem I am having with TABLES with Image buttons.<br />
Thank you... <br />
If you want the buttons one under the other, add this <TR></TR> to the table between each link. And remove the column sizes, the image widths will size the columns<br />
<br />
<br />
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/email.gif" width="71" height="58"></td><TR></TR><br />
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/news.gif" width="92"height="58"></td><TR></TR><!--content-->This is now what the page looks like....I changed it but it still doesn't work right.<br />
<br />
I am looking for the table to be 100% of a screen size...15" monitor, 17" monitor, and bigger.....<br />
<br />
The gaps inbetween my coloms....?? I don't know why....<br />
<br />
Help....maybe re code my whole table so I can just compy and past into my Dreamweaver program....<br />
<br />
help...Help...Help......<br />
<br />
This is what the page looks like now:<br />
<br />
<!-- m --><a class="postlink" href="http://www.shooter4hire.com/headshots.html">http://www.shooter4hire.com/headshots.html</a><!-- m --><br />
<br />
I am code stupic....I am a photographer smart <br />
<br />
<!--content-->... in 30 seconds...<br />
<br />
Every row in the first table is 9 columns wide, except for the 3rd row. It is only 8 columns wide.<br />
<br />
Also, you have specified a height of 2 for the table itself (?).<br />
<br />
Lastly, I viewed your page on a 17' monitor at 800x600. I get a horizontal scrollbar in both IE and Netscape.<br />
<br />
Hope that helps.<br />
k<!--content-->The table bar...is it broken up in anyway...or does it look like one complete image......100% accross the screen....<br />
<br />
I have 9 images buttons ....table row 1 9 coloms....<br />
<br />
So why do I see it with spaces in the bar and not looking like one complete joind image....<br />
<br />
Soory this doesn't make sence to me....can you make the correct code for me to paste into my dreamweaver file.<br />
<br />
Please....??<!--content-->When you set the table width to 100% the cells will expand to fill the screen width. This has nothing to do with the size of the monitor but everything to do with the resolution.<br />
<br />
If you remove width=100% in the TABLE tag and the width=xx in the TD tags of the 2nd table, there will be no gaps and your buttons will be left justified. You will be left with white space to the right of your buttons<br />
<br />
NOTE: Your total image width excees 800px so you will get a horrizontal scroll at a 800x600 resolution.<br />
<br />
Hope that helps!<!--content-->Here is your code with a few corrections that make it fit the screen.<br />
What was wrong?<br />
Your image ans column sizes totaled more than the screen size. 800 resolution or 100%, equals 800pxls. Yours totaled to more than 880. I took 10px off each image.<br />
<br />
<html><br />
<head><br />
<title>Actor Head Shots</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />
</head><br />
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><br />
<table width="100%" border="2" cellspacing="0" cellpadding="0"><br />
<tr> <br />
<td height="44" align="left" colspan="8"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/tit4.gif" width="309" height="36"><banner></td><br />
<td height="44"align="right" width="295"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/phone.jpg" width="150" height="39"></td><br />
</tr><br />
<tr> <br />
<td height="11" colspan="9" bgcolor="#000000"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" width="1" height="1"></td><br />
</tr><br />
</table><br />
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="58"><br />
<tr><br />
<td align="left" width="*"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/logobar.gif" width="155" height="58"></td><br />
<td width="76"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/bio.gif" width="76" height="58"></td><br />
<td width="109"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/recent.gif" width="109" height="58"></td><br />
<td width="80"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/engag.gif" width="80" height="58"></td><br />
<td width="82"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/news.gif" width="82" height="58"></td><br />
<td width="74"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/employ.gif" width="74" height="58"></td><br />
<td width="61"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/email.gif" width="61" height="58"></td><br />
<td width="39"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/home.gif" width="39" height="58"></td><br />
<td width="34"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/links.gif" width="34" height="58"></td><br />
</tr><br />
</table><br />
<p> </p><br />
<p> </p><br />
</body><br />
</html><!--content-->OK I forgot to take off 10px to the height of the images, so they may not look right. You will have to resize them yourself.<!--content-->It's all in one solid piece when viewed at 800x600.<br />
The problem of "breaking-up" occurs when viewed at 1024x768 (+).<br />
That is because of the finite widths of your images (all combined, they equal 800px exactly).<br />
If you want 100% (at all resolutions), but your images only extend to 800px maximum, then you cannot fill the screen 100% without encountering a breakdown (or a "break-up") such as you are experiencing.<br />
<br />
Suggestions?<br />
Place the gray background as a background image in the ROW.<br />
Create text images (so that you can use the font style that you have chosen) with transparent matting for each image link.<br />
Make each of the 9 columns equal to a width of 11% (aligned to center).<br />
<br />
Maybe others would take you a different route, but that's the way I would try it first.<br />
<br />
My humble opinion...<br />
k<!--content-->Ok here is an idea, why dont you just use %'s for it all. That way when a person with 800 by 600 wont get a horizontal scroll bar, or atleast one that is as big and a person with any higher resolution wont have the thing clumed up in the middle. I did not read all of the other posts to see if they said this too though. One nice thing about changing images widths and heights is you only need to change one of the two and the other will move to keep the thing in proportion. Also in spots where you have text or a link that you do not want to wrap just throw in a <td nowrap><!--content-->
<br />
On a 15" monitor they look fine and all joined like one continued image. When I look at it on a 17" or bigger it brakes apart with gaps in between my coloms.<br />
<br />
I need hekp with a simple thing I am doing wrong....<br />
<br />
this is the page that I need help with:<br />
<br />
<!-- m --><a class="postlink" href="http://www.shooter4hire.com/headshots.html">http://www.shooter4hire.com/headshots.html</a><!-- m --><br />
<br />
Can anyone help out a 30 second question and fix my codeing...<br />
<br />
Thank you...<!--content-->Originally posted by Shooter4hire Ph <br />
I have created a knew look on a test page in my site and here is the problem I am having with TABLES with Image buttons.<br />
Thank you... <br />
If you want the buttons one under the other, add this <TR></TR> to the table between each link. And remove the column sizes, the image widths will size the columns<br />
<br />
<br />
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/email.gif" width="71" height="58"></td><TR></TR><br />
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/news.gif" width="92"height="58"></td><TR></TR><!--content-->This is now what the page looks like....I changed it but it still doesn't work right.<br />
<br />
I am looking for the table to be 100% of a screen size...15" monitor, 17" monitor, and bigger.....<br />
<br />
The gaps inbetween my coloms....?? I don't know why....<br />
<br />
Help....maybe re code my whole table so I can just compy and past into my Dreamweaver program....<br />
<br />
help...Help...Help......<br />
<br />
This is what the page looks like now:<br />
<br />
<!-- m --><a class="postlink" href="http://www.shooter4hire.com/headshots.html">http://www.shooter4hire.com/headshots.html</a><!-- m --><br />
<br />
I am code stupic....I am a photographer smart <br />
<br />
<!--content-->... in 30 seconds...<br /><br />
Every row in the first table is 9 columns wide, except for the 3rd row. It is only 8 columns wide.<br />
<br />
Also, you have specified a height of 2 for the table itself (?).<br />
<br />
Lastly, I viewed your page on a 17' monitor at 800x600. I get a horizontal scrollbar in both IE and Netscape.<br />
<br />
Hope that helps.<br />
k<!--content-->The table bar...is it broken up in anyway...or does it look like one complete image......100% accross the screen....<br />
<br />
I have 9 images buttons ....table row 1 9 coloms....<br />
<br />
So why do I see it with spaces in the bar and not looking like one complete joind image....<br />
<br />
Soory this doesn't make sence to me....can you make the correct code for me to paste into my dreamweaver file.<br />
<br />
Please....??<!--content-->When you set the table width to 100% the cells will expand to fill the screen width. This has nothing to do with the size of the monitor but everything to do with the resolution.<br />
<br />
If you remove width=100% in the TABLE tag and the width=xx in the TD tags of the 2nd table, there will be no gaps and your buttons will be left justified. You will be left with white space to the right of your buttons<br />
<br />
NOTE: Your total image width excees 800px so you will get a horrizontal scroll at a 800x600 resolution.<br />
<br />
Hope that helps!<!--content-->Here is your code with a few corrections that make it fit the screen.<br />
What was wrong?<br />
Your image ans column sizes totaled more than the screen size. 800 resolution or 100%, equals 800pxls. Yours totaled to more than 880. I took 10px off each image.<br />
<br />
<html><br />
<head><br />
<title>Actor Head Shots</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />
</head><br />
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><br />
<table width="100%" border="2" cellspacing="0" cellpadding="0"><br />
<tr> <br />
<td height="44" align="left" colspan="8"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/tit4.gif" width="309" height="36"><banner></td><br />
<td height="44"align="right" width="295"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/phone.jpg" width="150" height="39"></td><br />
</tr><br />
<tr> <br />
<td height="11" colspan="9" bgcolor="#000000"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" width="1" height="1"></td><br />
</tr><br />
</table><br />
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="58"><br />
<tr><br />
<td align="left" width="*"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/logobar.gif" width="155" height="58"></td><br />
<td width="76"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/bio.gif" width="76" height="58"></td><br />
<td width="109"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/recent.gif" width="109" height="58"></td><br />
<td width="80"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/engag.gif" width="80" height="58"></td><br />
<td width="82"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/news.gif" width="82" height="58"></td><br />
<td width="74"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/employ.gif" width="74" height="58"></td><br />
<td width="61"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/email.gif" width="61" height="58"></td><br />
<td width="39"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/home.gif" width="39" height="58"></td><br />
<td width="34"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/newbuttons/links.gif" width="34" height="58"></td><br />
</tr><br />
</table><br />
<p> </p><br />
<p> </p><br />
</body><br />
</html><!--content-->OK I forgot to take off 10px to the height of the images, so they may not look right. You will have to resize them yourself.<!--content-->It's all in one solid piece when viewed at 800x600.<br />
The problem of "breaking-up" occurs when viewed at 1024x768 (+).<br />
That is because of the finite widths of your images (all combined, they equal 800px exactly).<br />
If you want 100% (at all resolutions), but your images only extend to 800px maximum, then you cannot fill the screen 100% without encountering a breakdown (or a "break-up") such as you are experiencing.<br />
<br />
Suggestions?<br />
Place the gray background as a background image in the ROW.<br />
Create text images (so that you can use the font style that you have chosen) with transparent matting for each image link.<br />
Make each of the 9 columns equal to a width of 11% (aligned to center).<br />
<br />
Maybe others would take you a different route, but that's the way I would try it first.<br />
<br />
My humble opinion...<br />
k<!--content-->Ok here is an idea, why dont you just use %'s for it all. That way when a person with 800 by 600 wont get a horizontal scroll bar, or atleast one that is as big and a person with any higher resolution wont have the thing clumed up in the middle. I did not read all of the other posts to see if they said this too though. One nice thing about changing images widths and heights is you only need to change one of the two and the other will move to keep the thing in proportion. Also in spots where you have text or a link that you do not want to wrap just throw in a <td nowrap><!--content-->