Prev: What did purecssmenus.com not do?
Next: I'm ba'ack! --tagSoup and all -- got what I want
From: lcplben on 24 Jan 2010 08:04
On Jan 24, 4:55 am, Ray <gda...(a)gmail.com> wrote:
> 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

<snip>

> Tables work perfectly on everything. Validates too.

Exactly. So why not stick with tables in the difficult cases? The call
for zero-tables layout has caused the waste of many hundreds of
thousands of hours, I reckon, in fruitless attempts to arrive at a
goal that, for most mortals, lies at the end of the rainbow. In all
but the simplest pages, 100% no-tables layout is IMO not reasonable.

Why should this be? Because to get to perfection often means to take a
step or two beyond the CSS you've mastered, to take a step into
experiment. And to take one step into experimental CSS means learning
a whole lot about the hundreds of subtleties and exceptional cases in
CSS and in user agents. That's orders of magnitude more difficult than
just plain old CSS basics. This is of course no news to the OP.

Maybe it's like learning English: to order a meal or ask directions is
easy, but beyond that one faces a sea of irregularities and pure
nonsense. I agree that, in the circumstances, CSS was required to be
designed with the same rigor and foresight as was English. But still.

When I am converting a tables-based layout incrementally, there comes
a time when everything falls apart. By my lights, that's the time to
quit, hold what you've got, and (remembering the 80/20 rule) be proud
of your great accomplishment.

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

IMO, XHTML is itself a bogosity that, despite the propaganda, confers
negative practical benefit. HTML4 will never go away, so please save
yourself hours of pain and puzzle: consider abandoning XHTML in favor
of strict HTML, like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">

Unlike HTML, XML (thus XHTML) /is/ going away.

> > By XHTML rules, user agents
> > are allowed to remove comments inside style elements.

Intuitively obvious, no?

> Thanks for the info. Didn't know that.

Should we have to know it? Are markup rules hurdles for authors to
trip over?

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

By no means always, but once in a while it seems that ridicule and non-
help are the chief pedagogical tools in this group.

-- ben

From: jeff on 24 Jan 2010 09:36
Ray wrote:
> 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

I don't really understand the issue.
You can slice this up, and put it back together, but why?

If you just want to lay an animated gif over another image then it is
trivial.

You can do one of several things. You can have your background image
as a, ta da: background image:

<div style="width: 300px;height: 200px;background-image:url('some_image')">
<img ... style="display: block; margin-left: 100px;margin-top: 100px;">

</div>

by setting margins, it can be anywhere

or you can have two foreground images:

<div style="position: relative">
<img src="main_image.gif" style="display: block; position: absolute">
<img src="main_image.gif" style="display: block; position: absolute;
left: 100px; top: 100px">
</div>

By setting left and top, it can be anywhere.

Or if you just had to slice everything up, you could reassemble it by
floating: left all the parts, and adding breaks or clears on the new lines.

I see little reason to use tables for anything other than forms and
data tables. When you do table based layouts you wind up having to
create new tables and html for everything. With tableless the html is so
much easier. Once you get over the learning bump it all becomes so so easy.

I don't care what doctype is used (although I always use html4
strict) as long as the page is rendered in standards mode.

Cheers back at ya,
Jeff


>
> 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: jeff on 24 Jan 2010 10:06
lcplben wrote:
> On Jan 24, 4:55 am, Ray <gda...(a)gmail.com> wrote:
>> 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
>
> <snip>
>
>> Tables work perfectly on everything. Validates too.
>
> Exactly. So why not stick with tables in the difficult cases? The call
> for zero-tables layout has caused the waste of many hundreds of
> thousands of hours, I reckon, in fruitless attempts to arrive at a
> goal that, for most mortals, lies at the end of the rainbow. In all
> but the simplest pages, 100% no-tables layout is IMO not reasonable.

I disagree.
>

>
> When I am converting a tables-based layout incrementally, there comes
> a time when everything falls apart. By my lights, that's the time to
> quit, hold what you've got, and (remembering the 80/20 rule) be proud
> of your great accomplishment.


Throw it all away, save the images. Very few designs can't be fit in a
header, multi column, then footer layout.

Trying to decipher most multi table layouts is cause for a migraine.
You can look at the page and just see how it it needs to be.

The key is equal height columns, with that any design is nearly
trivial. If you use background images, it becomes easier again.

Understanding how to style lists takes care of most navigation.

>
>>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
>>> Bogosity detected.
>> Please explain.
>
> IMO, XHTML is itself a bogosity that, despite the propaganda, confers
> negative practical benefit. HTML4 will never go away, so please save
> yourself hours of pain and puzzle: consider abandoning XHTML in favor
> of strict HTML, like this:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
> TR/html4/strict.dtd">

I totally agree.
>
> Unlike HTML, XML (thus XHTML) /is/ going away.

Didn't know that.

I've said this before, find a multi column layout that works for you,
and then use it in everything. After that it is just setting widths and
background images (if needed). I get everything these days as PSD comp.
I use the same template for everything, with a different stylesheet and
tweaks here and there depending on what is needed.

Jeff
>
From: Gus Richter on 24 Jan 2010 14:19
On 1/24/2010 7:21 AM, Osmo Saarikumpu wrote:
> 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/
>


For my two cents:

For a brand new or revamped creation, it should be constructed as per
Jukka's:
<http://www.cs.tut.fi/~jkorpela/test/bird.html>

For the exercise you have undertaken at:
<http://weppipakki.com/temp/kpat.htm>
there are a few points I have:

1. You have too many superfluous divs in your construct.
2. Unnecessary dimension repetition.
3. Universal zeroing of margin and padding is not necessary in this
exercise.
4. vertical-align:bottom; is not needed for IE alone, but is needed for
all recent browsers.
5. In your example, #center does not need to be floated - both image
segments will flow into position.
6. It should not be using XHTML by OP; served as text/html, not
conforming to Appendix "C" and not necessary - therefore use HTML.

Here is a simpified version:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<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;}
..paw {width: 300px;margin-left:500px;
/*position:relative;left:300px;top:500px; as an example in place
of margin-....*/
}
img {vertical-align:bottom;}
#seg2-1 {float:left;}
#seg2-2 {float:right;}
</style>
</head>
<body>
<div class="paw">
<img id="seg1-1" src="http://www.gdaywa.com/paw/top.jpg" alt=""
width="300" height="142">
<img id="seg2-1" src="http://www.gdaywa.com/paw/left.jpg" alt=""
width="40" height="91">
<img id="seg2-2" src="http://www.gdaywa.com/paw/right.jpg" alt=""
width="209" height="91">
<img id="seg2-bird" src="http://www.gdaywa.com/paw/bird.jpg" alt=""
width="51" height="45">
<img id="seg3-1" src="http://www.gdaywa.com/paw/bottom.jpg" alt=""
width="51" height="46">
</div>
</body>
</html>


--
Gus

From: dorayme on 24 Jan 2010 21:20
In article <4b5c3bc6$0$3871$9b536df3(a)news.fv.fi>,
Osmo Saarikumpu <osmo(a)weppipakki.com> wrote:

> Ray kirjoitti:
>
> > 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?

Ray, be careful. Consider the offer. Osmo might be getting an
historical gem, a classic item from the last century and worth a
lot. You might need to get a small cash differential in addition
to Osmo's probably fine effort. <g>

--
dorayme
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