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.<br />
<br />
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. <br />
<br />
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?<br />
<br />
Cheers<br />
<br />
p.s. Or just thinking, is there an alternative to this using background images that won't move and resize in different browsers and resolutions (without using too much javascript?)<!--content-->try setting up the fixed size for table width,image width<!--content-->????<br />
<br />
didn't follow that at all...<br />
<br />
i'm trying to create the page so that it specifically isn't fixed in any way. <br />
<br />
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.<br />
<br />
<br />
<br />
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.<br />
<br />
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.<br />
<br />
Link to Page (<!-- m --><a class="postlink" href="http://www.eusa.ed.ac.uk/societies/p+p/bumf/Mine.html">http://www.eusa.ed.ac.uk/societies/p+p/bumf/Mine.html</a><!-- m -->)<!--content-->well you can try this link,it sets the image size according to the page,you can probably incorporate it in your situation(remind you that it will increase your dependency on JavaScript)<br />
The link increases reduces width+height of the image wher eas you can only use to increase the height.<br />
<br />
<!-- m --><a class="postlink" href="http://webapplikations.com/pages/html_js/image_examples/ResizeImageOnResize.html">http://webapplikations.com/pages/html_j ... esize.html</a><!-- m --><!--content-->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. <br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
If you just "stretch" your images manually they will look all pixelated and will make your page look really bad.<!--content-->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. <br />
<br />
with respect to the Javascript one: here's an idea - but am i being too complicated?<br />
<br />
- get the size of the screen<br />
-determine the size of the page once the text has been taken into account (don't know how to do that!)<br />
- do some simple calculations by taking these values and subtractign the unchanging values from the rest of my images...<br />
-set the totalheight-known height to that of my stretchable image...which then should fill the rest of the page...<br />
<br />
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.<!--content-->Open your image in your graphics editor, then increase the size to 200%. See how much you like it. That's what is going to happen to it when it stretches.<br />
<br />
Better to take the other tack. Create a large image, & do whatever it takes to make it reduce when needed.<br />
<br />
Just my 2cts.<!--content-->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?<!--content-->also he could be stretching it smaller and already has a big picture<!--content-->
<br />
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. <br />
<br />
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?<br />
<br />
Cheers<br />
<br />
p.s. Or just thinking, is there an alternative to this using background images that won't move and resize in different browsers and resolutions (without using too much javascript?)<!--content-->try setting up the fixed size for table width,image width<!--content-->????<br />
<br />
didn't follow that at all...<br />
<br />
i'm trying to create the page so that it specifically isn't fixed in any way. <br />
<br />
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.<br />
<br />
<br />
<br />
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.<br />
<br />
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.<br />
<br />
Link to Page (<!-- m --><a class="postlink" href="http://www.eusa.ed.ac.uk/societies/p+p/bumf/Mine.html">http://www.eusa.ed.ac.uk/societies/p+p/bumf/Mine.html</a><!-- m -->)<!--content-->well you can try this link,it sets the image size according to the page,you can probably incorporate it in your situation(remind you that it will increase your dependency on JavaScript)<br />
The link increases reduces width+height of the image wher eas you can only use to increase the height.<br />
<br />
<!-- m --><a class="postlink" href="http://webapplikations.com/pages/html_js/image_examples/ResizeImageOnResize.html">http://webapplikations.com/pages/html_j ... esize.html</a><!-- m --><!--content-->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. <br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
If you just "stretch" your images manually they will look all pixelated and will make your page look really bad.<!--content-->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. <br />
<br />
with respect to the Javascript one: here's an idea - but am i being too complicated?<br />
<br />
- get the size of the screen<br />
-determine the size of the page once the text has been taken into account (don't know how to do that!)<br />
- do some simple calculations by taking these values and subtractign the unchanging values from the rest of my images...<br />
-set the totalheight-known height to that of my stretchable image...which then should fill the rest of the page...<br />
<br />
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.<!--content-->Open your image in your graphics editor, then increase the size to 200%. See how much you like it. That's what is going to happen to it when it stretches.<br />
<br />
Better to take the other tack. Create a large image, & do whatever it takes to make it reduce when needed.<br />
<br />
Just my 2cts.<!--content-->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?<!--content-->also he could be stretching it smaller and already has a big picture<!--content-->