473,698 Members | 2,445 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Heading-related HTML issues

http://members.shaw.ca/davepatton/gps.html

In another newsgroup(relat ed to GPS), in regards to
the above page, someone said:
----------------------------------------------------------------------
That page has quite a cryptic title: "CIS: GPS". I saved the URL in my
browser but changed the title to "Patton's GPS pages".

The headings are rather haphazard. For example, the first one ("On
This Page") is a third level heading (an <h3>), which looks strange
because it doesn't fall under an <h2>.

A little distance down the page, "Overview" is a first level heading.
Below that are titles which to me look like they deserve to be
headings, e.g., "GPS resources". However, they're just ordinary text.
I think "Links" definitely should be a heading, since there's a link
at the top of the page to jump to this section.
----------------------------------------------------------------------

The "CIS" refers to the initials of my company, and I agree I should
change it - maybe to something like "Patton"?

The reason for the <h3>On This Page:</h3> being near the top of the
page was that originally the navigation menu was at the bottom of the
HTML, but when viewed without CSS support, it meant the navigation
menu was at the bottom of the page, so I moved it to the top of the
HTML, without making changes to the heading structure :-(

I want to change the first level "Overview" headings that appear on
some of my pages, because, taken by themselves, they don't provide
any context(e.g. to search engine indexing). On the above page,
maybe something like "GPS Information Overview" would be better?

"GPS Resources" is marked up as:
<div class="heading1 "><a name="resources ">GPS Resources</a></div>
rather than, for example, as a second level heading. I can't recall
exactly why I did that, but it was at the time I was learning CSS,
and probably isn't "the correct way to do things".

Anyone care to offer any suggestions, either about the proper
way to structure the page/headings, or anything else on my site?
Thanks

--
Dave Patton
Canadian Coordinator, Degree Confluence Project
http://www.confluence.org/
My website: http://members.shaw.ca/davepatton/
Jul 20 '05
26 2434
Tim <ti*@mail.local host.invalid> wrote:
With [the table of content] at
the top, you can float it to the right, and it positions fairly well
in all browsers,
Using positioning, you can put it anywhere in the markup and still have
it visually on the right, or on left, or elsewhere.
But if it's at the bottom and
you try and reposition it at the top, that doesn't work in various
browsers (they ignore the positioning),
So what? Usual CSS caveats apply anyway. If the navigation area is at the
bottom, no real harm is done, as opposite to "forcing" the user to listen
to a long list of links each and every time he moves from one page to
another (or to taking extra trouble and creating new problems by "skip
nav" links).
you have to use absolute
positions and sizes
No I don't. See e.g. http://www.cs.tut.fi/~jkorpela/styles/layout.html
(The positions are "absolute" only in the sense of being "absolute
positioning", which is positioning relative to a coordinate system.
You do _not_ need pixel units.)
You're stuck choosing between two bad options, and I've found the
first one to be less of a problem for most browsers.


Why would you try and minimize harm caused to browsers, as opposite to
minimizing harm caused to users?

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Jul 20 '05 #11
On Sun, 13 Jun 2004 11:55:02 +0930, Tim <ti*@mail.local host.invalid> wrote:
This is something that I've been playing with recently. With it at the
top, you can float it to the right, and it positions fairly well in all
browsers, and doesn't end up with text drawing over the top of text
(things
flow around each other). But if it's at the bottom and you try and
reposition it at the top, that doesn't work in various browsers (they
ignore the positioning), you have to use absolute positions and sizes
(which you can't do for text, because text is an unpredictable size), and
you have to deliberately make a blank space for it in some other way, so
that it doesn't get dumped over the top of the text on the page.

You're stuck choosing between two bad options, and I've found the first
one
to be less of a problem for most browsers.


Not claiming this as a perfect site, but check out how I accomplished it
here... http://www.opro.org/ Many other examples exist as well - you'll
find it's not that hard once you figure it out.

Jul 20 '05 #12
Tim
Tim <ti*@mail.local host.invalid> wrote:
You're stuck choosing between two bad options, and I've found the first
one to be less of a problem for most browsers.

Neal <ne*****@yahoo. com> posted:
Not claiming this as a perfect site, but check out how I accomplished it
here... http://www.opro.org/ Many other examples exist as well - you'll
find it's not that hard once you figure it out.


That's something I have looked at, but still suffers the table layout
/magazine column look (multiple columns are a pest on a vertically
scrolling medium, and the reduce the space available for reading the actual
content).

The coding for something like that isn't too hard, but I'm looking for a
better implementation.

--
If you insist on e-mailing me, use the reply-to address (it's real but
temporary). But please reply to the group, like you're supposed to.

This message was sent without a virus, please delete some files yourself.
Jul 20 '05 #13
Tim
Tim <ti*@mail.local host.invalid> wrote:
With [the table of content] at the top, you can float it to the right,
and it positions fairly well in all browsers,
"Jukka K. Korpela" <jk******@cs.tu t.fi> posted:
Using positioning, you can put it anywhere in the markup and still have
it visually on the right, or on left, or elsewhere.
Though if you don't put it somewhere sensible, it does look bad.
But if it's at the bottom and you try and reposition it at the top,
that doesn't work in various browsers (they ignore the positioning), So what? Usual CSS caveats apply anyway. If the navigation area is at the
bottom, no real harm is done, as opposite to "forcing" the user to listen
to a long list of links each and every time he moves from one page to
another (or to taking extra trouble and creating new problems by "skip
nav" links).
I think that a long list of links, wherever it's placed is bad news. I was
sticking to something smaller (e.g. home, help, search).
you have to use absolute positions and sizes No I don't. See e.g. http://www.cs.tut.fi/~jkorpela/styles/layout.html
(The positions are "absolute" only in the sense of being "absolute
positioning", which is positioning relative to a coordinate system.
You do _not_ need pixel units.)
Which details most of the things I've tried.

If I simply float a menu to the right, the rest of the page can flow around
it, and I don't waste reading space below the menu.

If you carve the page into content and menu divs, you end up with a two
column display. As soon as the menu finishes, there's wasted blank space
below it for the rest of the page. Also, you have to specify widths, for
at least the menu - this isn't easy to do well (10ems for a 10 character
wide menu usually makes it far wider than needed, specifying less risks
there not being enough space on some people's displays).
You're stuck choosing between two bad options, and I've found the
first one to be less of a problem for most browsers.

Why would you try and minimize harm caused to browsers, as opposite to
minimizing harm caused to users?


Thus far, I've seen the alternatives to be more harmful to users (painful
to use).

--
If you insist on e-mailing me, use the reply-to address (it's real but
temporary). But please reply to the group, like you're supposed to.

This message was sent without a virus, please delete some files yourself.
Jul 20 '05 #14
Tim
Tim wrote:
you have to use absolute positions and sizes

"Jukka K. Korpela" <jk******@cs.tu t.fi> posted:
No I don't. See e.g. http://www.cs.tut.fi/~jkorpela/styles/layout.html
(The positions are "absolute" only in the sense of being "absolute
positioning", which is positioning relative to a coordinate system.
You do _not_ need pixel units.)


Though you've still used an absolute width for that side bar (ems rather
than px). How do you determine how many ems to use? Count the characters
in your text? What about the font sizing issues?

A few of my brief experiments: http://htmltestbed.speedymail.org/

Unfortunately I lost most of my positioning experiements (I wasn't doing
them on my computer, and didn't copy them to disk). :-( But trying them
out on different browsers did show me that it seemed to be the worst way to
do it (convoluted to do, and only worked on some browsers).

--
If you insist on e-mailing me, use the reply-to address (it's real but
temporary). But please reply to the group, like you're supposed to.

This message was sent without a virus, please delete some files yourself.
Jul 20 '05 #15
Tim wrote:
Tim wrote:
you have to use absolute positions and sizes


"Jukka K. Korpela" <jk******@cs.tu t.fi> posted:
See e.g. http://www.cs.tut.fi/~jkorpela/styles/layout.html

You do _not_ need pixel units.)


Though you've still used an absolute width for that side bar (ems
rather than px). How do you determine how many ems to use? Count
the characters in your text? What about the font sizing issues?


Em units are based on font-size. The bigger the font-size, the larger
the width, if that width is set in em units. You have to set a width
when floating, too, if the natural width would otherwise be 100%.
trying them out on different browsers did show me that it seemed to
be the worst way to do it (convoluted to do, and only worked on
some browsers).


It's not easy, but it can be done. See url in sig for example.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #16
Tim
Tim wrote:
you have to use absolute positions and sizes
"Jukka K. Korpela" <jk******@cs.tu t.fi> posted:
See e.g. http://www.cs.tut.fi/~jkorpela/styles/layout.html

You do _not_ need pixel units.)

