Image Solution

[Taz]

Hi

This might sound like a wierd question, but i have modified or created a new logo banner for my web and it looks completly different when i view it on a 17" tft compared to a 19" tft which is what i was using to create the site.

When viewing site on a 19" my banner fits perfectly, however when viewed on a 17" my banner goes off the screen. My question is:

Is there a way to have an image that self adjusts depending on the screen size?

Thanks

Giles

[jont]

The trick is to slide several pieces over one another. The easiest way is to set up a 3 celled fluid table and set the background images to the cells as follows..


left cell : fixed in width with image
middle cell: no width set with a plain background
right cell : fixed width with image

as the browser changes sizes the 2 outer cells with the images stay at a fixed size and the middle cell with just a plain colour (or a repeating pattern) collapses and enlarges to fill the space ... as there is no dependent image in there it gives the effect of the same single image being used at all browser widths.

You can acheive better results if you fade the logo into the background colour to give a better transition.

You can do a similar thing with CSS but that is a little trickier ... I did this on http://www.eezytrade.co.uk/ but with a single image (the cartridges)

[Taz]

Hiya Jont,

Thanks for your prompt reply.... i thought the idea was a winner until i looked at my banner.

The banner itself has design all over it so havent got a way of leaving centre blank... the exact centre has a logo as part of the banner and i therefore thought it may be possible to splice the image into 5 leaving the outside images and the centre as fixed cell lengths and then leaving the two other sections variable, but that didnt work.

Cant really think of any other way of doing this. Suppose it would be better to redesign the banner but seeing at it was a corporate identity and it took me 2 days to design and develope, i am reluctant to :-(

back to drawing board.

Giles

[jont]

Designing is one thing, making it work on the internet is another.. number of times web designers get briefs from design companies that are not workable is incredible.

You need to design to the minimum resolution you know users will view the page and then adopt the logo / banner to suit... take a look at Jo's surf wax site www. surf-wax .co .uk and you will see the split banner in effect. This was originally done but tables but is now in CSS and is a good example of how the effect works.

[Taz]

Jont

Your a star, thanks for your help and comments, i have managed to get it tweaked and now works perfectly on homepage and also catalog files.

Its not 100% as good as the original one but its as good as... so am happy...

Thanks again Jont, very much appreciated.

Giles

[jont]

Glad you got it working.