vertically stretching images to fit expanded tables
Hey, this may seem REALLY simple, but I've just never needed to do it before - thought i knew how to do it but don't.
My page is designed so that images form the left, top and right of the page, with a table element (or something appropriate that can take text without using layers and the like) right in the middle.
Obviously i want this text-filled element to expand downwards as necessary when it fills with text - this is the default so no problem. But the images to the left and right of the text-filled bit need to stretch to the bottom of the page regardless of how long the text-filled table element. I thought i could do it using ="%" values for the table and image sizes, but this never seems to work... any ideas?
i'm trying to create the page so that it specifically isn't fixed in any way.
the images have a minimum size - i.e. their default size... but the images are just patterns that should continue to the bottom of the page if the text extends the borderign table element past their natural length...hence the stretch question. If i start setting specific sizes then it's going to go horribly wrong as each browser will read it differently, and also it's far more manual labour to set it up for each page.
in fact I've just had another thought - if your screen is big enough i actually want the images to stretch to fill the screen anyway.
anyway, here's a link to the beginnings of the page and if anyone has any ideas how to stretch images left and right of the text that'd be great. cheers.
The link increases reduces width+height of the image wher eas you can only use to increase the height.
If i start setting specific sizes then it's going to go horribly wrong as each browser will read it differently, and also it's far more manual labour to set it up for each page.
No...an image that is, say, 100 x 70 pixels is just that no matter what..the problem arises that everyone will have different monitor resolutions like 800 x 600 or 1024 x 768 or even the prehistoric 600 x 480...so in a sense you are correct that it may look differently on various screens.
This is why it is important to keep the resolutions of your images at 75dpi or less so it doesn't take too long to load.
If you put an image on the screen you can click on it and manually resize it but then it will look distorted and bad.
What I do sometimes is I have Fireworks or Photoshop open at the same time and if I need to use the same image but at different sizes then I can alter the image in Photoshop and save it as a slightly different name.
If you just "stretch" your images manually they will look all pixelated and will make your page look really bad.
Humankind cannot gain anything without first giving something in return.
To obtain, something of equal value must be lost.
That is Alchemy's first law of Equivalent Exchange.
In those days we really believed that to be the worlds one, and only truth. - FullMetal Alchemist
hmm, good point with the browser thing - i was getting myself muddled with pts - which Mozilla at least definitely reads differently for some reason - i have asite with layers and the thing alwasy loads too low in Mozilla! very annoying.
- get the size of the screen
-determine the size of the page once the text has been taken into account (don't know how to do that!)
- do some simple calculations by taking these values and subtractign the unchanging values from the rest of my images...
-set the totalheight-known height to that of my stretchable image...which then should fill the rest of the page...
would that work? Although, as i say i don't know how to get the size of a page when the text increases it automatically.
ok ... the image itself is a simple gif with about 3 vertical lines (so it's not going to look stupid when sized up) -- but still ... what would the code be to make sure that the image always resized (down or up as appropriate) to fill the space and not leave any background white peeping through?