Tim wrote:
Though you've still used an absolute width for that side bar (ems
rather than px). How do you determine how many ems to use? Count
the characters in your text? What about the font sizing issues?
Brian wrote:
Em units are based on font-size. The bigger the font-size, the larger
the width, if that width is set in em units.
But not in a manner that's always so useful.

e.g. If I have some text that's ten characters wide, but if I were to set
a width of 10em, it'd be *far* wider than my text. But if I try to
compensate by using a smaller width, I might make a mess should a browser
use a font that draws some characters wider than I anticipate.
You have to set a width when floating, too, if the natural width would
otherwise be 100%.
I didn't need to when playing with lists, which was the beauty of that
approach: <http://htmltestbed.spe edymail.org/htmlmenus/floated_menus.h tml>

trying them out on different browsers did show me that it seemed to be
the worst way to do it (convoluted to do, and only worked on some
browsers).

It's not easy, but it can be done. See url in sig for example.


Still suffers one thing I dislike, and want to avoid: A rather
significant portion of the canvas is permanently lost to a navigation bar.

--
My from address is fake, but the reply-to is real, though temporary. But I
really don't want private replies to usenet postings. Reply to the group.

Jul 20 '05 #17
Tim wrote:
Brian wrote:
Em units are based on font-size. The bigger the font-size, the
larger the width, if that width is set in em units.


