new CSS tutorial

[jokla]

Where is there? This is a Usenet newsgroup, not a Google Group.

Other people may not have seen or may not have access to the
previous post. Please quote enough of the message you are replying
to give the context.

I didn't know this . . . it's my fault . . . sorry.

What's normal? If you set the font size to 63% of my default size,
I will not be able to read it.

So if you didn't see the original message I wrote this is what I ment
with it.

If you use % for font size, for example 110%, you'll see a minimal
difference in the size in different browsers.

So if you write the following in your css file

html { font-size: 62.5%; }

you'll reset the default font-size to 10px, this is a cross-browser
setting. Now if you go to body ( or class, id's etc ) and write 100%,
you'll have a font-size of 10px, 110% will give you 11px and so on.

When talking about the minimal difference in browsers I was talking
about Opera for example. It was mentioned that this has been fixed
since Opera v7, but it seems not in the newer versions of Opera I have.
Also it was mentioned that if someone has the minimum font size set to
different then the browser default, this user will see this font-size
as normal instead of 10px . . .

Most users don't change anything in their browsers, so it's been used
the way it has been installed, and for those users the site will look
exactly like the designer did it.

I had some non-defualt setting in different browsers and did a
website/style that way and in the end I got only complaints about the
website/style not working correctly, so I've changes all browsers to
default and create everything for this setting.

 

[Chris F.A. Johnson]

I didn't know this . . . it's my fault . . . sorry.

That's all right. One learns.

So if you didn't see the original message I wrote this is what I ment
with it.

In my case, I had read it, but I had also read hundreds of other
messages in between, so I don't remember what it said. I may or
may not be able to retrieve that message, and I may or may not be
interested in making that effort.

If you use % for font size, for example 110%, you'll see a minimal
difference in the size in different browsers.

So if you write the following in your css file

html { font-size: 62.5%; }

you'll reset the default font-size to 10px,

No, you will not. You will set it to 62.5% of the size that I feel
comfortable reading, making it illegible. That may or may not be
10px.

this is a cross-browser setting. Now if you go to body ( or class,
id's etc ) and write 100%, you'll have a font-size of 10px, 110%
will give you 11px and so on.

If you use 'html { font-size: 100%; }', then 110% will give me a
font slightly larger than my preferred size -- which is what you
should do.

When talking about the minimal difference in browsers I was talking
about Opera for example. It was mentioned that this has been fixed
since Opera v7, but it seems not in the newer versions of Opera I have.
Also it was mentioned that if someone has the minimum font size set to
different then the browser default, this user will see this font-size
as normal instead of 10px . . .

You have no idea what 10px will look like in anyone's browser. On
mine, it would be illegible.

Most users don't change anything in their browsers, so it's been used
the way it has been installed, and for those users the site will look
exactly like the designer did it.

More and more people are using Firefox, which uses a sensible size.

I had some non-defualt setting in different browsers and did a
website/style that way and in the end I got only complaints about the
website/style not working correctly, so I've changes all browsers to
default and create everything for this setting.

If you make it work at a fixed size, it will not work at any other
size.

 

[Andy Dingley]

What's the point of:

<div id="header">xnot.org</div>

when we have <Hn> tags?

<h*> tags can be repeated. Their "headerness" is an attribute.

<div id="header"> can't be repeated. Its "headerness" is ordinal, i.e.
it doesn't state "This is a header, potentially one of many that also
have header status" it states "This is _the_ header".

So it's quite reasonable to
<div id="header">xnot.org</div>

or indeed
<div id="header"><h1>xnot.org</h1></div>

If you look at a more complex potential case it might be more obvious
why this is useful to web design:

<div id="header">
<h1>XNot - Not just your usual X!</h1>
<p class="url" >xnot.org</p>
</div>

<div id="body">
<h2>Some Stuff</h2>
[...]
</div>


So although there's some overlap about "header", then there's still a
big (and useful) difference between the two.


In general though, this is a bad CSS tutorial that is itself badly
marked up. I wouldn't recommend it, at a "waste of bytes" level of such
things.

 

[Toby Inkster]

<div id="header"> can't be repeated. Its "headerness" is ordinal, i.e.
it doesn't state "This is a header, potentially one of many that also
have header status" it states "This is _the_ header".

No, it states "this is a div".

 

[Andy Dingley]

No, it states "this is a div".

That's what <div> means. Now what about the id value? As far as we
can draw any semantics out of HTML, and as far as we can infer from a ID
namespace into a human-readable semantic domain, then the id means
something in addition to this.

 

[Andy Dingley]

I think the point was not what the div was named but rather that
there was a div here at all when an <h1> or <h2> ... would have
been more appropriate.

<h1> would have been _adequate_ for the snippet we saw, but we can't
infer the _appropriateness_ from such a small sample.

I've a couple of sites where every pages has this at the top:

<div id="header" >
<h1>Foo</h1>
<p class="date" >Thermidor, Year 0</p>
</div>

Now how do I replace that with <h1> ? Lets suppose that one page is
undated. Can I now replace that with <h1> alone ? What about the RSS
generator script I run across these pages, scanning for <div> with
id=header ? What abut the client-side JS shared by all pages, expecting
the header title to be the first <h1> child of the "header" element ?

It's a mistake to be too dogmatic about these purely style-based issues.
There's lot of valid and good-practice solutions to a site, not just one
minimal solution for one single, simple page.

 

[Andy Mabbett]

I've a couple of sites where every pages has this at the top:

<div id="header" >
<h1>Foo</h1>
<p class="date" >Thermidor, Year 0</p>
</div>

Now how do I replace that with <h1> ?

You don't need to - your markup is perfectly reasonable, It's also NOT
what was suggested in the original example.

 

[Andy Mabbett]

<h*> tags can be repeated. Their "headerness" is an attribute.

Not disputed (though I always use only one H1 per page)

<div id="header"> can't be repeated.

Also not disputed, but irrelevant on the case cited.

So it's quite reasonable to
<div id="header">xnot.org</div>
Disputed.

or indeed
<div id="header"><h1>xnot.org</h1></div>

Better; but why not

If you look at a more complex potential case it might be more obvious
why this is useful to web design:

<div id="header">
<h1>XNot - Not just your usual X!</h1>
<p class="url" >xnot.org</p>
</div>

<div id="body">
<h2>Some Stuff</h2>
[...]
</div>

Both irrelevant to the case under discussion

 

[Nije Nego]

When there is more to the header than just the title text (which
should be <h1>), it makes sense to wrap it in <div id="header"></div>.

I find class, tag, ID and span enough to do pretty much anything with <hx>.

 

[Chris F.A. Johnson]

I find class, tag, ID and span enough to do pretty much anything with <hx>.

If you use class, tag, ID and span without h1, you are not creating
a well-structured document.

If you use any of them with the only an h1 element inside, they are
unnecessary.

 

[Nije Nego]

If you use class, tag, ID and span without h1, you are not creating
a well-structured document.

If you use any of them with the only an h1 element inside, they are
unnecessary.

When there is more to the header than just the text?

 

[Chris F.A. Johnson]

When there is more to the header than just the text?

When there is an image, or when there is a subheading or whatever
in the header div.

If there's nothing but the text, all that's needed is an <h1>
element. If there's more, then it should be included in a <div> and
the main headline in <h1>.

 

[Nije Nego]

When there is an image, or when there is a subheading or whatever
in the header div.

If there's nothing but the text, all that's needed is an <h1>
element. If there's more, then it should be included in a <div> and
the main headline in <h1>.

H1 is usually placed inside the header (or simillary named) div(s). I do it
as well.
Semantically - all that is needed is a <h1> element. Everything else is
presentation - hence not needed. >ou got he point there.

But I tend to disagree with the statement that <hx> should not have id,
class or span, and that you should put it in div if there is more than text
to it.