How to autoadjust width of a banner image ?

[Yohann L.]

Hello. I would like to have an horizontal banner which autoadjust its
width to 100% of the page width. So, I've sliced the image banner in
three parts, but don't find a way to do the middle one autoadjust.
Knbowing that this middle image can be horizontally distorded without
problem about aspect.

Here is my test page with a dummy banner :

http://yohannl.tripod.com/autoadjust_banner/banner.html

As you can see, here, the banner has a fixed width. How to do the middle
part autoadjust its width. Going through table, javascript, else... I
don't know...

Please, does anyone of you know how to do ?

[rf]

"Yohann L." <yo*****@invalid.onewrote in message
news:MP************************@news.tiscali.fr...

Here is my test page with a dummy banner :

http://yohannl.tripod.com/autoadjust_banner/banner.html

As you can see, here, the banner has a fixed width.

What banner? All I see is a bunch of ads.

Oh, you mean the coloured bit with the bit #.

If this is what your host does to your website then I would urgently look
for another host.

Get rid of the ads and then I may look at it.

--
Richard.

[Rik Wasmus]

On Wed, 05 Dec 2007 12:01:17 +0100, Yohann L. <yo*****@invalid.onewrote:

Hello. I would like to have an horizontal banner which autoadjust its
width to 100% of the page width. So, I've sliced the image banner in
three parts, but don't find a way to do the middle one autoadjust.
Knbowing that this middle image can be horizontally distorded without
problem about aspect.

Here is my test page with a dummy banner :

http://yohannl.tripod.com/autoadjust_banner/banner.html

As you can see, here, the banner has a fixed width. How to do the middle
part autoadjust its width. Going through table, javascript, else... I
don't know...

Please, does anyone of you know how to do ?

Float the fixed size images left and right, set a repeat-x background of
the middle portion on a containing div, or just a block level div/element
with margins left and right exactly equal to the width of the images.

http://rwasmus.nl/banner/

You might want to set a min-width, as the right image would drop below the
'banner' on a screen narrower then the combined widths of the images.
--
Rik Wasmus

[Yohann L.]

In article <D5******************@news-server.bigpond.net.au>,
[e-mail] says...

What banner? All I see is a bunch of ads.

Oh, you mean the coloured bit with the bit #.

If this is what your host does to your website then I would urgently look
for another host.

Get rid of the ads and then I may look at it.

As indicating in my first post, this page is just for test. So, i't not
my regular host and just a dummy banner in this test page.

And technically, about my question, do you have an idea ?

[Yohann L.]

In article <op***************@metallium.lan>, lu************@hotmail.com
says...

Float the fixed size images left and right, set a repeat-x background of
the middle portion on a containing div, or just a block level div/element
with margins left and right exactly equal to the width of the images.

http://rwasmus.nl/banner/

You might want to set a min-width, as the right image would drop below the
'banner' on a screen narrower then the combined widths of the images.

Waow, thanks a lot, Rik. Not understand in detail yet, and I have to go
away, but I'll be back... :)

[Rik Wasmus]

On Wed, 05 Dec 2007 12:45:42 +0100, Rik Wasmus
<lu************@hotmail.comwrote:

On Wed, 05 Dec 2007 12:01:17 +0100, Yohann L. <yo*****@invalid.one>
wrote:

>Hello. I would like to have an horizontal banner which autoadjust its
width to 100% of the page width. So, I've sliced the image banner in
three parts, but don't find a way to do the middle one autoadjust.
Knbowing that this middle image can be horizontally distorded without
problem about aspect.

Here is my test page with a dummy banner :

http://yohannl.tripod.com/autoadjust_banner/banner.html

As you can see, here, the banner has a fixed width. How to do the middle
part autoadjust its width. Going through table, javascript, else... I
don't know...

Please, does anyone of you know how to do ?

Float the fixed size images left and right, set a repeat-x background of
the middle portion on a containing div, or just a block level
div/element with margins left and right exactly equal to the width of
the images.

http://rwasmus.nl/banner/

You might want to set a min-width, as the right image would drop below
the 'banner' on a screen narrower then the combined widths of the images.

