Dear friends: <br />
<br />
Please see my site at: <br />
<br />
<!-- m --><a class="postlink" href="http://www.immortalgems.com/">http://www.immortalgems.com/</a><!-- m --> <br />
<br />
Please compare the right margins (at 1024 X 768 resolution) with the original version at: <br />
<br />
<!-- m --><a class="postlink" href="http://www.immortalgems.com/original/index.html">http://www.immortalgems.com/original/index.html</a><!-- m --> <br />
<br />
I opened the original template PSD image for the home page in Photoshop 7, removed all the layers and slices that filled up the main panel, leaving everything else just as it is. I then switched to ImageReady, saved the HTML index.html file and images Optimized As and then created a site in GoLive 6 and uploaded it as is. <br />
<br />
For purposes of comparison, I also created a site in Dreamweaver and checked it in its Preview in Browser and saw the exact same problem: if you switch your resolution to 800 X 600, everything looks perfect. However, at 1024 X 768, the right margin is white instead of being an extension of the page background and the bottom panel does not extend all the way to the right screen margin. <br />
<br />
I've been told that I need a containing table with WIDTH=100% to contain the fixed size pixel table in order to resolve this issue. <br />
<br />
I did a search for a tutorial on containing tables in Google. I found one at: <br />
<br />
<!-- m --><a class="postlink" href="http://www.designplace.org/tutorials.php?page=1&c_id=5">http://www.designplace.org/tutorials.php?page=1&c_id=5</a><!-- m --> <br />
<br />
I tried to apply it to my site. But I've obviously failed as you can see it at: <br />
<br />
<!-- m --><a class="postlink" href="http://www.immortalgems.com/index-m.html">http://www.immortalgems.com/index-m.html</a><!-- m --> <br />
<br />
Please scroll down till you see the image. <br />
<br />
I'd appreciate help on resolving this issue. <br />
<br />
Is there a way to edit the image size in Photoshop/ImageReady to automatically generate the correct HTML page? <br />
<br />
All my thanks. <br />
<br />
Benjamin<!--content-->Do you want the site to "expand" across the larger size resolution, or do you want to keep the layout the same as 800x600 regardless of the resolution?<br />
By using image slices for the entire layout, TABLE=100% will spread the images somewhat evenly across the screen. <br />
Think of it as a jig-saw puzzle. If the final puzzle is to be 18 inches by 24 inches, then you can't just decide to make it 24 inches by 30 inches without spaces between the pieces.<br />
Try changing the containing table from "100%" to about "770px" and adjust the width of the table from there. It will hold the layout at the same width regardless of the resolution.<br />
Nice looking page, BTW.<!--content-->Dear Android:<br />
<br />
Thanks so very much for your kind help.<br />
<br />
To answer your question: I would like the layout to remain fixed at 770px and just have the background stretch out properly to the end of the right margin of the screen. I don't really want to expand the layout because I really should fix the page at 800 X 600 so that it will look right on a desktop or laptop monitor. If I expand it, I imagine that the images I will add to the page will also stretch and that probably won't look good. <br />
<br />
By the way, this is not my design. I wish I could do this myself. Someday, I hope I'll be able to do this. This is a template from BoxedArt. I am trying to modify it, and that's what's frustrating me. In effect, I would like my modified version (I've removed all of the images from the middle, main panel) to look just like the original version (please see URL in earlier post). <br />
<br />
I'd appreciate suggestions and help on how to correct this problem. The HTML for the modified version was generated automatically in Photoshop (using the Save for Web option). Do I really need a nested table structure or is there a simpler answer? <br />
<br />
All my thanks!<br />
<br />
Benjamin<!--content-->uhh I hate to tell you this but it is doing exactly as it should. the thing you have to look at is that you don't have a background to spread. the background is white and that is working just fine. now if you want it to look like it does in 800x600 in all resolutions then you need to edit all tables and use percentages. any time you use static numbers it will always be that way in any resolutions.<br />
<br />
so to start make the main table 100% and see where it take you. once you make the tale 100% it will show you where you need to add images to fill in the spots it stretched.<!--content-->I've been playing around with it a bit, and you might be able to try something like these bones:<br />
<br />
<table width=100%><br />
<tr><br />
<td><br />
<!--Your current image layout container starts here--><br />
<table width=770px><br />
<tr><br />
<td><br />
<!--your images go here--><br />
</td><br />
</tr><br />
</table><br />
<!--end of current layout container--><br />
</td><br />
<td width=100%><br />
<!--start of desired extension--><br />
<table width=100%><br />
<tr><br />
<br />
<!--the following gets repeated altering the images to match the respective images directly to the left--><br />
<br />
<td style="width:100%;background:url(image) repeat-x;"><br />
</td><br />
.<br />
.<br />
.<br />
.<br />
<!--end of repeated section--> <br />
<br />
</td><br />
</tr><br />
</table><br />
<!--end of desired extension--><br />
</td><br />
</tr><br />
</table><br />
<br />
Of course, this is highly dependent on the images dimensions: in the left table you're using them as content in TD's, on the right you're using them as backgrounds for TD's (where you can't set their dimensions). If you come to the conclusion that it might be more trouble than it's worth, you're probably right. I've never sliced images (for layout or otherwise), and now I know why I don't want to start.
<!--content-->Dear Android and friends:<br />
<br />
Thanks so very much for taking the trouble to offer a detailed nesting table. I am very grateful and will consider it. One thing I've learned from my posts is that there are really are many different ways to skin a cat (hope you cat lovers out there are not offended. We have a lovely cat ourselves) :--) There seem to be many ways to solve this issue. One of them is nesting tables. Another is CSS. A third is redesigning the site. I'll think about it and see what works best.<br />
<br />
Thanks again.<br />
<br />
Benjamin<!--content-->
<br />
Please see my site at: <br />
<br />
<!-- m --><a class="postlink" href="http://www.immortalgems.com/">http://www.immortalgems.com/</a><!-- m --> <br />
<br />
Please compare the right margins (at 1024 X 768 resolution) with the original version at: <br />
<br />
<!-- m --><a class="postlink" href="http://www.immortalgems.com/original/index.html">http://www.immortalgems.com/original/index.html</a><!-- m --> <br />
<br />
I opened the original template PSD image for the home page in Photoshop 7, removed all the layers and slices that filled up the main panel, leaving everything else just as it is. I then switched to ImageReady, saved the HTML index.html file and images Optimized As and then created a site in GoLive 6 and uploaded it as is. <br />
<br />
For purposes of comparison, I also created a site in Dreamweaver and checked it in its Preview in Browser and saw the exact same problem: if you switch your resolution to 800 X 600, everything looks perfect. However, at 1024 X 768, the right margin is white instead of being an extension of the page background and the bottom panel does not extend all the way to the right screen margin. <br />
<br />
I've been told that I need a containing table with WIDTH=100% to contain the fixed size pixel table in order to resolve this issue. <br />
<br />
I did a search for a tutorial on containing tables in Google. I found one at: <br />
<br />
<!-- m --><a class="postlink" href="http://www.designplace.org/tutorials.php?page=1&c_id=5">http://www.designplace.org/tutorials.php?page=1&c_id=5</a><!-- m --> <br />
<br />
I tried to apply it to my site. But I've obviously failed as you can see it at: <br />
<br />
<!-- m --><a class="postlink" href="http://www.immortalgems.com/index-m.html">http://www.immortalgems.com/index-m.html</a><!-- m --> <br />
<br />
Please scroll down till you see the image. <br />
<br />
I'd appreciate help on resolving this issue. <br />
<br />
Is there a way to edit the image size in Photoshop/ImageReady to automatically generate the correct HTML page? <br />
<br />
All my thanks. <br />
<br />
Benjamin<!--content-->Do you want the site to "expand" across the larger size resolution, or do you want to keep the layout the same as 800x600 regardless of the resolution?<br />
By using image slices for the entire layout, TABLE=100% will spread the images somewhat evenly across the screen. <br />
Think of it as a jig-saw puzzle. If the final puzzle is to be 18 inches by 24 inches, then you can't just decide to make it 24 inches by 30 inches without spaces between the pieces.<br />
Try changing the containing table from "100%" to about "770px" and adjust the width of the table from there. It will hold the layout at the same width regardless of the resolution.<br />
Nice looking page, BTW.<!--content-->Dear Android:<br />
<br />
Thanks so very much for your kind help.<br />
<br />
To answer your question: I would like the layout to remain fixed at 770px and just have the background stretch out properly to the end of the right margin of the screen. I don't really want to expand the layout because I really should fix the page at 800 X 600 so that it will look right on a desktop or laptop monitor. If I expand it, I imagine that the images I will add to the page will also stretch and that probably won't look good. <br />
<br />
By the way, this is not my design. I wish I could do this myself. Someday, I hope I'll be able to do this. This is a template from BoxedArt. I am trying to modify it, and that's what's frustrating me. In effect, I would like my modified version (I've removed all of the images from the middle, main panel) to look just like the original version (please see URL in earlier post). <br />
<br />
I'd appreciate suggestions and help on how to correct this problem. The HTML for the modified version was generated automatically in Photoshop (using the Save for Web option). Do I really need a nested table structure or is there a simpler answer? <br />
<br />
All my thanks!<br />
<br />
Benjamin<!--content-->uhh I hate to tell you this but it is doing exactly as it should. the thing you have to look at is that you don't have a background to spread. the background is white and that is working just fine. now if you want it to look like it does in 800x600 in all resolutions then you need to edit all tables and use percentages. any time you use static numbers it will always be that way in any resolutions.<br />
<br />
so to start make the main table 100% and see where it take you. once you make the tale 100% it will show you where you need to add images to fill in the spots it stretched.<!--content-->I've been playing around with it a bit, and you might be able to try something like these bones:<br />
<br />
<table width=100%><br />
<tr><br />
<td><br />
<!--Your current image layout container starts here--><br />
<table width=770px><br />
<tr><br />
<td><br />
<!--your images go here--><br />
</td><br />
</tr><br />
</table><br />
<!--end of current layout container--><br />
</td><br />
<td width=100%><br />
<!--start of desired extension--><br />
<table width=100%><br />
<tr><br />
<br />
<!--the following gets repeated altering the images to match the respective images directly to the left--><br />
<br />
<td style="width:100%;background:url(image) repeat-x;"><br />
</td><br />
.<br />
.<br />
.<br />
.<br />
<!--end of repeated section--> <br />
<br />
</td><br />
</tr><br />
</table><br />
<!--end of desired extension--><br />
</td><br />
</tr><br />
</table><br />
<br />
Of course, this is highly dependent on the images dimensions: in the left table you're using them as content in TD's, on the right you're using them as backgrounds for TD's (where you can't set their dimensions). If you come to the conclusion that it might be more trouble than it's worth, you're probably right. I've never sliced images (for layout or otherwise), and now I know why I don't want to start.
<!--content-->Dear Android and friends:<br /><br />
Thanks so very much for taking the trouble to offer a detailed nesting table. I am very grateful and will consider it. One thing I've learned from my posts is that there are really are many different ways to skin a cat (hope you cat lovers out there are not offended. We have a lovely cat ourselves) :--) There seem to be many ways to solve this issue. One of them is nesting tables. Another is CSS. A third is redesigning the site. I'll think about it and see what works best.<br />
<br />
Thanks again.<br />
<br />
Benjamin<!--content-->