From: Ray on
G'day all,

I have been trying to solve this CSS puzzle for years and keep
failing.

An image was sliced up in photoshop and an animated gif was placed in
the middle.
The image was put back together using html and tables.

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

Here is the test page with the image.
http://www.gdaywa.com/paw/test.php

Cheers
Ray

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Kangaroo Paw Animation Test</title>

<style type="text/css">
<!--
body {background-color: #333333;}
table.paw {
width: 300;
border:none;
border-collapse:collapse;
}
td {padding:0;}
-->
</style>
</head><body>
<table class="paw">
<tr>
<td colspan="3">
<img src="http://www.gdaywa.com/paw/top.jpg" width="300"
height="142" alt="" /></td>
</tr><tr>
<td rowspan="2">
<img src="http://www.gdaywa.com/paw/left.jpg" width="40" height="91"
alt="" /></td>
<td>
<img src="http://www.gdaywa.com/paw/bird.gif" width="51" height="45"
alt="" /></td>
<td rowspan="2">
<img src="http://www.gdaywa.com/paw/right.jpg" width="209"
height="91" alt="" /></td>
</tr><tr>
<td>
<img src="http://www.gdaywa.com/paw/bottom.jpg" width="51"
height="46" alt="" /></td>
</tr>
</table>

</body>
</html>
From: Jukka K. Korpela on
Ray wrote:

> I have been trying to solve this CSS puzzle for years

Why?

> An image was sliced up in photoshop and an animated gif was placed in
> the middle.
> The image was put back together using html and tables.

Why? Why didn't you just create a single animated gif? Or a single base
image and a small image containing the animated part, so that you could
position the animated part in the proper place?

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

Yes. If you tell me some good reason to do that or pay me some indecent
amount of money, or both, I might consider doing it for you.

If you already have HTML code that does what you want, why would you replace
it by something less reliable, like CSS (think about all the usual CSS
caveats)?

> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Bogosity detected.

> <style type="text/css">
> <!--

More bogosity, especially when XHTML is used. By XHTML rules, user agents
are allowed to remove comments inside style elements.

> width: 300;

Conforming user agents ignore that.

If you are doing this "puzzle" as a CSS exercise, consider learning the
elements of basics of CSS first.

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

From: Ray on
On Jan 24, 4:34 pm, "Jukka K. Korpela" <jkorp...(a)cs.tut.fi> wrote:
> Ray wrote:
> > I have been trying to solve this CSS puzzle for years
>
> Why?

First of all, after I got over the shock of your reply I had a good
laugh.

As to why. My site had too many tables and one by one they were
removed using CSS instead.
The main content is still laid out in a table but working on that.
The puzzle presented is positioned in a table, in a table! Not nice.
Over the years, as my experience with CSS grew more attempts were made
to rectify this but could not find the answer.

Here is the page the image is on.

http://www.gdaywa.com/wildflowers/kangaroo_paws.php

It works fine but would rather my site be table-less eventually.

> > An image was sliced up in photoshop and an animated gif was placed in
> > the middle.
> > The image was put back together using html and tables.
>
> Why? Why didn't you just create a single animated gif? Or a single base
> image and a small image containing the animated part, so that you could
> position the animated part in the proper place?

Why? I didn't know that was possible. In all the years of looking at
CSS sites and tutorials that technique has NEVER appeared.

> > Can this be done using CSS so the image can be positioned/aligned
> > anywhere on a page?
>
> Yes. If you tell me some good reason to do that or pay me some indecent
> amount of money, or both, I might consider doing it for you.

I can't afford to pay anyone anything. My site is a hobby and not
commercial.
If someone can point me in the right direction I will try to work it
out myself.
Would rather be working on the photographs and content than trying to
make the site work for all browsers and screen sizes.
Drives me crazy.

> If you already have HTML code that does what you want, why would you replace
> it by something less reliable, like CSS (think about all the usual CSS
> caveats)?

That makes a lot of sense. Tables work perfectly on everything.
Validates too.

>
> > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
>
> Bogosity detected.
>

Please explain.

> > <style type="text/css">
> > <!--
>
> More bogosity, especially when XHTML is used. By XHTML rules, user agents
> are allowed to remove comments inside style elements.

Thanks for the info. Didn't know that.

> > width: 300;
>
> Conforming user agents ignore that.

Will they ignore it if it was in a stylesheet instead?

> If you are doing this "puzzle" as a CSS exercise, consider learning the
> elements of basics of CSS first.

It is not an exercise to waste time. The basics are easy enough but I
don't consider this "puzzle" a basic CSS exercise.
If it was so easy you wouldn't be asking for money. Instead you would
HELP!

I came to this discussion group to learn, not be ridiculed by
experienced members.

Ray

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

From: Jukka K. Korpela on
Ray wrote:

> As to why. My site had too many tables and one by one they were
> removed using CSS instead.

That doesn't understand the "why" question. There is always someone who
rewrites working code, to speed it up or to clean it up, but telling that
you have done that for many pages does not answer the question but
multiplies it.

>> Why? Why didn't you just create a single animated gif? Or a single
>> base image and a small image containing the animated part, so that
>> you could position the animated part in the proper place?
>
> Why? I didn't know that was possible. In all the years of looking at
> CSS sites and tutorials that technique has NEVER appeared.

I guess you just didn't recognize the technique as suitable. Regarding to my
first question above (which you didn't answer), I guess the reason was that
you use photos as base images, and then it's understandable that you don't
want to convert them to gif format.

> I can't afford to pay anyone anything. My site is a hobby and not
> commercial.

Well, people often pay for their hobbies quite a lot, but now that I have
figured out what you are trying to achieve (namely place a small animated
gif over a jpeg image), instead of a description of an unnecessarily
complicated hack to achieve something, it makes sense and it's easy.

You simply put the images inside a container, normally a div element, and
set the container relatively positioned, just to establish a frame of
reference for "absolute" positioning. Then you position the gif image.
Example:
http://www.cs.tut.fi/~jkorpela/test/bird.html

There's no point in changing existing content to use this approach, but for
new content, it should be much _easier_ than splitting the jpeg image and
then trying to construct a table. The _ease_ of using CSS is a _good_ reason
to use CSS instead of layout table, and here it applies. (There are many
situations where a layout table is much easier.)

Moreover, using this approach, you need not modify the jpeg image's
background so that the gif image seemlessly integrates with it. Instead, you
can create a gif with a transparent background.

>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
>>
>> Bogosity detected.
>>
>
> Please explain.

You have adopted the habit of using XHTML without any good reason and
without sufficient understanding of XML.

>>> width: 300;
>>
>> Conforming user agents ignore that.
>
> Will they ignore it if it was in a stylesheet instead?

It _is_ in a stylesheet. This is independent of the issue of using "<!--"
and "-->" inside a style element.

A numeric width value, other than 0, without a unit is not allowed in CSS
syntax. This is a very basic rule in CSS.

> The basics are easy enough

Actually, most of authors that use CSS have never learned the basics. It's
much too easy to learn CSS by bad examples.

> If it was so easy you wouldn't be asking for money. Instead you would
> HELP!

Shouting doesn't help. Anyway, I mostly do things that I find meaningful,
except that I may do pointless things for money, as almost everyone does, at
times at least.

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

From: Osmo Saarikumpu on
Ray kirjoitti:

> Over the years, as my experience with CSS grew more attempts were made
> to rectify this but could not find the answer.

I had a go at it, see:

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

It's been tested with FF 3.5, IE 6 and IE 8. The style for img is for IE 6.

Probably it could be somewhat optimized, but I don't have the facilities
to experiment further.

> I can't afford to pay anyone anything. My site is a hobby and not
> commercial.

I'd like to use the original table version with the images as an
exercise for my students. Would that be affordable enough?

>>> width: 300;
>> Conforming user agents ignore that.

> Will they ignore it if it was in a stylesheet instead?

No matter. They should, as the unit is mandatory. IOW, in this case it
should be:

width: 300px;

In the future you may catch similar errors by "validating" your CSS:

http://jigsaw.w3.org/css-validator/

--
Best wishes,
Osmo