help with design issue

[miro2021]

Hi,

Ive just started knocking up a rough idea for a website and need advice
as to whether the way I have designed the layout will work.

Basically as you can probably see from my mock up I want to create a
liquid design where the top part of the page is a table with 3 cells
across. The left and right cells I have made fixed width and each
contain just an image. The central cell is intended for the logo and I
would like the background of this cell to link up the two end images to
form a coherent whole. I have done this by making a background tile.
The whole thing is supposed to shrink or expand depending on the users
browser.

http://www.aquapower.uk.com/apr05/turtleskin.htm

The example is still extremely rough since I am trying to see whether
the solution is viable before spending time sizing and working on the
graphics properly. I intend the whole thing to be able to shrink
horizontally more than my sample to prevent scrolling on most monitors.

So my question is really whether this is a workable solution and if yes
some advice on it's successful implementation or issues I should
consider.(for example how can I ensure the background image in the
centre cell tiles across the whole cell and this cell expands as far as
possible while the two end cells remain the width of the contained
images no matter what.) Also if anyone knows a sucessful implementation
of this type of design please could you post the URL.

many thanks.

[RoseW]

I want to create a
liquid design where the top part of the page is a table with 3 cells
across. The central cell is intended for the logo and I
would like the background of this cell to link up the two end images to
form a coherent whole. ....http://www.aquapower.uk.com/apr05/turtleskin.htm

The three images in your code add up to 933 +- so it does not shrink to the
small resolution of 800*600. It expands, of course.
Why not create a graphic that includes all three elements as your logo and
have it be 759 wide?
There could be a gradient blur behind the logo words and blend the two
outside illustrations in.
This is a task that can be done in an image editor using layers.

RoseW

[miro2021]

I don't want a fixed width page - I want it to be liquid

thanks

[RoseW]

miro2021 wrote...about his site
http://www.aquapower.uk.com/apr05/turtleskin.htm
The whole thing is supposed to shrink or expand depending on the users
browser...<snip>.. I intend the whole thing to be able to shrink
horizontally more than my sample to prevent scrolling on most monitors.
-I don't want a fixed width page - I want it to be liquid
....
My original observation turned out to be true -('The three images in your
code add up to 933 +- so it does not shrink to the
small resolution of 800*600. ')
I copied your images- put all into one logo image of a 759 width. Put the
blue colour of the logo into the table background -cropped the logo
<table bgcolor="#dae8f6" width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="100%" align="center"><img src="testlogo.jpg" width="759"
height="181"></td>

Inserting this colour #dae8f6 had the whole page take on blue so nesting in
another <table> after the closed off </table> just after the row of gif
data (which needs alt"text" within the tags )

The page liquidly reduces to 800*600 with all features and no horizontal
scrolling....and expands to the larger resolutions with the logo centered.
The blue background allows the logo to have a blended look.
There are still a lot of viewers at 800*600 and they don't want to scroll
horizontally.
Play around with that logo and your page will be fine.

RoseW

[miro2021]

Would it be possible for you to upload your solution so i could view
it? Does the whole design expand and contract (i.e when viewing on
800*600 the two men will be closer together and on 1024*768 the whole
top of the page will 'spread out' liquidly and the two men will move
farther apart (to the edges of the browser)? I don't really want just a
fixed width header..
As i mentioned I intend the whole thing to be able to shrink
horizontally more than my sample to prevent scrolling on most monitors
but I won't spend time adjusting the graphics to fit until I have
solved how the whole thing is going to work...

thanks
Karen

[Kieran]

<mi******@yahoo.co.uk> wrote in message
news:11*********************@g47g2000cwa.googlegro ups.com...

Hi,

Ive just started knocking up a rough idea for a website and need advice
as to whether the way I have designed the layout will work.

Basically as you can probably see from my mock up I want to create a
liquid design where the top part of the page is a table with 3 cells
across. The left and right cells I have made fixed width and each
contain just an image. The central cell is intended for the logo and I
would like the background of this cell to link up the two end images to
form a coherent whole. I have done this by making a background tile.
The whole thing is supposed to shrink or expand depending on the users
browser.

http://www.aquapower.uk.com/apr05/turtleskin.htm

The example is still extremely rough since I am trying to see whether
the solution is viable before spending time sizing and working on the
graphics properly. I intend the whole thing to be able to shrink
horizontally more than my sample to prevent scrolling on most monitors.

So my question is really whether this is a workable solution and if yes
some advice on it's successful implementation or issues I should
consider.(for example how can I ensure the background image in the
centre cell tiles across the whole cell and this cell expands as far as
possible while the two end cells remain the width of the contained
images no matter what.) Also if anyone knows a sucessful implementation
of this type of design please could you post the URL.

many thanks.

I have a running example of this kind of thing going on with one of my
sites. It uses two table cells, but has that whole liquid feel about it.
Feel free to look at the source and the style code to see how I achieved it.

http://www.jazzandbluesyork.co.uk

Kieran

[RoseW]

The method used by the poster 'Kieran' for his jazz site at
http://www.jazzandbluesyork.co.uk does the moving apart and closer together
concept that you want.
Testing this out with your three images aligning left, center and right
.....and I left his padding amounts in...
I still had to reduce the overall size approx 80% of your three images ( men
at work images to be in the range of 228 to 233 wide) The three images and
space of padding still has to be under the total of 800 - (It is recommended
to be in the 759 range)
(I notice Kieran did not put the size for his images in his code so I tried
it with size out also....but I thought sizes were expected to be the
<td>for an image??? put width and size in and it was okay)
With the resizing and the alignment for each of the image td cells the top
banner slid in to the 800*600 size and whipped out to the largest size.

You will have to decide if the logo text is to be the dominant size i.e.
larger than the pictures or same as the pictures plus if you want padding or
not....I'm inclined to having faded edges so I would mask the edges of the
pictures to create a blending effect.
Anyway it looks good with this coming in together and then separating. I
learned something doing this investigation.

RoseW
Hanover,Ontario,Canada

[miro2021]

Thanks
Yes - that's the idea I'm after! except I plan to have a picture at
each side in a cell and a tiling background in the centre cell to
visually join them...

So I suppose what I really need to know is what the best, most browser
compatible way is of using a background image to tile a cell or whether
for example using an oversized image as the cell background would be
better..

many thanks
Karen

[miro2021]

Yes so my original example is basically on the right lines apart from
the sizing which I'm not concerned with at this stage

What i still need to resolve is the best, reliable, most
browser-compatible method for the background of the centre table cell -
whether to tile it (using html or CSS) or to use an outsized image
which will cover the highest resolution but take longer to download..

also the best code to make sure the two end cells stay fixed at the
width of the graphic contained inside but the centre cell stretches to
fit the remaining space - At the moment I have done this by specifying
the two end cell width attribute in exact pixels and the centre one as
99% and am looking for an expert to tell me whether this method is
browser compatible..