conditional property values

[viza]

Hi!

I am looking for a way to make an image resize down if there isn't enough
space, but not up.

ie, I have <div id=1>blah</div><div id=2><img id=i></div><div
id=3>blah</div>

#1,#3 {
width:35%
}
#2 {
width:30%
}

This fits fine.

I want if #2 is smaller than the pixel size of #i, #i is resized to fit
(like #i {width:100%}), but if the width of #2 is equal or greater, then it
sits in the middle, like #2{text-align:center} #i{width:auto}.

How can I do this so it works in IE 5+? The canonical answer would be to
set max-width to the pixel size, but IE can't do it.

No javascript unless it degrades gracefully please.

Thanks
Tom V

[Brian]

Re: conditional property values

viza wrote:[color=blue]
>
>
> I am looking for a way to make an image resize down if there isn't enough
> space, but not up.
>
> ie, I have <div id=1>blah</div><div id=2><img id=i></div><div
> id=3>blah</div>
>
> #1,#3 {
> width:35%
> }
> #2 {
> width:30%
> }
>
> This fits fine.[/color]

Fit how? Are you positioning these divs in one horizontal row? A url
to the actual problem -- or a test case thereof -- would be helpful.
[color=blue]
> I want if #2 is smaller than the pixel size of #i, #i is resized to fit
> (like #i {width:100%}),[/color]

Have you tried that? Seems like it should work exactly as you want
it. Don't set a width in the html, set it in the css. But YMMV.
[color=blue]
> but if the width of #2 is equal or greater, then it
> sits in the middle, like #2{text-align:center} #i{width:auto}.[/color]

Again, this appears fine. Img is inline (unless you float it or
otherwise change its display). So text-align should center it.
[color=blue]
> How can I do this so it works in IE 5+? The canonical answer would be to
> set max-width to the pixel size, but IE can't do it.[/color]

This sounds like you know the width of the image, that it won't
change. If so, can't you simply set the width of div#2 accordingly?

--
Brian
follow the directions in my address to email me

[viza]

Re: conditional property values

Hi!

From: Brian[color=blue]
> viza wrote:[color=green]
> > I am looking for a way to make an image resize down if there isn't[/color][/color]
enough[color=blue][color=green]
> > space, but not up.
> >
> > ie, I have <div id=1>blah</div><div id=2><img id=i></div><div
> > id=3>blah</div>
> >
> > #1,#3 {
> > width:35%
> > }
> > #2 {
> > width:30%
> > }
> >
> > This fits fine.[/color]
>
> Fit how? Are you positioning these divs in one horizontal row?[/color]

