Headings and css

In article
<2956d2f9-a7fc-4cb7-9769-eedbc5d78ee5 (AT) r60g2000hsc (DOT) googlegroups.co
m>,
Dave Rado <dave.rado (AT) dsl (DOT) pipex.com> wrote:

On 27 Dec, 08:58, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

[...]

Sorry for the mistakes in my code, but as you've given me permission
to use tables for this, I think I won't spend any more time on trying
to get your code to work for me - but many thanks for all the time
you've put into this.

I don't blame you. It was just something to have ago at, these

things often bring up interesting issues along the way <g>

Can you point me to a good web page that explains in detail why I
should use ems rather than points, and also explains how to convert my
points measurements into ems so that the results look the same as
before on a default (Ctrl+0) screen?

Ben has given a nice summary in his reply. Pages? Well, let me
see... Why not take a look at:

http://css-discuss.incutio.com/?page=FontSize

and follow some of the links, especially things like

h3 {font-size: 18px;} /* a bad idea! see UsingPixels */

where UsingPixels is a link to:

http://css-discuss.incutio.com/?page=UsingPixels

and so on. You will get the idea.

If you look at my last post, I guessed some equivalent ems for
your pts, even a rough idea is good enough for this simple
reason: when a user looks at his or her website on a computer,
platform and browser that you have no idea about, the internal
consistency is what really matters, the relationship between the
font-sizes for different elements. You might or might not know
that if you just forget about setting sizes, full stop, you will
do surprisingly well because you will then be drawing on a
default set of styles made by a community of experts (all
browsers employ *similar* but not identical default sets).

Also, what about things like table borders (which I sometimes define
in points) - must they also be in ems? If so, why?

No, unless there is very special motivation. But it is often a
good idea to size elements in em terms so that they grow
naturally with the users font sizes. Remember, you cannot know
how big or small a user will make your text. As Ben says, it can
spill out of a fixed pixel sized box. All these things are a
matter of judgement. Some people like to fix a navigation in
pixels in spite of text spilling out at the extremes so that the
nav col (imagine it on the left) does not grow and grow and
causing user to have to scroll to see the content. You see, it is
the content he or she is likely to want real big to read. There
are no fixed rules on these things. I tend to make the nav cols
em wide and buy the consequences.

--
dorayme

On 18 Dec, 22:00, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

In article
6d5325e0-d37d-4a5c-9bcf-a06e81344... (AT) q77g2000hsh (DOT) googlegroups.co
m>,
Dave Rado <dave.r... (AT) dsl (DOT) pipex.com> wrote:



On 18 Dec, 09:41, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:
In Firefox, this might suit:

http://netweaver.com.au/alt/rado.html

and then there is the little business of how floats line up at
the top, not the bottom that needs attending to for most other
browsers. But that might make me have to rub a few brain cells
together... <g

You could also do

http://netweaver.com.au/alt/rado2.html

which controls a bit more...

But more fun in the morning maybe...

--
dorayme

Thanks, dorayme; but I don't understand how your code works, or how I
can make it look exactly likehttp://tinyurl.com/23xktn- could you
explain how it works, so I can understand it well enough to tweak it
for my needs? E.g. if I change the margin-left attribute for <p> to
4em, I can't see how to get the heading text to line up with it.

Also wouldn't defining "div" like that in the css stylesheet mean you
couldn't use the div tag for any other purpose?

About the last question, see my reply to to your similar query in
another post about span.

I was playing about with a fixed relationship between font-sizes,
hoping that it would help to calculate a left margin for the
paragraph text. But it is difficult as different browsers do
slightly different calculations. And different fonts affect
things, all these things hard to control on a users computer by
the author.

David Trimboli's suggestion is a nice alternative to table layout
as far as style is concerned. But all these attempts to help out
need to come after a clearer idea of what you are doing.

You know, a table is not that semantically so terrible as a
layout for what I imagine *might* be your purpose (but I do not
*know* your purpose). rf suggests an ordered list, maybe this is
good. But you have some stylistic requirements that are easier in
a table.

I have argued before that an ordered list is - in its essentials
- very close to a table with the numbers being in one column and
relating as tabular data to a corresponding bit in the next row.

In your case there are a couple of ways of interpreting things so
that your number does relate to the data in the next col. More on
this in a mo.

