Knightnet Site Design - How to do footnotes
Footnotes are useful ways to provide extra information without distracting from the main focus of the information.
Whilst word processors will provide footnotes automatically, in web pages we have to produce them manually.
Here is the process that I use to make footnotes consistant, easy to produce and look good.
Cascading Style Sheet (CSS) Formating
Firstly, you will need some CSS entries:
.footnotes { /* Footnote */ font-size:70%;border-top:1px solid silver;padding-top:0.5em;margin-top:3em;} OL.footnotes { /* Footnote */ margin-left:0em;padding-left:2em;} .ftnt { /* Footnote reference text*/ font-size:70%;vertical-align:super;}
Note the extra entry for ordered lists, this ensures that the numbered entries line up under the top border line.
Footnote Reference
Now you need to produce a reference to the footnote
<p>Here is some totally boring<a class="ftnt" href="#footnote1">1</a> text.
This produces the output:
Here is some totally boring1 text.
Note the superscripted number 1 which has a link.
Footnote
Finally, you can put the footnote at the end of the page:
<ol class="footnotes"> <li><a name="footnote1"></a>The word "boring" has interesting origins ...</li> </ol>
The output of this is shown at the bottom of this page.
Now if you scroll up the page and then click on the example footnote reference above, you will be taken to the footnote. Pressing the back button will return you to your original position.
You can add additional footnotes to the same list.
Improvements
If you have a very long page, you may wish to also create back links from the footnote to the footnote reference.
