[thelist] design critique/css

nate nate at vicksburgcollective.com
Sat Aug 18 22:32:06 CDT 2001


alo,

looks good. css is your friend. can't do everything with it -- judicious use
of table layouts is still effective -- but the combo is great.

anyway, here's some quick comments.

first: css cascades, so you only have to define the differences.

if you have a:visited {text-decoration:none;}, then you don't need to
address text-decoration in any of your other classes. if you don't
explicitly set it, .navbar and .sidebar with both conform to
text-decoration:none;

for example, these lines do the same as what you have in your css file, but
leverages the cascading behavior of css:
a.navbar:visited {color: #FFFFCC;}
a.sidebar:visited {color: #66CCFF;}
a:visited {text-decoration:none;}

(and then, you really just need to say .navbar {color:#FFFFCC;} because all
the color will cascade down thru all the link states. becuase you want the
active state to be different (i.e. white), then just define that subclass.

also, it answer your question, you can do <a href="#"
class="foo1">foobar</a> and <a href="#" class="foo2">foobar</a>. in other
words, you can just apply styles directly to classes.
second: i don't personally recommend using the predefined classes, such as
H1. if you do use them, then you are stuck with the settings they inherently
have, such as lots of bottom padding etc. so, just use spans to receive your
defined .logo class, that way you can set every paramater and you don't need
to worry about (or go in and cancel/override) what it already has.

third: it's a good idea to always have the trailing semi-colon in your
declarations. it's not always required, but it keeps the browsers happier.

fourth: you don't need to set so many things to zero. (maybe you do in this
case/design, i haven't poured over your whole implementation). for example,
you have this line:
.sidebar {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
10px; font-weight: normal; color: #666666; background-color: #FFFFFF;
margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;
padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left:
0px}

you most likely don't need to set all those margins and paddings to zero.
they probably default to zero. and, even if you do need to set them, it's
short hand to say margin:0px which will effect all four sides of the box.
you only need to call out each side when they all need specific/different
settings.

finally: i want for a while having a class just for font-weight:bold; or
font-style:italics;. i've around tho, and now use <b>foobar</b> and
<i>foobar</i>. it's a lot fewer characters than <span
class="boldclass">foobar</span>. plus, you can always to this <b
class="foo">foober</b> if you want to apply a set class, and a bold
characteristic.

ok. HTH. (all are just off the top of the head, and IMO.)

cheers
nate

<snip>
-----Original Message-----
From: thelist-admin at lists.evolt.org
[mailto:thelist-admin at lists.evolt.org]On Behalf Of Max Gasner
Sent: Saturday, August 18, 2001 7:57 PM
Subject: [thelist] design critique/css

In particular
I'm queasy about this:

a.navbar:link {  color: #FFFFCC; text-decoration: none; font-weight: bold}
a.navbar:visited {  color: #FFFFCC; text-decoration: none}
a.navbar:hover {  color: #FFFFCC; text-decoration: underline}
a.navbar:active {  color: #FFFFFF; text-decoration: none}

take a look at http://www.ramblings.com/stuy-ld/research/max_01sepoct.html

Thanks,
Max.
<snip>





More information about the thelist mailing list