Stretchy images with CSS layout

This is doing my head in. I'm trying to get my head around CSS, and
I reckon I'm doing fairly well so far. I have the following layout
successfully built as a prototype, using a table layout structure, but I
understand that I should really be considering CSS based layouts. (Content
vs presentation, and all that.)

Variations of this type of problem appear to be FAQs (with answers),
but I can't find anything that helps me solve this particular thorn.

So. Consider a fluid layout.

In the top left hand corner I have a fixed size logo (brand identifer). To
its immediate right I have a fixed size slot for a self-promoting
advertisement (i.e. visual hook to part of this website). To its right
want to fill the remainder of the space until the right-hand edge of the
browser window with a stretchable image. This stretchable image should
be as wide as necessary, but should remain at its known fixed height.

Now for the vertical furniture. Starting with the logo in the top
left hand corner, below that I want a panel that will contain context
sensitive shortcuts. Below that I would like a image that will stretch
into the remainder of the vertical space until it's level with the end
of the main content. This stretchy image should be a known fixed width.

In case it's not obvious, the per-page content will go into the available
remainder of the space.

Oh. Neither of the stretchy images can be handled with a repeating image;
if you like you can imagine it as a gradual fade between the prinicpal
colour associated with the fixed images and their complementary, along
with some swirly stuff to break the boredom.

I hate to post here, but despite a fairly big effort (several hours
digging through tutorials, FAQs, etc.), I cannot find anything that
actually satisfies my requirement. Clues, pointers, and solutions all
gratefully received.

Cheers,
Chris

Chris Davies wrote:

This is doing my head in. I'm trying to get my head around CSS, and
I reckon I'm doing fairly well so far. I have the following layout
successfully built as a prototype, using a table layout structure, but I
understand that I should really be considering CSS based layouts. (Content
vs presentation, and all that.)

Variations of this type of problem appear to be FAQs (with answers),
but I can't find anything that helps me solve this particular thorn.

So. Consider a fluid layout.

In the top left hand corner I have a fixed size logo (brand identifer). To
its immediate right I have a fixed size slot for a self-promoting
advertisement (i.e. visual hook to part of this website). To its right
want to fill the remainder of the space until the right-hand edge of the
browser window with a stretchable image. This stretchable image should
be as wide as necessary, but should remain at its known fixed height.

Now for the vertical furniture. Starting with the logo in the top
left hand corner, below that I want a panel that will contain context
sensitive shortcuts. Below that I would like a image that will stretch
into the remainder of the vertical space until it's level with the end
of the main content. This stretchy image should be a known fixed width.

In case it's not obvious, the per-page content will go into the available
remainder of the space.

Oh. Neither of the stretchy images can be handled with a repeating image;
if you like you can imagine it as a gradual fade between the prinicpal
colour associated with the fixed images and their complementary, along
with some swirly stuff to break the boredom.

I hate to post here, but despite a fairly big effort (several hours
digging through tutorials, FAQs, etc.), I cannot find anything that
actually satisfies my requirement. Clues, pointers, and solutions all
gratefully received.

Cheers,
Chris

Get a copy of TopStyle 4 http://www.topstyle4.com/ It will force you to do
things correctly.

Plus, it has a neat capture feature which enables you download a webpage you
would like to emulate, complete with css file in most cases. Then you can use it
as a template for your own page. And, you see how other do it.

On 2009-09-19, Chris Davies <chris-usenet (AT) roaima (DOT) co.uk> wrote:

This is doing my head in. I'm trying to get my head around CSS, and
I reckon I'm doing fairly well so far. I have the following layout
successfully built as a prototype, using a table layout structure, but I
understand that I should really be considering CSS based layouts. (Content
vs presentation, and all that.)

Variations of this type of problem appear to be FAQs (with answers),
but I can't find anything that helps me solve this particular thorn.

So. Consider a fluid layout.

In the top left hand corner I have a fixed size logo (brand identifer). To
its immediate right I have a fixed size slot for a self-promoting
advertisement (i.e. visual hook to part of this website). To its right
want to fill the remainder of the space until the right-hand edge of the
browser window with a stretchable image. This stretchable image should
be as wide as necessary, but should remain at its known fixed height.

Now for the vertical furniture. Starting with the logo in the top
left hand corner, below that I want a panel that will contain context
sensitive shortcuts. Below that I would like a image that will stretch
into the remainder of the vertical space until it's level with the end
of the main content. This stretchy image should be a known fixed width.

