Page 1 of 1

First attempt at a Stylesheet

Posted: Thu Jun 22, 2006 6:52 am
by SpiderMonkey
I've spent the morning trying to convert a table-based layout I've been using to CSS, how have I done? Bear in mind I've not done this before.

http://www.johnhubbardantiques.com/alte ... ntent.html

The button graphics are a bit shocking I know, but I kind of inherited them and not got round to changing them yet.

Posted: Thu Jun 22, 2006 8:03 am
by Roja
The CSS only has a couple of warnings, and the layout seems relatively sane. The CSS is well organized, and straight-forward as well - nice to see.

The HTML, however, is substantially non-compliant, and could use some work. There is little semantic meaning, and the choice of tags used isn't ideal. Perhaps a ul/li instead of divs? Not sure what the best alternative is, but right now, its simply a collection of div's, which doesn't tell you much.

A *very* good start.

Posted: Thu Jun 22, 2006 8:13 am
by SpiderMonkey
Roja wrote:The CSS only has a couple of warnings, and the layout seems relatively sane. The CSS is well organized, and straight-forward as well - nice to see.
What software did you use to check the CSS, so I could have a look at those warnings?
The HTML, however, is substantially non-compliant, and could use some work. There is little semantic meaning, and the choice of tags used isn't ideal. Perhaps a ul/li instead of divs? Not sure what the best alternative is, but right now, its simply a collection of div's, which doesn't tell you much.

A *very* good start.
Point taken about the readability of the HTML - but in what way is that non-compliant?

Posted: Thu Jun 22, 2006 8:14 am
by Roja
HTML compliance check from w3.org

CSS compliance check from w3.org
SpiderMonkey wrote:Point taken about the readability of the HTML - but in what way is that non-compliant?
That is a seperate issue. The semantic meaning and readability is a second issue, unrelated to the compliance.

Posted: Thu Jun 22, 2006 8:22 am
by SpiderMonkey
Thanks for the links :)

I've now sorted out the HTML compliance and readbility issues. Its passed both checkers.

Posted: Thu Jun 22, 2006 10:46 am
by SpiderMonkey
Just a follow up... should I include the CSS specific to a particular page in that page (or an associated file) - or should I put all of it in a single file for the site?

Posted: Thu Jun 22, 2006 10:51 am
by RobertGonzalez
Single file for the site.

Nice and clean by the way. Good job.

Posted: Thu Jun 22, 2006 11:05 am
by Benjamin
Looks good, I would encourage you not to use white text on a black background however, especially for navigation.

Posted: Thu Jun 22, 2006 1:05 pm
by Roja
SpiderMonkey wrote:Thanks for the links :)

I've now sorted out the HTML compliance and readbility issues. Its passed both checkers.
Congrats! Nicely done. You definitely hit exactly what I meant about semantic meaning. Very good.
SpiderMonkey wrote:Just a follow up... should I include the CSS specific to a particular page in that page (or an associated file) - or should I put all of it in a single file for the site?
In my opinion, it depends.

The reason its called Cascading Style Sheets is that you can have multiple sheets, which each build on each other, to act on a single page.

Lets imagine a hypothetical site, with thousands of dynamic pages. We know for sure that we want one consistent font type and size used for headlines. We know for sure that body text should be another. We'll put that in the "main site stylesheet".

However, to be hip and interesting, we want to have different color schemes for different sections. So in addition to the main site stylesheet, we want per-section stylesheets that specify colors, and the like.

That way, users load the main stylesheet, which is cached (yay). Each new section (only a few) they go to loads a new section-specific stylesheet with just a few rules, as opposed to hundreds to cover ALL the sections.

Now, if you had only 1-2 sections, a single stylesheet would probably make more sense. Similarly, if you had a huge number of sections, a single stylesheet would reduce the total number of http requests over a common browsing section.

Personally, I feel that once a stylesheet gets beyond 100 lines or so, its probably time to split it into multiple sheets. Thats entirely unscientific, and based on gut reaction, but it does seem to work a nice balance between maintainability, speed of response, cachability, and so on.

Hope that helps.

Posted: Fri Jun 23, 2006 4:33 am
by SpiderMonkey
Thanks for the feedback, I think I'm getting the hang of this now.

On the readability issue: I've got to lay out a 5x4 grid of images with captions. I've taken care of the rows using <ul> and <li>, but what tags should I use for the columns? At the moment I've just got them as <div>s.

Is this a situation where it would be acceptable to use a table?

Posted: Fri Jun 23, 2006 10:46 am
by RobertGonzalez
General rule: If you are displaying tabular data, use a table. If you are displaying a desing of some sort, use CSS. This rule is, of course, quite subjective and easily bent to your needs. Some folks insist that using tables is the work of the devil. Others believe that if it works the way you want it to, leave it alone.

What do you think is the best way to handle that display of output?

Posted: Fri Jun 23, 2006 1:19 pm
by Roja
SpiderMonkey wrote:Is this a situation where it would be acceptable to use a table?
Personally, I think so.

Tables are for tabular data, and arguably, thats what you have. Its a table of pictures and descriptions.

Tables in-and-of-themselves aren't evil, just using them to accomplish layout can be. I think this data is actually by definition tabular, so I'd go with a table.