PDA

View Full Version : page is liquid, including a jpg??

loki
10-01-2006, 12:38/12:38PM
i haven't noticed this before

eurotefl.com

the page is liquid, including the image (the photo of the building façade) at the top

(i'm using FF 1.5)

what is this new trickery?
Blue
10-01-2006, 13:11/01:11PM
What do you mean by "liquid"?
WebSavvy
10-01-2006, 13:12/01:12PM
Yep, loki. That can be done using CSS. If you set sizes to em Vs using px or pt or % -- when user resizes the page font the photo will be resized too.

Example:

In the CSS file ->

.photos {
background:url("/path/to/image/building.jpg");
height:5em;
width:5em;
}

.photos IMG {
border:0;
}


Then in the page put:
<div class="photos"></div>
This will put your photo in that spot and when the user resizes fonts the photo will be made larger/smaller based on the user settings.

Not sure if that's what you're asking about or not ... ???

Convert the size of the image to em by dividing by 16.
WebSavvy
10-01-2006, 13:26/01:26PM
Never mind. Just looked at the page. They are using XHTML and div tags, but photo resizing is done through JS and the classes are called through CSS.

That page takes a long time to load.
loki
10-01-2006, 14:10/02:10PM
thanks deb.

it's a fine trick.

sadly one less reason for me to not do liquid designs.

blue,
i'm trying to describe the effect whereby you can resize the window and the jpg shows more or less width to fit the resized window exactly. (not sure that's any clearer!)

is that not liquid design?
polarmate
10-01-2006, 14:33/02:33PM
blue,
i'm trying to describe the effect whereby you can resize the window and the jpg shows more or less width to fit the resized window exactly. (not sure that's any clearer!)
FF has an option in the Tools | Advanced tab where you can select whether or not you want 'large images to be resized so that they fit in the browser window'.

Are you talking about this? I haven't really looked at the code behind the site you refer to.
loki
10-01-2006, 14:41/02:41PM
FF has an option in the Tools | Advanced tab where you can select whether or not you want 'large images to be resized so that they fit in the browser window'.

Are you talking about this? I haven't really looked at the code behind the site you refer to.

no, it happens in IE too.

if you load the page, then drag the window in and out, you'll see that the photo displays proportionally to the window size.
polarmate
10-01-2006, 14:50/02:50PM
IE has that setting, too - Tools | Internet Options | Advanced tab | Multimedia - Enable Automatic Image resizing.

Turn this setting off in both IE and FF and then you'll be able to tell whether this is browser behavior or if it is some code that is doing this on the web site.

I took a quick look at the web site you referred to and I saw a slideshow at the top. The images don't get resized (for me) - the image is exposed only to the extent of the width of the window and there is no scrollbar. That is because the width of the container is probably set to 100% or auto.
Connie
10-01-2006, 15:02/03:02PM
The images are not resizing for me either.
loki
10-01-2006, 15:21/03:21PM
the image doesn't resize.

you see the appropriate width of the image for the window size.

(try resizing your window and watch how much of the image you can see.)

(slideshow? i don't get that in ff or ie.)
polarmate
10-01-2006, 18:01/06:01PM
There is a flash file at the top. If you don't use flash or have adblocked the swf then there is a js that switches the images every 4 seconds or so.
var SlideShowSpeed = 4000;
var CrossFadeDuration = 3;
var Picture = new Array(); // don't change this
Picture[1] = 'picts/main.jpg';
Picture[2] = 'picts/headertop2.jpg';
Picture[3] = 'picts/headertop3.jpg';
Picture[4] = 'picts/headertop60.jpg';
Picture[5] = 'picts/headertop7.jpg';
Picture[6] = 'picts/headertop10.jpg';
...and so on
and
<body onload="runSlideShow()">
If you don't allow js, then you will see just the first image.

How much of the image you can see is determined by the width of the container div (slideimg) for the image - which is set to 100%. This takes on the width of its parent, which is auto - which takes on the width of the window.

If the width of the image is less than the width of the window, that extra part of the image is not displayed.