[thelist] re: liquid help

[Ken Wan]

J.

The only way I can think of is the following:

1. The top series of images need to be set up as individual pieces
(obviously).
2. Each image needs to be horizontally wider (approx. 2x)... in anticipation
of the wider screen width.
3. Each image needs to be chopped in such a way that the rounded part is
separate from the rest (you end up with both a rounded part and a
rectangular part).
4. The rounded parts need to be transparent gifs so that just the image
appears (the area to the left of the rounded edge is transparent).
5. The rectangular parts of the images need to be set as background images
for each cell of the table.
6. The rounded parts of the images need to be placed into each cell using an
<img> tag, aligned right, such that the round part is in the cell previous
to its corresponding rectangular part.
7. The table cells are all set using percentages (except for the very left
cell...were your logo is).

You'd have to play with this a while and see if it'll work. You might also
want a transparent spacer gif placed into each cell (to the left of the
curved part) to wedge open the table cells to a minimum width.

Hope this helps.

Ken
----------------------
Ken Wan
Internet Projects - Web Designer
ph: 604-938-2748
fax: 604.932.7231
Tourism Whistler
myWHISTLER.com, Official Site of Whistler

Whistler - Venue City for the 2010 Olympic Winter Games and Paralympic
Winter Games

On 9/4/03 5:03 PM, "thelist-request at lists.evolt.org"
<thelist-request at lists.evolt.org> wrote:

> Hiya
> 
> I'm happy with liquid design, I think, but I've always had a bit of
> trouble with how images work if the design is liquid.
> 
> Take a look at this: http://www.johnallsopp.co.uk/liquid/index.html.
> 
> The easy bit, the table, is liquid, but the images are rock solid because
> of the way I've done it.
> 
> Ideally, as the screen becomes smaller, the images should overlap more,
> except for the logo of course.
> 
> And I wonder, should I just build long lozenges of image so that no matter
> how much or how little they overlap there's never any gap, or can I find
> out what size people's screens are and use server side code (I'll be using
> Java/JSP here) to throw sufficient pics out to cover the area.
> 
> All ideas/opinions welcome.
> 
> Cheers
> J