BTW: you do know gif is dreadfull right? Use png if you can, maybe jpeg,
only use gifs it you want transparancy in MSIE < 7.
--
Rik Wasmus

[rf]

"Rik Wasmus" <lu************@hotmail.comwrote in message
news:op***************@metallium.lan...

On Wed, 05 Dec 2007 12:45:42 +0100, Rik Wasmus
<lu************@hotmail.comwrote:

BTW: you do know gif is dreadfull right? Use png if you can, maybe jpeg,
only use gifs it you want transparancy in MSIE < 7.

On what evidence to you base these statements?

--
Richard.

[Rik Wasmus]

On Wed, 05 Dec 2007 13:28:28 +0100, rf <[e-mail]:

"Rik Wasmus" <lu************@hotmail.comwrote in message
news:op***************@metallium.lan...

>On Wed, 05 Dec 2007 12:45:42 +0100, Rik Wasmus
<lu************@hotmail.comwrote:

>BTW: you do know gif is dreadfull right? Use png if you can, maybe jpeg,
only use gifs it you want transparancy in MSIE < 7.

On what evidence to you base these statements?

GIF: limited pallet, dithering, often bigger then jpg despite the terrible
loss in detail.
PNG: lossless, alpha-transparancy, often smaller then gif, to name but a
few.
JPG: not lossless, allthough quite a full pallet, smaller then PNG, but
can create artifacts.

Oh, 'animated' is also a reason to choose GIF ofcourse. Then again, I hate
animations :)

For more information, google is your friend.
--
Rik Wasmus

[Jonathan N. Little]

Rik Wasmus wrote:

On Wed, 05 Dec 2007 13:28:28 +0100, rf <[e-mail]:

>"Rik Wasmus" <lu************@hotmail.comwrote in message
news:op***************@metallium.lan...

>>On Wed, 05 Dec 2007 12:45:42 +0100, Rik Wasmus
<lu************@hotmail.comwrote:

>>BTW: you do know gif is dreadfull right? Use png if you can, maybe jpeg,
only use gifs it you want transparancy in MSIE < 7.

On what evidence to you base these statements?

GIF: limited pallet, dithering, often bigger then jpg despite the
terrible loss in detail.

I would to above GIF will have such effect if the source is
"photographic" in nature. The lossy compression distortion of the image
with JPG format is less noticeable to the human eye than the the
dithering in color reduction with GIF. On the other hand for hard-edge
limited color graphics, such as logos with text, this opposite is the
case. The GIF and palleted PNG shine maintaining a crisp look and lower
file size.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Yohann L.]

In article <op***************@metallium.lan>, lu************@hotmail.com
says...

Float the fixed size images left and right, set a repeat-x background of
the middle portion on a containing div, or just a block level div/element
with margins left and right exactly equal to the width of the images.

http://rwasmus.nl/banner/

You might want to set a min-width, as the right image would drop below the
'banner' on a screen narrower then the combined widths of the images.

OK, done ! It works ! I've choosen the second method with middle part in
a div because I have better control about horizontal position.

Now, I just have to limit the page width.

Thanks again, Rik

[Bergamot]

Rik Wasmus wrote:

On Wed, 05 Dec 2007 13:28:28 +0100, rf <[e-mail]:

>"Rik Wasmus" <lu************@hotmail.comwrote in message
news:op***************@metallium.lan...

>>only use gifs it you want transparancy in MSIE < 7.

That's a common misconception.

>On what evidence to you base these statements?

GIF: limited pallet, dithering, often bigger then jpg despite the terrible
loss in detail.

Using gif for things like photos is silly. Use the right format for the
particular content.

PNG: lossless, alpha-transparancy, often smaller then gif, to name but a
few.

FYI, png does not have to use alpha transparency. Use an indexed (8-bit)
pallet and you'll get the same results as gif, with comparable or better
file sizes. A 32-bit png with alpha transparency can be quite weighty by
comparison. If your graphics editor doesn't give you a choice of
pallets, get a better editor.

BTW, I use png with indexed transparency all the time and IE has no
trouble with them whatsoever.

--
Berg