Putting a 1. in <h1> is an unusual thing to do. Not wanting to be
too moralistic, but think about it. An <h1> is essentially a top
heading. It has the idea of Number Oneness as part of its
meaning. It seems to be redundant to be putting in this number.
This is for most normal uses. (Of course, there could be special
cases. Perhaps you are showing students top level headings and
want to mark them out to later refer to them?) Anyway, it is
important to consider whether it is really a heading that is the
most meaningful element for your purpose.

But let us suppose some reasonable purpose for having a number to
the left and a heading to the right of this number with paras
under the heading all nicely lined up.

You want a number, it is the start of an ordering (there will be
subsequent numbers and headings and paragraphs) like this:

1. Top level heading
para
para
para
Lower level heading
para
para
para

etc.

and then

2. Top level heading
para
para
para
Lower level heading
para
para
para

The ordered list *should* be perfect but is a bit tricky with
your style requirement. If I am right about an ordered list being
essentially equivalent to a table then the table is, after all,
not something you need to be shying away from. The interpretation
of what the 1 refers to also becomes clearer, it refers to the
item in the adjoining cell. And the adjoining cell has all the
headings and paras you want.

But your original table will not do. It is not very clear
semantically to use a big word). Your original athttp://www.daverado.mvps.org/temp/headings.htmhad tables within
tables etc. May I suggest this is clearer:

http://netweaver.com.au/alt/radoTable.html

But there is a pesky problem in Safari about the numbers not
looking aligned right. In my FF it looks sweet. Perhaps numbers
are using one font and letters another? I dunno. I better stop!

--
dorayme

Hi dorayme

For some reason I've only just seen your above post and the previous
one, but I'm not sure I understand it.

All my headings are outline numbered - that's a conventional numbering
system for headings in long documents and I don't really understand
the objection. to it. Level 1 headings are analogous to chapter
headings, if you like, lower level headings inherit the first part of
their number from the higher level headings like

1. Top level heading
content
1.1 subheading
content
1.1.1 level 3 heading
content
2. Top level heading
content
2.1 subheading
content

.... and so on.


The only reason the heading-numbering table in my mock-up is within a
table is that the outer table is simulating a document page (so as to
look the way a Word document or a PDF looks on screen, which in my
opinion is much more readable for the user than most web pages, when
it comes to long documents). But then part of the content under some
of the headings will consist of "real" tables in the conventional (non-
html) sense of the word, i.e tabular data, with rows and columns and
borders - so even if one did get rid of the outer table simulating the
document page, there would still be tables within tables. And I don't
really understand why you say that won't do.


As for whether or not I can get rid of the outer table and simulate
the look of the "document page" in a different way that doesn't use a
table, I'm investigating this in a different thread, but so far I'm
not sure if it's going to be practical.

Dave

In article
<19b9ca3a-5a65-4503-b0e1-928a1e189dec (AT) q77g2000hsh (DOT) googlegroups.co
m>,
Dave Rado <dave.rado (AT) dsl (DOT) pipex.com> wrote:


[...]

Hi dorayme

For some reason I've only just seen your above post and the previous
one, but I'm not sure I understand it.

....

As for whether or not I can get rid of the outer table and simulate
the look of the "document page" in a different way that doesn't use a
table, I'm investigating this in a different thread, but so far I'm
not sure if it's going to be practical.

On this particular issue, all I recall is that I thought you
could have had a table layout in a simpler way than the one you
produced. But a lot has gone under the bridge on this... Please
post a fresh URl of the table you are considering using and we
can take a look at it and suggest any improvements.

--
dorayme

Ben C wrote:

if you make a box 16em wide it's got room
for probably about 8 characters, depending on the font.

It would have to be a mighty wide font to only get 8 characters in a
16em wide box. With Arial, you get around 35 characters in that space
and around 40 with TNR. Maybe you were thinking of 8 words, not characters.

BTW, ems don't really relate to character width, since they're a unit of
height. Unfortunately there isn't a better unit, at least not if you're
looking for any kind of consistency across browsers.

--
Berg

Hi Dorayme

On this particular issue, all I recall is that I thought you
could have had a table layout in a simpler way than the one you
produced. But a lot has gone under the bridge on this... Please
post a fresh URl of the table you are considering using and we
can take a look at it and suggest any improvements.

