My CSS, your opinion

[Michael Kalina]

Hi everybody!

I have three questions, maybe somebody could help me with it.

1. "If you have a minute or two..."
I usually do not do a lot with CSS, but I decided to have my site run
on pure xhtml and css. Now I made it, but I do not know, whether I
"coded" a good css or not. If somebody has some minutes free, could
you please post your opinion on my css, which you will find here:

http://michaelsremarks.com/textpatte....php?s=default

(Of course, everybody who will help me to make this css-file better,
will be mentioned in my "Thanks go to..." - Article!)

2. "If you know that by chance..."
Is there a website/program out there, which can help me to make my css
not only look good, but also which controlls it on errors?

3. "Maybe..."
Is there a website out there, which really gives usefull tips for
creating and using css? I did read a lot of selfhtml & similar sites,
but their information is too general...

Thanks a lot,

Michael

[Brian]

Michael Kalina wrote:

I usually do not do a lot with CSS, but I decided to have my site run
on pure xhtml and css.
Ok, but why xhtml transitional? I don't see anything that suggests you
cannot move to xhtml strict. Well, for that matter, why xhtml at all?
html is a safer bet..
I do not know, whether I "coded" a good css or not.
There are accessibily problems that I talk more about below. But the
site is pretty enough. The glass/coffee cup images i rather large. Might
want to trim it a bit. And I'd reduce those left/right margins, too. I
rather like the background image in those margins, btw. :)
could you please post your opinion on my css
http://michaelsremarks.com/textpatte....php?s=default
font: 13px "Arial Narrow", Arial, Helvetica, sans-serif;

Don't specify a font size in pixels, because IE/win users cannot resize
it. And don't set a font-size at all for the main part of your pages.
This normally includes body, table, p, ul, ol, etc. Leave the font size
for the text at the users default, 100%.

You can then specify font for other elements relative to the user's
default for the main body, e.g., for headings.

h1 {font-size: 200%} /* twice the size of paragraph text */

h2 {font-size: 150%} /* 50% larger than paragraph text */

/* etc. */

As your site is now, the font size is much too small for my tastes.

letter-spacing: 1px;

Most of your widths, margins, etc. are specified in pixels. This leads
to rather rigid designs and horizontal scroll bars when I shrink my
window. Think flexible. Set left/right margin to 3 or 4 em units, and
let the content take up the remaining space, without specifying any
width at all. Or set a max-width if you prefer. But do be more flexible.

line-height: 1.8em;}

I'm not sure why you specified this. It seems better to leave
line-height up to browser. I'd dump this.
Is there a website/program out there, which can help me to make my css
not only look good, but also which controlls it on errors?
To help prevent errors, sure.
http://jigsaw.w3.org/css-validator/
Is there a website out there, which really gives usefull tips for
creating and using css? I did read a lot of selfhtml & similar sites,
but their information is too general...

I'm not sure which ones you tried and didn't like.

http://www.alistapart.com/
Do as they say, not as they do. They sometimes have good css articles,
but their own site is plagued by microfonts and fixed width design.

http://css.maxdesign.com.au/listutorial/
More microfonts, but they have good ideas about lists.

