Can this be done with CSS?
in [CSS]
|
From: Ray on 24 Jan 2010 01:28 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 24 Jan 2010 03:34 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 24 Jan 2010 04:55 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 24 Jan 2010 07:01 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 24 Jan 2010 07:21 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
|
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 |