First attempt at a Stylesheet
Moderator: General Moderators
-
SpiderMonkey
- Forum Commoner
- Posts: 85
- Joined: Fri May 05, 2006 4:48 am
First attempt at a Stylesheet
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.
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.
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.
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
What software did you use to check the CSS, so I could have a look at those warnings?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.
Point taken about the readability of the HTML - but in what way is that non-compliant?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.
HTML compliance check from w3.org
CSS compliance check from w3.org
CSS compliance check from w3.org
That is a seperate issue. The semantic meaning and readability is a second issue, unrelated to the compliance.SpiderMonkey wrote:Point taken about the readability of the HTML - but in what way is that non-compliant?
-
SpiderMonkey
- Forum Commoner
- Posts: 85
- Joined: Fri May 05, 2006 4:48 am
-
SpiderMonkey
- Forum Commoner
- Posts: 85
- Joined: Fri May 05, 2006 4:48 am
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
Congrats! Nicely done. You definitely hit exactly what I meant about semantic meaning. Very good.SpiderMonkey wrote:Thanks for the links
I've now sorted out the HTML compliance and readbility issues. Its passed both checkers.
In my opinion, it depends.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?
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
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?
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?
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
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?
What do you think is the best way to handle that display of output?
Personally, I think so.SpiderMonkey wrote:Is this a situation where it would be acceptable to use a table?
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.