http://www.meyerweb.com/
Again with the microfonts (I'm seeing a pattern here). But there's
useful info.

http://www.meyerweb.com/eric/css/edge/
See especially the complex spiral demo.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[Neal]

On 9 May 2004 16:11:20 -0700, Michael Kalina <mi***********@despammed.com>
wrote:

1. "If you have a minute or two..."
I usually do not do a lot with CSS, but I decided to have my site run
on pure xhtml and css.
Are you using XML tools to create or maintain the page? If no, then
there's really no benefit for you to use XHTML as far as I can see. As you
cannot serve XHTML properly to the most popular browser, what's the point?

You're better off with HTML 4.01 Strict using lowercase tags, quoted
attribute values and well-formed elements. If you need to change it to
XHTML in the future it will be quick and easy to do so.
Now I made it, but I do not know, whether I
"coded" a good css or not. If somebody has some minutes free, could
you please post your opinion on my css, which you will find here:

http://michaelsremarks.com/textpatte....php?s=default

(Of course, everybody who will help me to make this css-file better,
will be mentioned in my "Thanks go to..." - Article!)
Good CSS starts with good HTML.

<body
style="background-image:url(http://michaelsremarks.com/images/hintergrund.gif)">

No reason for this attribute in a CSS document. Set this in your
stylesheet. If some pages require a different background, use an id on
body.

<div id="head">Michael's Remarks</div>

This should be a h1. And

<span class="abschnitt">Anmerkungen</span>

should be a h2. (You cannot put a hx element within a p element, though -
so you'd need to put them in sequence. If you want to style them as a
unit, use a div element around them.) Use the heading markup for all
headings. Do it logically - the main heading on the page is h1, then h2
for subsections, h3 for subsections of those.

<div id="right">

What's the purpose of this column? Use id names which remind you of what
the content is. It'll make making changes down the road easier. You'll see
by the style that the selector refers to the right column.

<p>
<a href="/" class="noline">Home</a> /
<a href="/?rss=1" title="XML feed">RSS</a> /
<a href="/?atom=1" title="XML feed">Atom</a>
</p>

This is not a paragraph! Use div markup for this.

Overall the design is not bad. Brian's comments go for me too. I'll only
add that it's smart to style visited links differently than unvisited
links, might want to change color or do something.


2. "If you know that by chance..."
Is there a website/program out there, which can help me to make my css
not only look good, but also which controlls it on errors?

3. "Maybe..."
Is there a website out there, which really gives usefull tips for
creating and using css? I did read a lot of selfhtml & similar sites,
but their information is too general...

Thanks a lot,

Michael

[Lauri Raittila]

In article Michael Kalina wrote:

Hi everybody!

I have three questions, maybe somebody could help me with it. 1. "If you have a minute or two..."
I usually do not do a lot with CSS, but I decided to have my site run
on pure xhtml and css. Now I made it, but I do not know, whether I
"coded" a good css or not. If somebody has some minutes free, could
you please post your opinion on my css, which you will find here:

http://michaelsremarks.com/textpatte....php?s=default

(Of course, everybody who will help me to make this css-file better,
will be mentioned in my "Thanks go to..." - Article!)
You seem to like me to comment only CSS. So I didn't look anything else,
so some of my comments may be overgeneral. Quoting your CSS

| a { text-decoration: none;}

Not good, underlining is best indication of links.

| blockquote { margin-left: 20px;margin-right: 0;}

Brian told about px. It is also bad to use 0 margin and padding, much
better us some small value related to font size, like 0.1em.

| table {
| font: 13px "Arial Narrow", Arial, Helvetica, sans-serif;

Don't use px. If you have mighty big table, use something like 90% for
font size. Don't use generic sans-serif, since after Arial and helvetica,
next most used sans is Verdana, which you don't want.

| letter-spacing: 1px;

Us em. If user uses 30px font, this will look ugly.

| line-height: 1.8em;

You try save space horizontally, but don't bother doing it vertically.
Are you sure you don't want to use padding on td?

#center

| Not very good id. I have no Idea what it might be.

| #center .bottomline

Not good classname. What does it mean? Most important, or least
important, I guess.

| { color: #666;
| font: 10px "Arial Narrow", Arial, Helvetica, sans-serif;
| }

Least, obviously. Too small font size. There is millions of people unable
to read it. You forgot to define background with your color.

| #center .bottomline a
| { border: none;color: #666;text-decoration: none;
| }

That is very bad. How will anybody know it is link, if it looks exactly
as normal text? Also, there is no difference between visited and normal
link, which is not good.

| #center a {border-bottom: 1px dotted #222222;color: #222;}

Again, make difference for :link and :visited. Dotted border under link
is not normal way to say something is link, better use normal unserline.

| #center h3 {
| font: bold 14px Arial, Helvetica, sans-serif;

You really should use relative font sizes. Now it is easy to get all
fonts same size, as peoples browsers use minimum font size like 14px.

| letter-spacing: 2px;

Never set letter-spacing using px

| text-align: justify;

Never use justify, especially don't use it on heading.
It will cause ugliness

| text-decoration: none;}

Useless, but if someone uses heavy userstyle, you override it.

| #container {\width: 700px;

Do not set any width to 700px. It is too big and too small.

| background-color: #FFF;}

You missed color with you white. Why are you using white background
anyway, it hurts peoples eyes. Use something like #F8F8F8 etc.

| #head {
| background: url(http://michaelsremarks.com/images/mrlogo.jpg) no-repeat
| center top;

Set also background color.

| color: #000;

Always set background color, when setting color. Background image is not
enaugh.

| margin: 0;
| padding-bottom: 15px;
| padding-top: 250px;

If this is div, use padding-left and right too. Are you sure this is not
h1?

| font: normal 18px palatino, georgia, verdana, arial, sans-serif;
| text-transform: uppercase;
| }

Uppercase looks ugly on serif fonts, IMHO. Do not use generic
arternatives, unless style of font is meaningful. In this case, it is
clear that that is not the case.

| #right {\width: 180px;w\idth: 180px;width: 180px;}

Why this 3 time definition?

| #right p {font: 11px "Arial Narrow", Arial, Helvetica, sans-serif;}

Arial Narrow is not good paragraph font. Are you trying to fit too much
in little space?
2. "If you know that by chance..."
Is there a website/program out there, which can help me to make my css
not only look good, but also which controlls it on errors?
I don't know. Running it trough W3C css checker gives you some kind of
uniform, but it is not good for complex things involving different media
types. And no program can spot if you use 2 different selectors to select
same element, let alone tell if it makes difference.
3. "Maybe..."
Is there a website out there, which really gives usefull tips for
creating and using css?
Plenty. Google alt.html for "fun 'n giggly css stuff", and you find
brucies list.
I did read a lot of selfhtml & similar sites,
but their information is too general...

Ther is always
http://www.w3.org/TR/CSS1
http://www.w3.org/TR/CSS21/
http://www.w3.org/TR/CSS2/
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[Neal]

On Mon, 10 May 2004 17:31:53 +0300, Lauri Raittila
<la***@raittila.cjb.net> wrote:

| letter-spacing: 1px;

Us em. If user uses 30px font, this will look ugly.

Why? This rule simply adds 1px to the normal spacing. The problem with
this rule is simply that its effect is likely imperceptible at short line
lengths.

[Lauri Raittila]

In article Neal wrote:

On Mon, 10 May 2004 17:31:53 +0300, Lauri Raittila
<la***@raittila.cjb.net> wrote:

| letter-spacing: 1px;

Us em. If user uses 30px font, this will look ugly.

This rule simply adds 1px to the normal spacing. The problem with
this rule is simply that its effect is likely imperceptible at short line
lengths.

You are right, it has nothing to do with font-size. It seems to be that
it is there because Arial Narrow looks ugly whiout it. Well, hardly
anybody has Arial Narrow, so it makes their font look worse, especially
at small font sizes, where it is more significant.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[Michael Kalina]

Lauri Raittila <la***@raittila.cjb.net> wrote in message news:<MP************************@news.individual.n et>...

Discussion...

Thank you for your tips. Just for information:

I am using Textpattern to create my site and currently, I try to add
modifications to my css, so that your tips and hints are somehow put
in action...

Of course, more comments on the "new" css are always welcome!

Thanks, Michael

[Lauri Raittila]

In article Michael Kalina wrote:

Lauri Raittila <la***@raittila.cjb.net> wrote in message news:<MP************************@news.individual.n et>...

Discussion...

Thank you for your tips. Just for information:

I am using Textpattern to create my site and currently, I try to add
modifications to my css, so that your tips and hints are somehow put
in action...

Of course, more comments on the "new" css are always welcome!

Use different colors for visited and non-visited links.
http://www.useit.com/alertbox/20040503.html

font: normal 80%/1.8em Arial, Helvetica, Verdana, sans-serif;

80% is too small, 85% or rather 90% is acceptable. 70% is even more bad.

Think, if books you read would have text that would be one third smaller
than normally. Would you like it? In computer world even 10% is annoying,
as screen resolution is usually ten-hundres times worse than on print, so
size is not only factor that makes text unreadable. On computers, it
usually makes sence to use as small font as you are confortable, as there
never is too much screen space.

I looked your site and I was right on justify and letter-spacing - they
don't work good enaugh IMHO. 1.8 line-height is good.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[Michael Kalina]

Lauri Raittila <la***@raittila.cjb.net> wrote in message news:<MP************************@news.individual.n et>...

In article Michael Kalina wrote:

Lauri Raittila <la***@raittila.cjb.net> wrote in message news:<MP************************@news.individual.n et>...

Discussion...

font: normal 80%/1.8em Arial, Helvetica, Verdana, sans-serif;

80% is too small, 85% or rather 90% is acceptable. 70% is even more bad.

Okay, I changed it to 80 (bottomline), 90 (center p)!
I looked your site and I was right on justify and letter-spacing - they
don't work good enaugh IMHO. 1.8 line-height is good.

Justify is gone (I have to get used to it!) and letter-spacing in
paragraphs is also gone. I hope it is okay to use it in Captions,
Titles and Subtitles?

Anything else that has to be changed?

If yes, please post it, if not, then I have questions:

How can I avoid this effect: Go to my website at
http://michaelsremarks.com. In the navigation-bar on the right side,
click "Campus" and look at the ugly thing that comes out. Is it
possible to somehow change my css to make it look better?

And, second thing. I would like to avoid the max-width: 700px, but it
is not possible because ot the picture, which has 700 px width. Is
there a possibility to do some css-magic to make the thing look good
even when the width exceeds 700px?

Thanks a lot,

Michael

[Lauri Raittila]

Michael Kalina wrote:

Justify is gone (I have to get used to it!) and letter-spacing in
paragraphs is also gone. I hope it is okay to use it in Captions,
Titles and Subtitles?
Letter-spacing, yes, justify no
Anything else that has to be changed? If yes, please post it, if not, then I have questions:

How can I avoid this effect: Go to my website at
http://michaelsremarks.com. In the navigation-bar on the right side,
click "Campus" and look at the ugly thing that comes out. Is it
possible to somehow change my css to make it look better?
Sidebar is still too small, I rather used ctr+contextmenu to search the
link, than scanning trough links. even if link is seconf one on page.

BTW, I see some links go out of link list on main page, particularly
"A n m e r k u n g e n".

Set width of navigation-bar suing em unit, and make sure none go over
borders. Be sure to left some space on right as someone might use wider
font.

You really should use something between those links, I really thought I
had pressed link "Campus Damage", but it was just campus.
And, second thing. I would like to avoid the max-width: 700px, but it
is not possible because ot the picture, which has 700 px width. Is
there a possibility to do some css-magic to make the thing look good
even when the width exceeds 700px?

It would help a lot, if you had larger version of that image somewhere -
you could show more of it, if bigger window. 700px is quite little. I
don't think it would look too bad if you streched that image.

It sure looks wider than 700px, are you sure you didn't do something to
it?
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä

[Michael Kalina]

Lauri Raittila <la***@raittila.cjb.net> wrote in message news:<MP************************@news.individual.n et>...

Michael Kalina wrote:

I hope it is okay to use it in Captions,
Titles and Subtitles?
Letter-spacing, yes, justify no

Ups, it is gone now!

How can I avoid this effect: Go to my website at
http://michaelsremarks.com. In the navigation-bar on the right side,
click "Campus" and look at the ugly thing that comes out. Is it
possible to somehow change my css to make it look better?

Sidebar is still too small, I rather used ctr+contextmenu

HUH?
to search the
link, than scanning trough links. even if link is seconf one on page.

BTW, I see some links go out of link list on main page, particularly
"A n m e r k u n g e n".

Set width of navigation-bar suing em unit, and make sure none go over
borders. Be sure to left some space on right as someone might use wider
font.
Okay, it's now set to 12em.
You really should use something between those links, I really thought I
had pressed link "Campus Damage", but it was just campus.
Strange, they should be in a list each under the other one...
It sure looks wider than 700px, are you sure you didn't do something to
it?

In the meantime I changed it to 80% of screen with a maximum-width of
1100px!

More you can find?

BTW: I really have to say thank you to you. You are doing a great job
helping me manage this css!

[Lauri Raittila]

Michael Kalina wrote:

Lauri Raittila <la***@raittila.cjb.net> wrote in message news:<MP************************@news.individual.n et>...

Michael Kalina wrote:

I hope it is okay to use it in Captions,
Titles and Subtitles?
Letter-spacing, yes, justify no

Ups, it is gone now!

click "Campus" and look at the ugly thing that comes out. Is it

Sidebar is still too small, I rather used ctr+contextmenu

HUH?

font in that menu was too small to read nicely, and items too near one
another. So as I know I was looking link Campus, I searched it, intead of
scanning trough links. Nobody could do that in real life.

You really should use something between those links, I really thought I
had pressed link "Campus Damage", but it was just campus.

Strange, they should be in a list each under the other one...

And if <br> is ignored? Use list (ul) element to show link list, you can
hide bullet using CSS.
BTW: I really have to say thank you to you. You are doing a great job
helping me manage this css!

Well, that is nice. I sure wasn't expecting positive feedback... (usually
I limit critic to one page, because that is enaough to most people...)
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä