[Web4lib] HTML question

[Jonathan Gorman]

Hi Lynne,

Just wanted to make a few quick comments about this entire thread.

> do I have to add yet another class to my already innumerable CSS 
classes?

This here is a warning sign to me that you're not using CSS in a way 
that's entirely efficient.  A quick glance at the page you post later down 
in the line confirms this.  I don't have time right now to try to offer 
any detailed suggestions, but some general pointers.

1) Remember CSS stands for Cascading Style Sheets.  This means 
two things.  First, multiple rules can be applied to one element.  For 
example:

p {font-weight:bold}
.cool {color: green}
will turn <p class="cool" to bold green text.

Second, many rules will apply to an element and all of it's descendants, 
so
ul {font-weight:bold}

will turn the Hello in <ul><li><p>Hello</p></li></ul> bold.  Setting a 
font family to the body element means that font will be used all the way 
down the tree.

2) Try to come up with semantic names for things.  It looks like right now 
you're taking one effect and making a class out of it, ie you'd do .red 
{color: red}.  There's a drawback to this approach.  Imagine we decide 
there are warnings (we'll be closed on a particular day) and also rules 
(can't run with pointy things).  We have several webpages and we mark both 
of these class red.  Now administration decides to be less imposing all 
rules should be in green.  You now need to modify the html by hand.  If 
you had done the classes warning and rule, you could just change:
warning {color:red}
rule {color: red}

to

warning {color:red}
rule {color:green}

This is one of the largest advantages to CSS.  Typically to you'll find if 
you can identify semantic names there ends up being fewer classes overall.

3) Make sure you're applying the rules to the right place.  Instead of 
having every element in a div be something like class left, just make the 
parent left.

4) One great advantage to having classes with semantic meaning is that it 
allows for better JavaScript.  It's difficult to demonstrate this, but say 
you had a quiz.  Questions could be in a class "quest" and answers in 
"answ".  You then just go over the elements and manipulate any with the 
right className.



> I have been suffering from this delusion that CSS was supposed to
> make layout easier, so why is a simple image-centering so difficult?

Layout is actually considered a difficult and tricky part to CSS.  Part of 
the problem is the standard is a bit vague in places and tricky to follow. 
It also wasn't implemented before it was finalized.  The other part is of 
course IE doesn't follow some of the actual rules very well, leading to 
layout nightmares.  However, the advantages of a good layout with CSS far 
outweigh any problems.


Sorry for going on long here, just glad to see someone else moving towards 
better html practices. Hopefully I'll get some time to look closer at 
your 
pages and make specific recommendations




Jonathan T. Gorman
Visiting Research Information Specialist
University of Illinois at Champaign-Urbana
216 Main Library - MC522
1408 West Gregory Drive
Urbana, IL 61801
Phone: (217) 244-4688


On Wed, 19 Apr 2006, Lynne Puckett wrote:

> Araby Y Greene wrote:
>> This displayed centered in IE6 and Firefox, with your doctype:
>> 
>> <img style="display: block; margin: 0 auto; width: 150px; height: 130px;" 
>> alt="Summer Reading Registration starts 5 June!" title="Summer Reading 
>> Registration starts 5 June!" src="dogcolor3.jpg">
>> 
>> -araby
>> 
>> __________________________
>> Araby Greene
> Araby -
> Oh, wow! now I see what you meant! Thanks!
> I can do that...nothing like a clue to illuminate the blank mind.
> Lynne
> -- 
> L. E. Puckett
> Reference & Electronic Systems Librarian
> Parmly Billings Library
> 510 North Broadway, Billings, MT 59101
> http://www.billings.lib.mt.us
> Ph: 406-657-8258
>
> _______________________________________________
> Web4lib mailing list
> Web4lib at webjunction.org
> http://lists.webjunction.org/web4lib/
>