Real World Style

css layouts, tips, tricks, and techniques

Giraffe peeking out of the image...

« August 2004 | Main | May 2005 »

September 02, 2004

I’d give it a D-

I remember being in grade school and having to do a report on a country. It was beat into us that we should not copy the books that we used word for word. That would be cheating. Later we’d learn that it is called plagiarism and is akin to stealing and lying. So the common technique as we learned how to write, was to change a few words here and there, and call it our own.

That worked for the first few reports, but we had to mature our writing to go beyond simply changing a few words, to summarizing what was written in our own words. By the time we reached high school, we were expected to be able to distill several sources of information into a unique paper that represented our own conclusions.

If you look at my article Practical CSS at A List Apart, you will see that I have done precisely that, citing a number of sources of both inspiration, if not actual CSS and markup. The descriptions, explanations, and fully fleshed out examples were in my own words. Given the popularity of this piece, which is now 3 years old, and that ALA chose to run it in the first place, I’d feel pretty confident in giving it an A.

When I republished the piece as a series of several articles here, I explicitly put the CSS and associated markup into the public domain. And I just as explicitly made sure that the content of the articles, as well as the images remained under my own copyright.

So it was with great interest that I clicked on a link in an email from Peter Ong, tipping me to this “article”. It starts out well enough, but soon devolves into the grade school technique of “change a few words here and there and call it my own!”

Consider, from the ALA article:

“Splitting the Difference

“A similar layout that is typically solved with tables is essentially the opposite of the above. Instead of meeting in the middle, you might want to place two elements at opposite sides of the browser window. This might be a case where you have a small logo that you want at the top right corner of your page, and some navigational elements at the top left:

[example]

“Here we will use the same DIV.ROW, but different SPANs than we did for aligning the FORM elements with their labels. The SPAN on the left will float left, and contain left-aligned text. The SPAN on the right will float right and contain right-aligned text.”

From the article in question:

“Inline positioning

“A layout that is typically solved with tables is essentially the opposite of the above. Instead of meeting in the middle, you might want to place two elements at opposite sides of the browser window. This might be a case where you have a small logo that you want at the top right corner of your page, and some navigational elements at the top left:

[example]

“Here we will use the same DIV.ROW, but different SPANs than we did for aligning the FORM elements with their labels. The SPAN on the left will float left, and contain left-aligned text. The SPAN on the right will float right and contain right-aligned text.”

If this were handed in as a college paper, it would fail and put the author in jeopardy of being expelled for plagiarism. It wasn’t written as a college paper, though, so I’d give it a D-.

At least he did cite his primary source at the end of the article.

And something about this page looks familiar, too…

Posted by Mark at 09:46 AM

September 01, 2004

CSS around the web

Absolutely Relative
Joe Gillespie, Web Page Design for Designers
Good explanation, with examples, of how to take advantage of positioning in your CSS designs.
Ten CSS tricks you may not know
Trenton Moss, Evolt
Good roudup of tips that should help those with an intermediate understanding of CSS.
Pocket-Sized Design: Taking Your Website to the Small Screen
Elika Etemad & Jorunn D. Newth, A List Apart
Documenting the state of the art of designing for alternative browsing devices

Posted by Mark at 10:46 AM