CSSPLAY

CSS DEMOS › Tracking your images

Date : Pre 2006

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

"I shall have to wait until I catch up with it," said Winnie-the-Pooh. "Now, look there." He pointed to the ground in front of him. "What do you see there?"
"Tracks," said Piglet. "Paw-marks." He gave a little squeak of excitement. "Oh, Pooh! Do you think it's a--a--a Woozle?"
"It may be," said Pooh. "Sometimes it is, and sometimes it isn't. You never can tell with paw- marks."
With these few words he went on tracking, and Piglet, after watching him for a minute or two, ran after him. Winnie-the-Pooh had come to a sudden stop, and was bending over the tracks in a puzzled sort of way.
"What's the matter?" asked Piglet.
"It's a very funny thing," said Bear, "but there seem to be two animals now. This--whatever-it-was--has been joined by another--whatever-it-is-- and the two of them are now proceeding in company. Would you mind coming with me, Piglet, in case they turn out to be Hostile Animals?"
Piglet scratched his ear in a nice sort of way, and said that he had nothing to do until Friday, and would be delighted to come, in case it really was a Woozle.
"You mean, in case it really is two Woozles," said Winnie-the-Pooh, and Piglet said that anyhow he had nothing to do until Friday. So off they went together.

Information

This is my attempt at improving the original idea by Eric Meyer which can be seen at ragged float.

This is a method of tracking text to an image so that the image remains visible whilst the text aligns itself with the edge of the image.

Both these methods have problems when css is turned off.

Eric's will display a sliced image horizontally across the screen, whereas flumpcakes will not display any image.

This version however will display the image followed by the text.

It is also easier to set up as it does not require the image to be sliced but instead uses variable sized em tags to push the text right.

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.