Real World Style

CSS 102: Borders and Backgrounds

In case you haven’t seen it yet, another introductory CSS tutorial has been posted at Digital Web Magazine. Good night-time reading for you insomniacs…

Posted by Mark at 10:45 AM

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

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

New Article at Digital Web Magazine

In Digital Web Magazine’s annual survey, CSS was the number one topic readers wanted to learn more about. I was asked to write a “super entry level beginner article.” If it proves to be popular enough, I will probably write a couple more. The first one covers controlling typography and white space with CSS and uses a resume as an example.

CSS 101—Typography and White Space

Posted by Mark at 11:09 PM

Centered links

I recently received an email asking if I knew how to center a box of links on a page like what is seen on this example page: http://www.thomasjanotta.de/blulink1.php

While the question was really about centering the box, I thought I’d also take a stab at getting rid of the table that was being used to create and house the links.

Centering the box

The centering part is rather simple. Since the box has a width, you just need to give the left and right margins a value of auto. The CSS for the DL looks like this:

dl#links {
    font: 12px/16px verdana, arial, helvetica,
          sans-serif;
    width: 230px;
    margin: 2em auto; /* This is what centers the
                         box the first value is for
                         the top and bottom margin
                         the second value (auto)
                         splits the difference between
                         the right and left margins */
}

This works in the latest versions of the most popular browsers. Some older browsers will not center the box. There are some workarounds, but I’ll leave it as an exercise for the reader who wants to support those browsers

Recreating the links

It is probably no surprise that I chose to use a list to mark up the links. In fact I decided to use a definition list since each link has two parts, the link and the number of hits the link has. So the link became the DT and the number of hits the DD.

Having decided that, it was a just matter of replacing the TABLE markup with a DL. Due to the way the original was marked up it was a relatively simple search and replace process to accomplish this, even allowing for the extra class on every other link to get the gray background.

The CSS is pretty straightforward, too. I adapted the technique in my 7-10 Split article, applying the rules to the DT and DD rather than extra SPANs and DIVs. And once CSS 3 is supported by enough browsers, we’ll be able to do away with the extra class on every other line, too.

Here is the finished centered box o’ links via CSS (View source to see the CSS).

Posted by Mark at 10:09 AM