View Full Version : Footnoting with CSS?

Jan 28th, 2007, 07:47 PM
I've searched all of my CSS books, and I can't seem to find information on footnoting? There some articles on the web, I think, because when I go to them, I can't find out a thing. Can anybody here help.


Jan 28th, 2007, 07:50 PM
Define 'footnoting'.

Jan 28th, 2007, 08:40 PM
What I would like to do is when I reference a source in the text of the page is to be able to "footnote" the source much as an author would do with a book. I would like the viewer to click on the footnote number and be redirected to the bottom of the page for the source. I hope that's clear.


Jan 29th, 2007, 01:43 PM
I like to do it like this:

.footnotelink { /* footnote link */
vertical-align: super;
font-size: 0.6em;
.footnotes { /* div for footnote group */
border-left: 1px solid #000000;
margin: 20px 10px 10px 1px;
padding: 1px 10px 0px 5px;
font-size: 0.8em;
line-height: 1.2em;
.footnotes div.footnote { /* divs for single footnotes */
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 10px;

<a href="#footnote1" name="footnotes_link1" title="footnote1" class="footnotelink">1</a>
<a href="#footnote2" name="footnotes_link2" title="footnote2" class="footnotelink">2</a>

<div class="footnotes">
<a name="footnotes" id="footnotes" title="footnotes"></a>
<div class="footnote">
<a href="#footnotes_link1" name="footnote1" id="footnote1" title="footnote1">
1</a>.&nbsp; George's footnote reference.
<div class="footnote">
<a href="#footnotes_link2" name="footnote2" id="footnote2" title="footnote2">
2</a>.&nbsp; Mary's reference.