Greetings -<br />
I have a question regarding the display of images within a dynamically resizeable Table. My goals:<br />
1. Create a Table with eight rows and five columns. <br />
2. The Width and Height of the entire Table is to adjust to fit the display area within the browser so that all of the table cells are visible.<br />
3. The odd numbered rows contain cell header text.<br />
4. The even numbered rows contain images -- as such, the table contains 20 images.<br />
5. Each column should be 20% of the width of the table.<br />
6. Each row will also be a percentage of the table height.<br />
7. When the browser is resized, the cells should resize so that the images in the table remain visible.<br />
<br />
A picture is worth a thousand words... if you go to my website:<br />
<!-- w --><a class="postlink" href="http://www.mathsavers.com">www.mathsavers.com</a><!-- w --><br />
Then, click the first link under the Product column "MBSS Light 3.0" -- this will take you to the product page. The Product page shows a table with 5 columns and 8 rows.<br />
<br />
Here is the problem (as it appears on my browser: IE 6.0.2800) I can see the table -- and the rows appear to resize just fine. But the columns do Not resize properly. The first column appears to be stretched such that the Column is as wide (300 pixels) as the images in that column. The remaining columns (2 through 5), are then proportionally spaced per the remaining width available to the table.<br />
<br />
Note that I wrote the HTML using Windows Notepad. The HTML itself is really simple. And so my question: What do I need to change so that all five columns always appear to have the same width (20%) of that in the Table? If you right click on the webpage and choose View Source, you will see that I am setting the column widths to have percentages in relation to the table. Note too that all 20 of the images are of type JPG and have dimensions 300 * 240 pixels.<br />
<br />
Any advice, recommendations, suggestions will be appreciated.<br />
Cheers,<br />
PG<!--content-->If you want an image to re-size to fit the width of it's container then simply do this:<br />
<br />
width="100%"<!--content-->Yes, I am doing that for each of the cells; although I did not mention this in the original post. And, of course, each of the images does fully fill each of the cells. However, the width of the first column, for whatever reason, stretches to the actual pixel width of the contained images. The remaining columns are then reduced in their widths per the remaining column space.<!--content-->The table you referenced contains one dimentional data, so the table is not the best way to represent it.<br />
What you want to do is have a list of images with captions and style list items so that they are displayed inline. Then you would have as many images in a line as window size allows.<!--content-->...post removed, user banned...<!--content-->Thanks, yes, the data is a 1D vector (list). And in the old days, I did have a list. But my goal is to present my "top 20 most visually captivating images" all on one page -- with no scrolling requirement to see more images. I will not be adding images to the list; rather, I will replace old images with new ones, staying with 20 in the table. The task seems to be really straightforward -- and the actual HTML that I implemented to display the table and its contents is very much cookbook -- nothing special at all about it.<br />
If someone can point me to a website that already implements a grid of images, that would be useful.<br />
Thanks much,<br />
PG<!--content-->Wow, it's interesting how ugly that is in IE versus Firefox. Semantically that would be a great place to use a DL list instead of a table. I've made that recommendation to a number of folks here but I don't know if anyone actually did it.<!--content-->Here is a demo of what you want to do:<br />
<!-- w --><a class="postlink" href="http://www.vladdy.net/Demos/gallery.html">www.vladdy.net/Demos/gallery.html</a><!-- w --><br />
Images fill available browser width so there is no horizontal scrollbar (until window width is smaller that a single image width (with margins and padding)).<!--content-->Greetings -<br />
Thanks to all for your thoughts, but just to clarify, I do not want a list or gallery. The requirement is for a grid that auto-sizes so that all N by M images resize in their similarly sized cells whereby the entire grid is visible with no scrolling in any direction necessary. I was hoping that someone would offer a solution involving embedded tables or some such as a means to get around some HTML limitation. Perhaps I am asking for that which cannot be done within the confines of HTML.<br />
Cheers,<br />
PG<!--content-->Images have a fixed width in pixels, while the width of the user browser is unknown. If you "hardcode" the number of columns your user will end up either with horizontal scroll bar or unnecessary gaps between images. <br />
The solution I offered takes care of it by lining images in as many column as the browser window allows making the most use of the available "real estate". <br />
<br />
I think you started with an unfounded "requirement" and now refuse to accept the sensible solution.<!--content-->Nice page Vladdy, very smooth. Makes good use of lists.<br />
<br />
On IE there is a bug where the images sometimes poke out the side of the blue box if you resize it right (looks good in everything else though). I think that IE must be messing up the margins or something.<br />
<br />
pixelate, try not to get too bogged down with tables, they're just not worth the hassle.<!--content-->You are right, IE needs more margin - should be easily fixable.<!--content-->Woah, hold on there!!! Don't go fixing it, leave it there to annoy IE users.
<!--content-->
I have a question regarding the display of images within a dynamically resizeable Table. My goals:<br />
1. Create a Table with eight rows and five columns. <br />
2. The Width and Height of the entire Table is to adjust to fit the display area within the browser so that all of the table cells are visible.<br />
3. The odd numbered rows contain cell header text.<br />
4. The even numbered rows contain images -- as such, the table contains 20 images.<br />
5. Each column should be 20% of the width of the table.<br />
6. Each row will also be a percentage of the table height.<br />
7. When the browser is resized, the cells should resize so that the images in the table remain visible.<br />
<br />
A picture is worth a thousand words... if you go to my website:<br />
<!-- w --><a class="postlink" href="http://www.mathsavers.com">www.mathsavers.com</a><!-- w --><br />
Then, click the first link under the Product column "MBSS Light 3.0" -- this will take you to the product page. The Product page shows a table with 5 columns and 8 rows.<br />
<br />
Here is the problem (as it appears on my browser: IE 6.0.2800) I can see the table -- and the rows appear to resize just fine. But the columns do Not resize properly. The first column appears to be stretched such that the Column is as wide (300 pixels) as the images in that column. The remaining columns (2 through 5), are then proportionally spaced per the remaining width available to the table.<br />
<br />
Note that I wrote the HTML using Windows Notepad. The HTML itself is really simple. And so my question: What do I need to change so that all five columns always appear to have the same width (20%) of that in the Table? If you right click on the webpage and choose View Source, you will see that I am setting the column widths to have percentages in relation to the table. Note too that all 20 of the images are of type JPG and have dimensions 300 * 240 pixels.<br />
<br />
Any advice, recommendations, suggestions will be appreciated.<br />
Cheers,<br />
PG<!--content-->If you want an image to re-size to fit the width of it's container then simply do this:<br />
<br />
width="100%"<!--content-->Yes, I am doing that for each of the cells; although I did not mention this in the original post. And, of course, each of the images does fully fill each of the cells. However, the width of the first column, for whatever reason, stretches to the actual pixel width of the contained images. The remaining columns are then reduced in their widths per the remaining column space.<!--content-->The table you referenced contains one dimentional data, so the table is not the best way to represent it.<br />
What you want to do is have a list of images with captions and style list items so that they are displayed inline. Then you would have as many images in a line as window size allows.<!--content-->...post removed, user banned...<!--content-->Thanks, yes, the data is a 1D vector (list). And in the old days, I did have a list. But my goal is to present my "top 20 most visually captivating images" all on one page -- with no scrolling requirement to see more images. I will not be adding images to the list; rather, I will replace old images with new ones, staying with 20 in the table. The task seems to be really straightforward -- and the actual HTML that I implemented to display the table and its contents is very much cookbook -- nothing special at all about it.<br />
If someone can point me to a website that already implements a grid of images, that would be useful.<br />
Thanks much,<br />
PG<!--content-->Wow, it's interesting how ugly that is in IE versus Firefox. Semantically that would be a great place to use a DL list instead of a table. I've made that recommendation to a number of folks here but I don't know if anyone actually did it.<!--content-->Here is a demo of what you want to do:<br />
<!-- w --><a class="postlink" href="http://www.vladdy.net/Demos/gallery.html">www.vladdy.net/Demos/gallery.html</a><!-- w --><br />
Images fill available browser width so there is no horizontal scrollbar (until window width is smaller that a single image width (with margins and padding)).<!--content-->Greetings -<br />
Thanks to all for your thoughts, but just to clarify, I do not want a list or gallery. The requirement is for a grid that auto-sizes so that all N by M images resize in their similarly sized cells whereby the entire grid is visible with no scrolling in any direction necessary. I was hoping that someone would offer a solution involving embedded tables or some such as a means to get around some HTML limitation. Perhaps I am asking for that which cannot be done within the confines of HTML.<br />
Cheers,<br />
PG<!--content-->Images have a fixed width in pixels, while the width of the user browser is unknown. If you "hardcode" the number of columns your user will end up either with horizontal scroll bar or unnecessary gaps between images. <br />
The solution I offered takes care of it by lining images in as many column as the browser window allows making the most use of the available "real estate". <br />
<br />
I think you started with an unfounded "requirement" and now refuse to accept the sensible solution.<!--content-->Nice page Vladdy, very smooth. Makes good use of lists.<br />
<br />
On IE there is a bug where the images sometimes poke out the side of the blue box if you resize it right (looks good in everything else though). I think that IE must be messing up the margins or something.<br />
<br />
pixelate, try not to get too bogged down with tables, they're just not worth the hassle.<!--content-->You are right, IE needs more margin - should be easily fixable.<!--content-->Woah, hold on there!!! Don't go fixing it, leave it there to annoy IE users.
<!--content-->