First attempt at a Stylesheet

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
SpiderMonkey
Forum Commoner
Posts: 85
Joined: Fri May 05, 2006 4:48 am

First attempt at a Stylesheet

Post 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.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post 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.
SpiderMonkey
Forum Commoner
Posts: 85
Joined: Fri May 05, 2006 4:48 am

Post 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?
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post 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.
SpiderMonkey
Forum Commoner
Posts: 85
Joined: Fri May 05, 2006 4:48 am

Post by SpiderMonkey »

Thanks for the links :)

I've now sorted out the HTML compliance and readbility issues. Its passed both checkers.
SpiderMonkey
Forum Commoner
Posts: 85
Joined: Fri May 05, 2006 4:48 am

Post 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?
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Single file for the site.

Nice and clean by the way. Good job.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

Looks good, I would encourage you not to use white text on a black background however, especially for navigation.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post 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.
SpiderMonkey
Forum Commoner
Posts: 85
Joined: Fri May 05, 2006 4:48 am

Post 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?
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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?
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post 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.
Post Reply