But not in a manner that's always so useful.

e.g. If I have some text that's ten characters wide, but if I were
to set a width of 10em, it'd be *far* wider than my text. But if I
try to compensate by using a smaller width, I might make a mess
should a browser use a font that draws some characters wider than I
anticipate.


I'm not sure I see your point. It's true that you cannot make e.g. a
nav only precisely wide enough for text links, and not 1 pixel wider.
So what? The www is not a place for pixel-perfect layout. You already
knew that, so perhaps you could explain what you mean by that.

To restate: make the positioned box wide enough for the content, leave
a small amount of breathing room, check using different font sizes. If
the user has selected a wide font, the em unit should take that into
account.

1em != 1 character
You have to set a width when floating, too, if the natural width
would otherwise be 100%.


I didn't need to when playing with lists, which was the beauty of
that approach:
<http://htmltestbed.spe edymail.org/htmlmenus/floated_menus.h tml>


Depends. Try floating a block level text container without setting a
width; now have a look in IE 5.x/Mac. ;-) And don't complain about
the browser -- it was only following the spec at the time.
See url in sig for example.


Still suffers one thing I dislike, and want to avoid: A rather
significant portion of the canvas is permanently lost to a
navigation bar.


Fair enough, but you've just introduced an entirely different
complaint, one which I didn't address because it wasn't in the
discussion earlier.

--
Best,
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #18
"Brian" <us*****@juliet remblay.com.inv alid> wrote in message
news:10******** *****@corp.supe rnews.com...
Tim wrote:
Brian wrote:
Em units are based on font-size. The bigger the font-size, the
larger the width, if that width is set in em units.


But not in a manner that's always so useful.

e.g. If I have some text that's ten characters wide, but if I were
to set a width of 10em, it'd be *far* wider than my text. But if I
try to compensate by using a smaller width, I might make a mess
should a browser use a font that draws some characters wider than I
anticipate.


I'm not sure I see your point. It's true that you cannot make e.g. a
nav only precisely wide enough for text links, and not 1 pixel wider.
So what? The www is not a place for pixel-perfect layout. You already
knew that, so perhaps you could explain what you mean by that.


Perhaps his point is that topography has an 'em' unit which is the width of
a font's letter M. I remember being confused myself when I started using
CSS because its definition of 'em' units was so perversely different (I
think that the CSS unit should have been named something else). The
typographical em unit could be useful in ensuring that fixed-width blocks
will hold specific text as compactly as possible. This is not an issue of
pixel-perfect layout, but rather an issue of making optimal use of the space
available on the page.



