help with stretch layout

liunx

Guest
Hi, I'm new here and I have a problem I need help with. <br />
The problem revolves around having a header on a website which stretches to meet any screen size. An easy feat with table width settings when you're dealing with no graphics, but unfortunately I am. Let me clarify.<br />
I've got a table which encompasses the whole site, set at 100% width, no margins, no spacing, no padding. <br />
<table border="0" cellspacing="0" cellpadding="0" width="100%", etc.><br />
<tr><td><br />
Here, there is an embedded table which will hold the area of difficulty I'm trying to figure out, thus :<br />
<table border="0" cellspacing="0" cellpadding="0" width="100%", etc.><br />
Now within this secondary table, I've got 1 <tr>, and 5 <td>'s. Here is the problem. ALL FIVE table cells contain graphic files. The first 3 <td>'s contain .gif's that all have a specific width and height, as follows (the names of the files are of course irrelavent, and the width of the file is specified in the cell tag):<br />
<tr><br />
<td width="200px"><img src=http://www.webdeveloper.com/forum/archive/index.php/"...."></td><br />
<td width="210px"><img src=http://www.webdeveloper.com/forum/archive/index.php/"...."></td><br />
<td width="180px"><img src=http://www.webdeveloper.com/forum/archive/index.php/"...."></td><br />
These cells will never change width and will always form the left hand side of the header. The FOURTH cell is a stretchable image. I will get back to it in one second. The FIFTH and final cell is static. As follows:<br />
<td width="100px"><img src=http://www.webdeveloper.com/forum/archive/index.php/"...."></td><br />
Now to sum up, my problem is how can I set the FOURTH table cell to be a variable width which stretches to fit the screen dimensions, no matter what the resolution is set at? I will sum up the code below, with "*"'s around the problem area.<br />
<br />
<table border="0" cellspacing="0" cellpadding="0" width="100%", etc.><br />
<tr><br />
<td><br />
<table border="0" cellspacing="0" cellpadding="0" width="100%", etc.><br />
<tr><br />
<td width="200px"><img src=http://www.webdeveloper.com/forum/archive/index.php/"...."></td><br />
<td width="210px"><img src=http://www.webdeveloper.com/forum/archive/index.php/"...."></td><br />
<td width="180px"><img src=http://www.webdeveloper.com/forum/archive/index.php/"...."></td><br />
****<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"...."></td>****<br />
<td width="100px"><img src=http://www.webdeveloper.com/forum/archive/index.php/"...."></td><br />
</tr><br />
</table><br />
</td><br />
</tr><br />
</table><br />
<br />
ANY help on this would be massively appreciated, or if anyone could point me to a resource to help, or another discussion group. I've got a deadline to meet, and this is functionality is mandatory.<br />
<br />
Thanks!!!<br />
Brian<!--content-->well i guess you dont realise it but you've answered it yourself - you just dont put a width in, and it will automatically scale it.<br />
<br />
However, dont think you're out of the woods yet - by my reckoning your page will need to be at the very least 690 pixels wide, and that's getting a bit big. If your site is on the internet (not an intranet where you can control your viewers) then most will look at the site in 1024 x 768, some in 800 x 600 (and some even lower, but i must admit that i find going lower than that a bit of a stretch). Although you may think that 1024 is sufficiently bigger than 690, if someone has their favourites bar open (as i think most surfers will), then it can very quickly reduce the size of the visible window so that it's no longer enough. and there comes a point where the width=100% will override the pixel settings you've put in, and will reduce the size of those tabel cells that you're trying so hard to protect. Try it and see.<br />
<br />
Hope that helps - just thought i'd reply since noone else had yet.<!--content-->
 
Back
Top