Prev: What did purecssmenus.com not do?
Next: I'm ba'ack! --tagSoup and all -- got what I want
From: Ray on 25 Jan 2010 00:53
G'day all,

Thanks to everyone who has helped. The solution was supplied
privately.
Jukka's code didn't work. When the image was aligned in different
positions on a page the little bird kept escaping and flew all over
the place :)

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

Here is the new code:

#bird{
padding: 0;
background-image: url('../wildflowers/kangaroo_paws/300/
kangaroo_paw.jpg');
background-repeat: no-repeat;
height: 233px;
width: 300px;
}
#birdanim{
float: left;
padding: 0;
margin: 148px 0 0 34px;
}

<div id="bird">
<img id="birdanim" src="../wildflowers/kangaroo_paws/300/bird.gif"
alt="animated bird" width="51" height="45">
</div>

The bird stays on the image no matter where I put it.

http://www.gdaywa.com/paw/test2.php

The code is now much cleaner using CSS and best of all when the page
is declared a HTML 5 doctype the image does not break apart.
Now I can get back to converting my site to HTML 5.

Cheers everyone
Ray



From: Jukka K. Korpela on 25 Jan 2010 11:48
Ray wrote:

> Jukka's code didn't work.

Of course it works. You just need to understand CSS and HTML well enough to
use the technique in different contexts.

> When the image was aligned in different
> positions on a page the little bird kept escaping and flew all over
> the place :)

Then you did something wrong in using the technique. As you didn't post a
URL of your attempt, I don't need to say that I'm not particularly
interested in debugging your code.

> background-image: url('../wildflowers/kangaroo_paws/300/
> kangaroo_paw.jpg');

Using background image for something that is clearly meant to be essential
content is abuse of CSS and quite unnecessary. And it makes the content
disappear in browsing situations where background images are displayed. I
don't think many people would want to print your page, but still, why make
them get a print containing just a frame of the animated GIF, not the big
picture?

> Now I can get back to converting my site to HTML 5.

So it looks like you found a new dimension in the absurd idea of converting
existing pages.

HTML 5 is an unstable draft (or sketch of a draft) at best. I'll save you
from the reality of its true essence.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

From: Osmo Saarikumpu on 25 Jan 2010 12:19
Gus Richter kirjoitti:
> For the exercise you have undertaken at:
> <http://weppipakki.com/temp/kpat.htm>
> there are a few points I have:

As I pointed out, I did not have facilities to pursue the issue further
at the time. It was meant to be a draft, serving as a pointer to the OP.

> Here is a simpified version:

Nice, but note that the animated image is a gif.

Well, I guess you didn't spoil anything, as Ray did not give me
permission to use it as an exercise. We might as well simplify it
further taking note of the points you made:

http://weppipakki.com/temp/kpat2.htm

Seems OK in IE8 and FF 3.5. I have only those at hand at the moment.

--
Best wishes,
Osmo
From: Ray on 25 Jan 2010 17:43
On Jan 26, 1:19 am, Osmo Saarikumpu <o...(a)weppipakki.com> wrote:
> Gus Richter kirjoitti:
>
> > For the exercise you have undertaken at:
> > <http://weppipakki.com/temp/kpat.htm>
> > there are a few points I have:
>
> As I pointed out, I did not have facilities to pursue the issue further
> at the time. It was meant to be a draft, serving as a pointer to the OP.
>
> > Here is a simpified version:
>
> Nice, but note that the animated image is a gif.
>
> Well, I guess you didn't spoil anything, as Ray did not give me
> permission to use it as an exercise. We might as well simplify it
> further taking note of the points you made:
>
> http://weppipakki.com/temp/kpat2.htm
>
> Seems OK in IE8 and FF 3.5. I have only those at hand at the moment.
>
> --
> Best wishes,
> Osmo

G'day Osmo,

you are welcome to use the images and code.

Your last example works fine and nicely coded. I did not test it in
different positions.
It is interesting to see the many various solutions that CSS offers.

Cheers
Ray
From: Ray on 26 Jan 2010 01:04
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
First  |  Prev  |  Next  |  Last
Pages: 1 2 3 4 5
Prev: What did purecssmenus.com not do?
Next: I'm ba'ack! --tagSoup and all -- got what I want