Author Topic: Page Display consistency  (Read 1535 times)

Offline avoorpool

  • Sr. Member
  • ****
  • Posts: 372
Page Display consistency
« on: August 13, 2012, 11:05:44 AM »
Hi Jacques,

Probably a simple question.
I've added a few pages (submenu) to my [Weather Info].
I've copied the template and altered the pages accordingly.
Out of the 4 pages, I have 2 and 2 with identical page header (= starting text) and would like to have all 4 the same.
Please check: [Weather Glossary] and [Climate Change] have a dotted line.
[UV Info]  and [Moon] don't have this.
How do  I change the text so all 4 pages have an identical display. (preferably with dotted line below the Subject Text)



Offline Mr.Meteo

  • Administrator
  • Hero Member
  • *****
  • Posts: 1115
Re: Page Display consistency
« Reply #1 on: August 14, 2012, 07:18:53 AM »
Hi Arthur,

I've waited a couple days to see if you discovered that one! ;)
Consistency is begining with page writer consistency, but don't be too stressed
with that! Errors are often little details that we don't see because we are using
always the same path to analyse our problem; often, a comma or a dot is the
problem and someone else look your code and say "it's not supposed to be... here?"
Your problem is only because you're using h2 (styled with dot line) as title on faulty
pages and h1 in others.

Let me introduce you on headings!
In web page writing, an effort is done by browser to consider a web page as a normal
informative page, or a book. In a book, we have:
 - Book title (h1)
 - Chapter title (h2)
 - Section title (h3)

All those title are used by "editors" to construct the "table of contents" of our book.
Then if we take my installation page for Weather Blues,
We could see below, that browser is able to build a "table of contents" that make sense with that page.
(This has been done by W3C Validator, with option "Show Outline" activated)

[h1] Template Manager Module
    [h2] Description
    [h2] Interface
        [h3] 1 Files zone:
        [h3] 2 Languages zone:
        [h3] 3 Legend zone:
        [h3] 4 New files zone:
        [h3] 5 Dialog zone:
   [h2] Operation
   [h2] Update process
   [h2] Template evolution..

As you see, structure is analog to a book. then search engines (google or so) "love" this structure
as it consider it as a serious document with valuable informations.

Too often writers consider these headings as styling code, because text size is proportional with
importance of headings (size of h1=200%, h2 140%, and so on), like in a writed document. Using
h3 for its "cuteness" is a bad idea and that is why css is there, we give some "class" to our title
mainly with class= in html file and in .css file its like this:

In css, "class" correspond to dot "." and "id" to "#", some example

- When class="SomeName" is used in htm (or php) file, in corresponding .css file we could do:

For all tag with a class="SomeName"
.SomeName { cute styling...

Restricted to all tag "h2" with a class="SomeName"
.SomeName h2 { cute styling...

To all h2 in a section with a id="SomeName"
#SomeName h2 { cute styling...

And we could be so specific: all h2 in a section id="SomeName", on objects with class="SomeStyle"
#SomeName.SomeStyle h2 {
... do cute styling...

That's how to do consistent pages with correct headings use.

Hope this early "course" will help you!

Please, consider supporting this site