Stylesheets - Heading structure, was: Re: CSS hr noshadow

Author

Heading structure, was: Re: CSS hr noshadow

Atanas Boev

2003-12-30, 9:29 am

"Jukka K. Korpela" <jkorpela@cs.tut.fi> wrote in message
news:Xns94611AA219048jkorpelacstutfi@193.229.0.31...
Terve!
I fixed the cosmetics of the layout, but still I want to get to the bottom
of the issue.

quote:

> "Atanas Boev" <sun-alabala-cho@cs.tut.fi> wrote:
>
> Does that really call for <hr>? Does the line correspond to a change of
> topic in the content, and is it desirable that speech browsers make a
> longish pause?

You are right here. My feeling is like hr should be a break between
paragaphs (like the "* * *" they put sometimes in the books). Still I was
thinking it has some structural meaning in that case, the First Title being
"Tampere University of Technology" and Second Title being "Institute of
Signal Processing". The question I tried to reslove for a long time is: how
I should structure "introductory text" in the page that is above the main
page title. I have the following headings:
* University Logo
* Our University Name
* Our Institute Name
* Our Great Discoveries (This is the subject of the page)

Any suggestions? Do I use (img)-h1.title-h1.subtitle-h1.main or
h1(img)-h2-hr-h1.main? But now the h1.main gets too far away. The
(img)h2-h3-h1 idea seems pretty wrong...

Actually I did img-h1.title-hr-h1.susbtitle-p-h1 which now seems to me wrong
structure. hm.

suncho
I did

Stanimir Stamenkov

2003-12-30, 10:29 am

Atanas Boev wrote:

quote:

> You are right here. My feeling is like hr should be a break between
> paragaphs (like the "* * *" they put sometimes in the books). Still I was
> thinking it has some structural meaning in that case, the First Title being
> "Tampere University of Technology" and Second Title being "Institute of
> Signal Processing". The question I tried to reslove for a long time is: how
> I should structure "introductory text" in the page that is above the main
> page title. I have the following headings:
> * University Logo
> * Our University Name
> * Our Institute Name
> * Our Great Discoveries (This is the subject of the page)
>
> Any suggestions? Do I use (img)-h1.title-h1.subtitle-h1.main or
> h1(img)-h2-hr-h1.main? But now the h1.main gets too far away. The
> (img)h2-h3-h1 idea seems pretty wrong...
>
> Actually I did img-h1.title-hr-h1.susbtitle-p-h1 which now seems to me wrong
> structure. hm.

Still I'm not sure what you're trying to accomplish but I think
you're misusing the heading elements (H1, H2...). They are for
structuring the main document content only and such elements have no
place in the "header" and "footer" parts added for some reason
(usually containing site-wide logo, on-line navigation, etc.). HR
likewise have only visual presentation means and doesn't specify any
structure. But because CSS2 is pretty limitted in aspect of
generated content and because of accessibility issues authors should
put superfluous content. Your document structure may look like:

<div class="header">
<img class="site-logo" alt="" src="...">
<span class="site-caption">Site Title</span>

...
<div class="hr"><hr></div>
</div>

<div class="main">
<h1>Document Title</h1>
<p>
...
</div>

<div class="footer">
<div class="hr"><hr></div>
...
</div>

Using the variant Neal has proposed (<div class="hr"><hr></div> ):

div.hr hr { display: none }
div.hr { /* style the "HR" block here */ }

--
Stanimir

Atanas Boev

2003-12-30, 1:29 pm

"Stanimir Stamenkov" <s7an10@netscape.net> wrote in message
news:bsrvjd$pk7t$1@ID-207379.news.uni-berlin.de...

quote:

> Still I'm not sure what you're trying to accomplish but I think
> you're misusing the heading elements (H1, H2...). They are for
> structuring the main document content only and such elements have no
> place in the "header" and "footer" parts added for some reason
> (usually containing site-wide logo, on-line navigation, etc.). HR
> likewise have only visual presentation means and doesn't specify any
> structure. But because CSS2 is pretty limitted in aspect of
> generated content and because of accessibility issues authors should
> put superfluous content. Your document structure may look like:
>
> <div class="header">