I had posted the following mcok-up:
http://www.daverado.mvps.org/temp/headings.htm

And you wrote:

But your original table will not do. It is not very clear
semantically to use a big word). Your original at
had tables within
tables etc.

Dave

In article
<%7hdj.87059$MJ6.45667 (AT) bgtnsc05-news (DOT) ops.worldnet.att.net>,
"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote:

Dave Rado wrote:

I had posted the following mcok-up:
http://www.daverado.mvps.org/temp/headings.htm

Is this what you are trying to do?

http://k75s.home.att.net/test/rado.html

It is much easier to use 21st century markup... <g

We have been down this road. He won't like when it wraps. <g>

I offered a while back:

http://netweaver.com.au/alt/rado.html

http://netweaver.com.au/alt/radoFixedWidth.html

It is probably easier for op to use a table to get what he wants.

--
dorayme

In article
<tDidj.338022$kj1.91283 (AT) bgtnsc04-news (DOT) ops.worldnet.att.net>,
"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote:

dorayme wrote:

"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote:
http://k75s.home.att.net/test/rado.html

It is much easier to use 21st century markup... <g

We have been down this road. He won't like when it wraps. <g

Heh. I guess his thinking is still in the last century, like his code.

He could always set a fixed width on the content div I used... <sigh
but still far less code to maintain than that table fiasco.

It seemed worthwhile to show op how to make the table simpler
without tables within tables. But I am rushing to get out to
Botany Bay to swim and walk and dine.<g>

I was adjusting things to look like his
http://www.daverado.mvps.org/temp/headings.htm when I struck an
unexpected problem. In a bad tempered push, I removed the span
wrappers I was using for the numbers in the left col and used
headings!

http://netweaver.com.au/alt/radoTable.html

These heading wrappers are of course semantic rubbish, and I will
return to remove them! And may even think how to be rid of the
valign="top" for the cells for css; for some reason my mind has
gone blank on this.

But it is rather simpler mark up than OP's table. (Are you there
Dave?)

(*take no notice of the wording in the headings... from other
urls and I have not bothered about the slanting text)

--
dorayme

On 2007-12-28, Bergamot <bergamot (AT) visi (DOT) com> wrote:

Ben C wrote:

if you make a box 16em wide it's got room
for probably about 8 characters, depending on the font.

It would have to be a mighty wide font to only get 8 characters in a
16em wide box. With Arial, you get around 35 characters in that space
and around 40 with TNR. Maybe you were thinking of 8 words, not characters.

No I was thinking of roughly 16 characters in an 8em box. I got the
factor of 2 the wrong way round.

BTW, ems don't really relate to character width, since they're a unit of
height.

Yes.

"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote

dorayme wrote:

But I am rushing to get out to Botany Bay to swim and walk and
dine.<g

Swim? "Got Icepick?"

Beauregard, today the max temperature at my house (30K from doraymes) was
35.4 degrees. Celsius.

A swim would have been a good idea indeed.

The headers give our location away, even if Botany Bay did not :-)

--
Richard.

In article
<5trdj.340330$kj1.319404 (AT) bgtnsc04-news (DOT) ops.worldnet.att.net>,
"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote:

rf wrote:

"Beauregard T. Shagnasty" wrote:
dorayme wrote:
But I am rushing to get out to Botany Bay to swim and walk and
dine.<g

Swim? "Got Icepick?"

Beauregard, today the max temperature at my house (30K from doraymes)
was 35.4 degrees. Celsius.

Not so hot where I am. So perhaps rf must live in the (hotter)
west of Sydney to the inner suburbs where it was closer to 30.

A swim would have been a good idea indeed.

Yes it would. But I stare out my window and see a lake in which the
water is just a bit above the freezing point. The temperature is
hovering around 2°C this morning. Balmy, eh?

The icepick reference was just a humourous reference about the weather
here on the cold side of the planet.

The headers give our location away, even if Botany Bay did not :-)

Oh, I know where you two are located... enjoy your swim.

There was a moment I did not enjoy, albeit brief: I was swimming
happily across Little Bay when suddenly a live black thing
brushed against me. It was a great big black dog! There were two
of them in fact and they were swimming with their owners! JFC!
(The water is getting warmer and there is a certain other very
dangerous thing in Australian waters that is live and black)

--
dorayme