Jul 20 '05 #19
"C A Upsdell" <cupsdell0311XX X@-@-@XXXrogers.com> wrote:
Perhaps his point is that topography has an 'em' unit which is the
width of a font's letter M.
That would be a very odd point.

Technically, to set some width to ten characters, the best shot is to use
something like width: 4em or width: 5em in CSS. Roughly speaking, the
average width of characters is somewhat less than 0.5em.

ObHTML: Some HTML constructs allow the author to set (or suggest) a width
in "average characters", e.g. in <input type="text" ... size="...">. But
this has not been quite satisfactorily implemented in browsers (except
for monospace fonts), and there is no CSS equivalent (i.e., no CSS unit
corresponding to "average character width").
I remember being confused myself when I
started using CSS because its definition of 'em' units was so
perversely different


Actually, the CSS definition is far more compatible with typographical
principles than the idea of em as the width of this or that letter.
But this has been discussed... wait... 42, 43, 44, ... oh well,
_several_ times in comp.infosystem s.www.stylesheets, and if problems
remain after checking its fine FAQ resources, please ask there.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Jul 20 '05 #20

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
1512
by: duncan.lovett | last post by:
I want to generate dynamic heading images, but I won't be able to use the GD Library, ImageMagick or any other plug-in to generate an image on the fly due to hosting restrictions. I have seen, in the past, sites that generate headings from a set of Gif images, each corresponding to a letter in the string that is being turned into a graphical heading. I've searched in vain on a technique on how to do this, but all I can find is the GD...
0
2168
by: hxin | last post by:
Hi all, Just a quick question here. May I know how to get a result without heading in Mysql (like "set heading off" in Oracle) ? Thanks and regards, Helen
2
2271
by: John B. | last post by:
I'm using <h1>MY HEADING</h1> to display a title, however I would like to show one short line of text beside it<p>The short line of text</p>, and then go back to normal. Here's an example of how it keeps displaying now: ====================== MY HEADING The short line of text
1
1474
by: Tony Carnell | last post by:
Hi, Now here's an interesting (and highly annoying) thing! I'm working on a webpage, and am having a display 'glitch' when viewed in IE6 (oh no, not that non-standards compliant piece of rubbish I hear you cry). Believe me, if IE6 didn't account for 9x% of the Web browser market I'd forget it but it does so it would be good to correct it. Here's a link to the page mock-up (strange URL I know but I wanted to hide
1
1989
by: Larry R Harrison Jr | last post by:
I have Javascript called in HTML which runs a slide show. One thing that the HTML does is it has a "heading" just over the picture that never changes. I'd like to be able to have this heading be replaced with some other value to match the slide. The slides are run with code like this; this is just part of it: <select name="slide" onChange="change();"> <option value="photos\5857250r10198.jpg" selected>Ukranian students welcome us to TCI
5
5681
by: Charles Law | last post by:
I have a document in the following style 1 Introduction 2 Next Heading 2.1 Sub-section Some text ... 2.2 Another Sub-section 2.2.1 Getting deeper 3 Another Major Heading ....
3
1676
by: dennist685 | last post by:
Format text as a heading I'm progressing through a walkthrough on DetailsView control Early on it says Type Edit Employees, select the text, and then format the text as a heading. I clicked format, then styles, but nowhere found how to make selected text a heading.
5
3328
by: MaxiWheat | last post by:
Hi, I would like to expose a situation that I would like to have informations about. Let's suppose I have a table that looks like this : <table cellspacing="0" cellpadding="0" border ="0"> <tr> <td><h1>Heading Something</h1></td>
1
1801
by: satya.mahesh | last post by:
Hi All, I am working on a problem which "eliminates blank lines in export (between headings and when a heading is empty)". I want a macro which will do this job for me. For e.g: Heading1 Heading2
0
1421
by: xavier.boneu | last post by:
Hi! I beg you to give me a hand on the following issue. I would like to know how could I read the field's heading (not the field name) using standard SQL. I created a new table and each field has its name, data type *and* heading.
0
9160
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8862
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7729
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6521
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5860
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4619
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3050
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2331
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2002
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.