In case it's not obvious, the per-page content will go into the available
remainder of the space.

Oh. Neither of the stretchy images can be handled with a repeating image;
if you like you can imagine it as a gradual fade between the prinicpal
colour associated with the fixed images and their complementary, along
with some swirly stuff to break the boredom.

I hate to post here, but despite a fairly big effort (several hours
digging through tutorials, FAQs, etc.), I cannot find anything that
actually satisfies my requirement. Clues, pointers, and solutions all
gratefully received.

It doesn't sound like it should be too difficult.

Here are some clues and pointers:

1. You can't stretch background images, so will have to use ordinary
imgs.
2. If you want to stretch an image in one direction but not the other,
you need to set both width and height (or enough out of
top/left/bottom/right, if the img is absolutely positioned, to fix
the width and height).
3. Percentage widths and heights on an element only work if the width or
height of its container respectively doesn't depend on it.
4. Note that container's widths and heights never depend on the
dimensions of their absolutely positioned descendents.

Absolutely positioned imgs may be the solution here. Set position:
relative on the normal flow blocks in the layout you need to use as
reference points for the imgs and set whichever are most convenient out
of top, left, bottom, right, width and height on the imgs to fit them
in.

In article <iidfo6x2ht.ln2 (AT) news (DOT) roaima.co.uk>,
Chris Davies <chris-usenet (AT) roaima (DOT) co.uk> wrote:

In the top left hand corner I have a fixed size logo (brand identifer). To
its immediate right I have a fixed size slot for a self-promoting
advertisement (i.e. visual hook to part of this website). To its right
want to fill the remainder of the space until the right-hand edge of the
browser window with a stretchable image. This stretchable image should
be as wide as necessary, but should remain at its known fixed height.

You can't easily make this third stretchable image an IMG element
because the browser cannot know from the HTML and any CSS what
percentage width of a users browser is left for it after the logo and
ad. You obviously can specify the width of the logo and ad but how would
you say about the image to be stretched? 100% is no good, because that
would be 100% of whatever was the container. If the container to the
three images was a DIV, this latter is by default, assuming no margins,
padding or borders, 100% of BODY which is usually or can easily be made
as wide as the viewport. But what we want is 100% of what is left after
the logo and ad. You could use javascript.

Oh. Neither of the stretchy images can be handled with a repeating image;
if you like you can imagine it as a gradual fade between the prinicpal
colour associated with the fixed images and their complementary, along
with some swirly stuff to break the boredom.

I hate to post here,

Do you now! Please forgive me for replying, I hope it does not deepen
your hatred. <g>

It sounds to me that repeating background image is really just what
might do you. But it needs to be made well, it needs to be positioned
right. Before going on, how about supply a URL with images and stuff
(perhaps your best shot at the HTML and CSS)?

--
dorayme

In article <slrnhbaj2n.3g8.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2009-09-19, Chris Davies <chris-usenet (AT) roaima (DOT) co.uk> wrote:
This is doing my head in. I'm trying to get my head around CSS, and
I reckon I'm doing fairly well so far. I have the following layout
successfully built as a prototype, using a table layout structure, but I
understand that I should really be considering CSS based layouts. (Content
vs presentation, and all that.)

....

Absolutely positioned imgs may be the solution here. Set position:
relative on the normal flow blocks in the layout you need to use as
reference points for the imgs and set whichever are most convenient out
of top, left, bottom, right, width and height on the imgs to fit them
in.

I could not quickly quite get it right positioning the images, but throw
in an extra abs DIV and let the img do a stretch in the usually reliable
way, seems to work:

<http://dorayme.netweaver.com.au/stretch.html>

--
dorayme

On 2009-09-20, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <slrnhbaj2n.3g8.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2009-09-19, Chris Davies <chris-usenet (AT) roaima (DOT) co.uk> wrote:
This is doing my head in. I'm trying to get my head around CSS, and
I reckon I'm doing fairly well so far. I have the following layout
successfully built as a prototype, using a table layout structure, but I
understand that I should really be considering CSS based layouts. (Content
vs presentation, and all that.)

...

Absolutely positioned imgs may be the solution here. Set position:
relative on the normal flow blocks in the layout you need to use as
reference points for the imgs and set whichever are most convenient out
of top, left, bottom, right, width and height on the imgs to fit them
in.

I could not quickly quite get it right positioning the images, but throw
in an extra abs DIV and let the img do a stretch in the usually reliable
way, seems to work:

http://dorayme.netweaver.com.au/stretch.html

You're quite right, and what you have done is the best way to do it.

If you try to position an img by setting left and right, right gets
ignored in favour of a width that preserves aspect ratio. I had
forgotten that. So use a div and make the img 100% the width (and height
if necessary) of the div, as you have done.

On 2009-09-19, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <iidfo6x2ht.ln2 (AT) news (DOT) roaima.co.uk>,
Chris Davies <chris-usenet (AT) roaima (DOT) co.uk> wrote:

In the top left hand corner I have a fixed size logo (brand identifer). To
its immediate right I have a fixed size slot for a self-promoting
advertisement (i.e. visual hook to part of this website). To its right
want to fill the remainder of the space until the right-hand edge of the
browser window with a stretchable image. This stretchable image should
be as wide as necessary, but should remain at its known fixed height.

You can't easily make this third stretchable image an IMG element
because the browser cannot know from the HTML and any CSS what
percentage width of a users browser is left for it after the logo and
ad.

No, but we can use absolute positioning because we know the widths of
the logo and the ad slot. Suppose the width of those two is 400px. Then
we can have an abs pos div, left: 400px, right: 0, and some appropriate
height.

Then put the img in that div with width and height 100% on the img. No
need for Javascript.

In article <slrnhbbo8n.33j.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2009-09-19, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article <iidfo6x2ht.ln2 (AT) news (DOT) roaima.co.uk>,
Chris Davies <chris-usenet (AT) roaima (DOT) co.uk> wrote:

In the top left hand corner I have a fixed size logo (brand identifer). To
its immediate right I have a fixed size slot for a self-promoting
advertisement (i.e. visual hook to part of this website). To its right
want to fill the remainder of the space until the right-hand edge of the
browser window with a stretchable image. This stretchable image should
be as wide as necessary, but should remain at its known fixed height.

You can't easily make this third stretchable image an IMG element
because the browser cannot know from the HTML and any CSS what
percentage width of a users browser is left for it after the logo and
ad.

No, but we can use absolute positioning because we know the widths of
the logo and the ad slot. Suppose the width of those two is 400px. Then
we can have an abs pos div, left: 400px, right: 0, and some appropriate
height.

Then put the img in that div with width and height 100% on the img. No
need for Javascript.

Yes, as we have seen in a couple of our other posts. I did not think of
abs positioning till you mentioned it! But, as I said, I am not sure a
background image, no abs position needed, would not be exactly what was
useful for OP provided it was carefully made and set up. There are not
too many images that look that great actually stretched and some care
might be needed for this too. It is hard to say which is better until we
have more facts about what is being done. I like the idea of a non
stretched IMG "followed" by the repeat of its right hand elements in a
bg image. Providing the right hand element is something that actually
looks good repeated... clearly a plain colour would not be objectionable
but there are other things possible... rolling hills, clouds all sorts
of things that will not be in danger of then looking *distorted*. I
think (this para is getting pretty long - the spirit of cwdjrxyz has
entered me... <g>) that perhaps on balance, the IMG plus bg opens a
wider range of possibilities. But I am not going to die in a trench for
this.

--
dorayme

In uk.net.web.authoring dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

I could not quickly quite get it right positioning the images, but throw
in an extra abs DIV and let the img do a stretch in the usually reliable
way, seems to work:

http://dorayme.netweaver.com.au/stretch.html

This looks good to me, and pleasantly simple. Thank you very much.


In article <doraymeRidThis-584554.08512320092009 (AT) news (DOT) albasani.net>,
dorayme also wrote:

Before going on, how about supply a URL with images and stuff (perhaps
your best shot at the HTML and CSS)?

I would be happy to do this, but I'm not sure it's necessary right now:
you've helped me tremendously, thank you, and from my perspective I've
learned some more about CSS.

When I've moved on a little more and need some more help, I'll include
link to my then best efforts. I'm a usenet regular and it's a pleasure
to have been on the receiving end of advice.

Appreciated.
Chris

In uk.net.web.authoring Al Rider <news (AT) ridersite (DOT) org> wrote:

Get a copy of TopStyle 4 http://www.topstyle4.com/ It will force you
to do things correctly.

Thanks for the suggestion. I don't run Windows, though, so it's not
directly of any use to me. (I do have a VM for running IE, but I don't
particularly like working in it.)

Cheers,
Chris