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  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 ,
 Chris Davies  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@bowser.marioworld>,
 Ben C  wrote:

> On 2009-09-19, 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.)
> >
...

> 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  wrote:
> In article <slrnhbaj2n.3g8.spamspam@bowser.marioworld>,
>  Ben C  wrote:
>
>> On 2009-09-19, 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.)
>> >
> ...
>
>> 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  wrote:
> In article ,
>  Chris Davies  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@bowser.marioworld>,
 Ben C  wrote:

> On 2009-09-19, dorayme  wrote:
> > In article ,
> >  Chris Davies  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  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 ,
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