You are absolutely right! I will put them as a paragraphs in div.header, I
could also hide and show it for different CSS media. Actually I have never
tought of "introductory text" as a header;)

One small note here, IMHO hr should have some structural specification,
otherwise it wouldn't be a tag resent html specifications.

Still I have this big problem if I don't use HR as I explained in
news:bsrt8g$3c8$1@news.cc.tut.fi. The problem is I obviously can't have div
floating by another div, just div floating in text.

If you can help me building the structure I have in that msg without HR it
would be very helpful.

.... and have nice holidays:)

suncho

Stanimir Stamenkov

2003-12-30, 4:30 pm

Atanas Boev wrote:

quote:

> One small note here, IMHO hr should have some structural specification,
> otherwise it wouldn't be a tag resent html specifications.

There are number of other purely presentational elements like
B(old), I(talic) which are specified in the HTML 4 Strict DTD, too -
I don't know why. You might check the latest HTML/XHTML specs to see
if there is tendency to preserve these tags or if they are
deprecated or even thrown out.

quote:

> Still I have this big problem if I don't use HR as I explained in
> news:bsrt8g$3c8$1@news.cc.tut.fi. The problem is I obviously can't have div
> floating by another div, just div floating in text.
>
> If you can help me building the structure I have in that msg without HR it
> would be very helpful.

I would be glad to help you but I'm still not sure what is the exact
visual appearance you're trying to accomplish. The thing with the
horizontal rule not extending over the right aligned "Second Title"
buggers me - is this intentionally?

I'm putting not exact example here:

http://www.geocities.com/stanio/test/suncho.html

(you'll have to save locally and strip off the Yahoo added garbage
from the source). Here what it looks like in my Mozilla (the same as
in IE and Opera) and Lynx:

http://www.geocities.com/stanio/test/proba-moz.png
http://www.geocities.com/stanio/test/proba-lynx.png

You may try swithching off the default style while using Opera or
Mozilla.

quote:

> .... and have nice holidays:)

Have a Happy New Year, you too! :-)

--
Stanimir

Jukka K. Korpela

2003-12-30, 7:29 pm

Stanimir Stamenkov <s7an10@netscape.net> wrote:

quote:

> Atanas Boev wrote:
>
>
> There are number of other purely presentational elements like
> B(old), I(talic) which are specified in the HTML 4 Strict DTD, too
> - I don't know why.

From the beginning, the hr element has had dual nature. It has been
defined as 'change of topic', yet named after 'horizontal rule'.

The b and i elements, on the hand, might be regarded as more purely
presentational. Yet, they are essential in a markup language that lacks
better semantic markup. For example, what markup would you use for
the species name "Homo sapiens"? According to well-established
biological writing rules, the name shall be italicized whenever
possible (and underlined when not possible). Using just span and CSS
(font-style: oblique or font-style: italic) is not satisfactory, IMHO,
since then the text appears as normal text whenever the style sheet is
not used. So <i>Homo sapiens</i> is adequate, though you could also
used more verbose and more informative markup like <i class="taxon"
lang="la" xml:lang="la">Homo sapiens</i>.

Similarly, in some notations in physics, italics indicates a symbol of
a quantity and bolding indicates a vector. I would not rely on CSS in
such matters.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Stanimir Stamenkov

2003-12-30, 8:29 pm

Jukka K. Korpela wrote:

quote:

> [...]
>
> Similarly, in some notations in physics, italics indicates a symbol of
> a quantity and bolding indicates a vector. I would not rely on CSS in
> such matters.

You know, you're right but I've ever wondered why the U(nderline)
element is taken out of the Strict DTD while [B] and [I] are left. I
would say HTML is somehow "more text oriented" and such basic tags
like P, B, HR, etc. are required to express more rich meaning with
fewer generic elements. Either way, I think the P(aragraph) element
would be deprecated, also. :-)

--
Stanimir

Alan J. Flavell

2003-12-30, 9:29 pm

On Tue, 30 Dec 2003, Jukka K. Korpela wrote:

quote:

> Similarly, in some notations in physics, italics indicates a symbol of
> a quantity

Puts me in mind of <var> markup, which is typically rendered as italic
or oblique.