From: Gus Richter on
On 1/26/2010 1:04 AM, Ray wrote:
> Update:
>
> Have tested Osmo's code in various page positions (floated and
> aligned) and the little bird stays on the image.
>
> Of the two codes supplied that work I prefer the bird on a complete
> background image.
>
> Would still like to see if Jukka can get his version working properly.
>
> Cheers
> Ray

It works for me.
Maybe provide how you're using it and state how it fails for you?

--
Gus

From: Ray on
G'day Gus,

Just add body {text-align:center} to Jukka's code and you will see one
way it fails.

>>Can this be done using CSS so the image can be positioned/aligned
anywhere on a page?

I am sure you can modify the code to suit each type of positioning but
can the code be made to work in all situations like the other two
examples?

Cheers
Ray
From: Gus Richter on
On 1/26/2010 8:34 AM, Ray wrote:
> G'day Gus,
>
> Just add body {text-align:center} to Jukka's code and you will see one
> way it fails.
>
>>> Can this be done using CSS so the image can be positioned/aligned
> anywhere on a page?
>
> I am sure you can modify the code to suit each type of positioning but
> can the code be made to work in all situations like the other two
> examples?
>
> Cheers
> Ray

Add display:inline-block; to #anim to recapture the bird, however,
only recent browsers support inline-block so I'll remove this method
from the preferred list in those cases.

--
Gus

From: jeff on
Ray wrote:
> G'day Gus,
>
> Just add body {text-align:center} to Jukka's code and you will see one
> way it fails.

Sometimes it helps if you know what you are doing rather than just
copying something.

The "anim" container has no width set, so it is 100%. Either set a
width equal to the image width, or set up the image so it is not inline
(and subject to text-align) as I had outlined previously. Or both.

Look up absolutely positioning.

Jeff
>
>>> Can this be done using CSS so the image can be positioned/aligned
> anywhere on a page?
>
> I am sure you can modify the code to suit each type of positioning but
> can the code be made to work in all situations like the other two
> examples?
>
> Cheers
> Ray
From: Ray on
G'day Jeff,
Thanks for your reply.

So it was Jukka's code that needed debugging.

> Sometimes it helps if you know what you are doing rather than just
> copying something.

Not many people have the time to fully learn the very complicated
intricacies of CSS. That's why we come to sites like this. There is at
least 3 totally different ways to do this using CSS. None of them are
basic methods.

Thanks for everyone's help. Appreciated very much.

Cheers
Ray