Tracking your images

Pre 2006

Winnie the pooh

"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.

copyright © stu nicholls - CSS play

Information

This is my attempt at improving the original idea by Eric Meyer which can be seen at ragged float and the alternative method proposed by 'flumpcakes' at ragged float II.

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

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

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.



Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.


Free, practical CSS menus, layouts, and examples

Soft Geometry Creative Industries

Soft Geometry Creative Industries
is a music-based design company located in Bristol UK.
I create artwork for albums, singles, posters and t-shirts.
My work is influenced by punk and post-punk poster and flyer design,
lo-fi photocopy aesthetics,
Francis Bacon and Mark Rothko.

I can provide a start to finish service with my own art and photography, put together work from images provided by yourself, and collaborate on an idea.
softgeometrycreative{at}gmail.com

Follow CSS play


Facebook   Twitter   Facebook Fan Page