yes
[color=blue][color=green]
> > I want if #2 is smaller than the pixel size of #i, #i is resized to fit
> > (like #i {width:100%}),[/color]
>
> Have you tried that? Seems like it should work exactly as you want
> it. Don't set a width in the html, set it in the css. But YMMV.
>[color=green]
> > but if the width of #2 is equal or greater, then it
> > sits in the middle, like #2{text-align:center} #i{width:auto}.[/color]
>
> Again, this appears fine. Img is inline (unless you float it or
> otherwise change its display). So text-align should center it.[/color]

Yes, but I want to do both of these things at the same time.
[color=blue][color=green]
> > How can I do this so it works in IE 5+? The canonical answer would be[/color][/color]
to[color=blue][color=green]
> > set max-width to the pixel size, but IE can't do it.[/color]
>
> This sounds like you know the width of the image, that it won't
> change. If so, can't you simply set the width of div#2 accordingly?[/color]

The image size is constant, but div#2 can vary based on the screen
resolution.

Divs 1 & 3 contain links in the two corners, (client wants it this way - it
does make sense) and img#i is the main logo on the page. I have an image
file, which I want to shrink into the gap on low resolutions (it's only a
problem on 640*480, <1% of visitors), but I don't want the image to get
resized up, because it will look blurry/pixelated.

Thanks for the help.

Tom V

[viza]

Re: conditional property values

Hi!

From: viza[color=blue]
> From: Brian[color=green]
> > viza wrote:[color=darkred]
> > > I am looking for a way to make an image resize down if there isn't[/color][/color]
> enough[color=green][color=darkred]
> > > space, but not up.
> > >
> > > ie, I have <div id=1>blah</div><div id=2><img id=i></div><div
> > > id=3>blah</div>
> > >
> > > #1,#3 {
> > > width:35%
> > > }
> > > #2 {
> > > width:30%
> > > }
> > >
> > > This fits fine.[/color]
> >
> > Fit how? Are you positioning these divs in one horizontal row?[/color]
>
> yes
>[color=green][color=darkred]
> > > I want if #2 is smaller than the pixel size of #i, #i is resized to[/color][/color][/color]
fit[color=blue][color=green][color=darkred]
> > > (like #i {width:100%}),[/color]
> >
> > Have you tried that? Seems like it should work exactly as you want
> > it. Don't set a width in the html, set it in the css. But YMMV.
> >[color=darkred]
> > > but if the width of #2 is equal or greater, then it
> > > sits in the middle, like #2{text-align:center} #i{width:auto}.[/color]
> >
> > Again, this appears fine. Img is inline (unless you float it or
> > otherwise change its display). So text-align should center it.[/color]
>
> Yes, but I want to do both of these things at the same time.
>[color=green][color=darkred]
> > > How can I do this so it works in IE 5+? The canonical answer would be[/color][/color]
> to[color=green][color=darkred]
> > > set max-width to the pixel size, but IE can't do it.[/color]
> >
> > This sounds like you know the width of the image, that it won't
> > change. If so, can't you simply set the width of div#2 accordingly?[/color]
>
> The image size is constant, but div#2 can vary based on the screen
> resolution.
>
> Divs 1 & 3 contain links in the two corners, (client wants it this way -[/color]
it[color=blue]
> does make sense) and img#i is the main logo on the page. I have an image
> file, which I want to shrink into the gap on low resolutions (it's only a
> problem on 640*480, <1% of visitors), but I don't want the image to get
> resized up, because it will look blurry/pixelated.[/color]

Example:

http://www.touchwoodfurniture.co.uk/newsite/

div#oak and div#oakul are div#1, div#pine and div#pineul are div#3, and
div#h1 is div#3.

Still very much under construction.
Have only been testing this today in IE5, so I have no idea what it will do
in Moz or IE6!

Thanks for the help.

Tom V

[Brian]

Re: conditional property values

viza wrote:[color=blue]
>
> Example:
> http://www.touchwoodfurniture.co.uk/newsite/
> div#oak and div#oakul are div#1, div#pine and div#pineul are div#3, and
> div#h1 is div#3.[/color]

simplify this a bit.

http://www-unix.oit.umass.edu/~btrembla/test/test2/furniture/

--
Brian
follow the directions in my address to email me

[viza]

Re: conditional property values

Hi!

and then Brian said:[color=blue]
> viza wrote:[color=green]
>> http://www.touchwoodfurniture.co.uk/newsite/
>> div#oak and div#oakul are div#1, div#pine and div#pineul are div#3, and
>> div#h1 is div#3.[/color]
>
> simplify this a bit.
> http://www-unix.oit.umass.edu/~btrem...st2/furniture/[/color]

Thanks. That's very similar to what I had, but the problem is that the
thing expands - I wanted to limit it to 100px-ish at the top, absolutely
positioned in the top margin of the body. I'm going to use server-side
browser detection to use position:fixed for Moz or Opera and set it to
position:absolu te and use

window.onscroll =function position_fixed( ){
document.getEle mentById('links ').style.top=do cument.body.scr ollTop
}

for IE 5+.

I realise that from reading this group for ages before I was doing this for
a job, that I'm going about it the wrong way, but the manager wants
something on the page all the time, and I can't use frames. (I might use a
checkbox to left people turn it off). The problem is that if the page gets
narower the contents expands down, and I can't have the fixed box covering
most of the screen. Alternatively I can't use overflow:hidden either
because I'll lose the bottom links. I had six visitors in the last 2000 at
640*480, where this is a problem.

One idea I just had is to serve a position:static version, and then if
javascript is present and works, then change it to fixed or absolute based
on the browser and if the resolution is high enough.

[Brian]

Re: conditional property values

viza wrote:[color=blue]
>[color=green][color=darkred]
>>> http://www.touchwoodfurniture.co.uk/newsite/ div#oak and
>>> div#oakul are div#1, div#pine and div#pineul are div#3, and
>>> div#h1 is div#3.[/color]
>>
>> simplify this a bit.
>> http://www-unix.oit.umass.edu/~btrem...st2/furniture/[/color]
>
> That's very similar to what I had, but the problem is that the
> thing expands -[/color]

Expands? You can set the top margin of h1 to 0 to make it smaller.

I wanted to limit it to 100px-ish at the top,

But you have text links there. How can you be sure the link lists
will fit in 100px? And if they don't?
[color=blue]
> I'm going to use server-side browser detection[/color]

Unreliable. Fraught with problems. Consider proxy servers as just one.
[color=blue]
> to use position:fixed for Moz or Opera and set it to
> position:absolu te and use[/color]

heading {position: absolute }
body>heading {position: fixed}

IE can't parse the 2nd statement, so it applies abs pos. Moz and
Opera can parse it, and apply pos fixed.
[color=blue]
> I realise that from reading this group for ages before I was doing
> this for a job, that I'm going about it the wrong way,[/color]

It seems so to me.
[color=blue]
> but the manager wants something on the page all the time, and I
> can't use frames. (I might use a checkbox to left people turn it
> off).[/color]

Alternate stylesheet with position: static, perhaps?
[color=blue]
> The problem is that if the page gets narower the contents expands
> down, and I can't have the fixed box covering most of the screen.[/color]

Abs or fixed elements are taken out of the document flow; narrow
window or not, they won't affect the placement of other elements on
the page.
[color=blue]
> I had six visitors in the last 2000 at 640*480, where this is a
> problem.[/color]

Perhaps. But who will your visitors be in the next 3 years?

--
Brian
follow the directions in my address to email me