Creating Footnotes?

I just noticed that you didn’t allow for the default padding and margin on the ul hence the differences in browsers.

e.g.


#endnotes ul {
    line-height: 1.3em;
    list-style-type: none;
    font-size: 0.8em;
[B]    margin:.5em 0 0;
    padding:0;
[/B]}
#endnotes[B] ul li[/B] {
[B]    margin: 0.5em 0 0;
[/B]}


To my mind, footnotes are a print-based convention that we can solve with a different, and better, approach But that’s my opinion, your mileage may vary.

Yes, I don’t like the fact that you lose your place in text when you read the footnote which is why I suggested using :target to highlight where you are going and how to get back.

Perhaps a fixed footer would be a better approach as you wouldn’t lose your place in the text so easily.

e.g.

Roughly like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sample Paper with End-Notes</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body, h1, h2 {
    margin: 0;
    padding: 0;
}
body {
    font: small/1.3em Verdana, Helvetica, Arial, sans-serif;
}
#wrapper {
    width: 400px;
    margin: 0 auto;
    border: 1px solid #FFFFFF;
    padding:0 0 120px;
}
h1 {
    margin: 1.3em 0 0.7em 0;
    font-size: 1.3em;
}
sup {
    vertical-align: super;
    font-size: smaller;
    line-height: 0.9;
}
.reference {
    color: red;
}
hr {
    margin: 20px 0 0 0;
}
#endnotes {
    margin: 0 auto;
    width:360px;
    padding:0 20px;
    background:#f2f2f2;
}
#footnotes h2 {
    margin: 0 auto;
    padding:.5em  10px;
    font-size: 1em;
    width:380px;
    border-top:5px solid #000;
    position:relative;
    background:#f2f2f2;
}
#endnotes ul {
    line-height: 1.3em;
    list-style-type: none;
    font-size: 0.8em;
    margin:0;
    padding:0;
}
#endnotes ul li {
    margin:0 0 .5em;
}
#endnotes li a {
    font-weight: 300;
}
#footnotes{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    height:6em;
    background:#fff;
    padding:1em 0 1.5em;
}
#endnotes {
    height:6em;
    overflow:hidden;/* or overflow:scroll*/
}
#endnotes li{min-height:100px;}
* html #footnotes,
* html #endnotes{overflow:auto;height:auto}


</style>
</head>
<body>
<div id="wrapper">
    <h1>George Washington</h1>
    <p> On April 30, 1789, George Washington, standing on the balcony of Federal
        Hall on Wall Street in New York, took his oath of office as the first
        President of the United States. "As the first of every thing, in our
        situation will serve to establish a Precedent," he wrote James Madison,
        "it is devoutly wished on my part, that these precedents may be fixed
        on true principles." <sup id="cite_01"> <a href="#note_01" class="reference" title="See End-Note below...">[1]</a> </sup> </p>
    <p> Born in 1732 into a Virginia planter family, he learned the morals,
        manners, and body of knowledge requisite for an 18th century Virginia
        gentleman. <sup id="cite_02"> <a href="#note_02" class="reference" title="See End-Note below...">[2]</a> </sup> </p>
    <p> He pursued two intertwined interests: military arts and western
        expansion. At 16 he helped survey Shenandoah lands for Thomas,
        Lord Fairfax. Commissioned a lieutenant colonel in 1754, he fought
        the first skirmishes of what grew into the French and Indian War. The
        next year, as an aide to Gen. Edward Braddock, he escaped injury
        although four bullets ripped his coat and two horses were shot from
        under him. <sup id="cite_03"> <a href="#note_03" class="reference" title="See End-Note below...">[3]</a> </sup> </p>
    <p> From 1759 to the outbreak of the American Revolution, Washington
        managed his lands around Mount Vernon and served in the Virginia House
        of Burgesses. <sup id="cite_01"> <a href="#note_01" class="reference" title="See End-Note below...">[1]</a> </sup> Married to a widow, Martha Dandridge Custis, he devoted
        himself to a busy and happy life. But like his fellow planters,
        Washington felt himself exploited by British merchants and hampered by
        British regulations. As the quarrel with the mother country grew acute,
        he moderately but firmly voiced his resistance to the restrictions. </p>
    <p> When the Second Continental Congress assembled in Philadelphia in
        May 1775, Washington, one of the Virginia delegates, was elected
        Commander in Chief of the Continental Army. On July 3, 1775, at
        Cambridge, Massachusetts, he took command of his ill-trained troops
        and embarked upon a war that was to last six grueling years. </p>
    <p> He realized early that the best strategy was to harass the British. He
        reported to Congress, "we should on all Occasions avoid a general
        Action, or put anything to the Risque, unless compelled by a necessity,
        into which we ought never to be drawn." <sup id="cite_04"> <a href="#note_04" class="reference" title="See End-Note below...">[4]</a> </sup> Ensuing battles saw him fall back slowly, then strike unexpectedly.
        Finally in 1781 with the aid of French allies--he forced the surrender
        of Cornwallis at Yorktown. <sup id="cite_05"> <a href="#note_05" class="reference" title="See End-Note below...">[5]</a> </sup> </p>
    <p> Washington longed to retire to his fields at Mount Vernon. But he soon
        realized that the Nation under its Articles of Confederation was not
        functioning well, so he became a prime mover in the steps leading to
        the Constitutional Convention at Philadelphia in 1787. When the new
        Constitution was ratified, the Electoral College unanimously elected
        Washington President. <sup id="cite_02"> <a href="#note_02" class="reference" title="See End-Note below...">[2]</a> </sup> </p>
    <p> He did not infringe upon the policy making powers that he felt the
        Constitution gave Congress. But the determination of foreign policy
        became preponderantly a Presidential concern. <sup id="cite_06"> <a href="#note_06" class="reference" title="See End-Note below...">[6]</a> </sup> When the French Revolution led to a major war between France and
        England, Washington refused to accept entirely the recommendations
        of either his Secretary of State Thomas Jefferson, who was pro-French,
        or his Secretary of the Treasury Alexander Hamilton, who was
        pro-British. Rather, he insisted upon a neutral course until the
        United States could grow stronger. </p>
    <p> To his disappointment, two parties were developing by the end of his
        first term. Wearied of politics, feeling old, he retired at the end of
        his second. In his Farewell Address, he urged his countrymen to
        forswear excessive party spirit and geographical distinctions. In
        foreign affairs, he warned against long-term alliances. </p>
    <p> Washington enjoyed less than three years of retirement at Mount Vernon,
        for he died of a throat infection December 14, 1799. For months the
        Nation mourned him. </p>
    <hr>
</div>
<div id="footnotes">
        <h2>ENDNOTES:</h2>
        <div id="endnotes">
    
        <ul>
            <li id="note_01"> <a href="#cite_01" class="reference" title="Return to Citation above...">[1]</a> Richard Brookhiser.  "Founding Father: Rediscovering George Washington" pg 103. </li>
            <li id="note_02"> <a href="#cite_02" class="reference" title="Return to Citation above...">[2]</a> Daniel C. Gedacht. <a href="http://books.google.com/books?id=-9TNKUwsPYIC&pg=PT73"> "George Washington: Leader of a New Nation"</a> The Rosen Publishing Group. (1999).  Retrieved August 26, 2010. </li>
            <li id="note_03"> <a href="#cite_03" class="reference" title="Return to Citation above...">[3]</a> Andrew Cayton.  "Learning to Be Washington," New York Times Sept. 30, 2010 </li>
            <li id="note_04"> <a href="#cite_04" class="reference" title="Return to Citation above...">[4]</a> Marcus Cunliffe, George Washington: Man and Monument (1958)  pg 24-26 </li>
            <li id="note_05"> <a href="#cite_05" class="reference" title="Return to Citation above...">[5]</a> John Randall.  "George Washington: A Life"  (1998)  pg 8,11 </li>
            <li id="note_06"> <a href="#cite_06" class="reference" title="Return to Citation above...">[6]</a> Mary Ellis.  "His Excellency: George Washington"  (2004)  pg 8 </li>
        </ul>
    </div>
</div>
</body>
</html>


Just an idea :slight_smile:

Paul,

Hey! It’s not polite to steal the thunder in someone else’s thread!! :stuck_out_tongue:

(That is a VERY COOL solution you posted below!!! You never cease to amaze me!!)

You lost me there…

Yes, I don’t like the fact that you lose your place in text when you read the footnote which is why I suggested using :target to highlight where you are going and how to get back.

Perhaps a fixed footer would be a better approach as you wouldn’t lose your place in the text so easily.

Well, I’m not sure how practical it would be in my entire website, however it looks really impressive in the example we have been working on!

Can you please help me figure out your code?

You made A LOT of changes, and most of them I didn’t follow why.

Specifically…

1.) Why the need for two styles: Endnotes and Footnotes?

2.) What is up with the position: relative; and position: fixed;?

3.) Can you explain how your :target thing works?

Just an idea :slight_smile:

Yet another impressive one! :tup: (Now if I can just understand it?!) :wink:

TomTees

Tom, I’m standing by to take notes on Paul’s explanation. :slight_smile: I want to know, too.

You lost me there…

He’s removing the side margins and adding some top margin on the ul and the li’s, and removing the padding on the ul.

Some browsers start out with left padding on ul’s and ol’s (to make room for (possible) bullets). Other browsers use a left margin. If you want lists to look the same cross-browser, you need to set your margins and padding on them by hand in your CSS, to override the whatever-defaults they have (it wouldn’t be so bad, except the defaults differ so much between browsers… why most defaults you can leave alone. Just not here).

Hitting the back button will bring you back to the link you clicked (dunno if that’s cross-browser though) and someone above, in one of the early responses, already solved that issue by having the footnote itself being a link back (though this would not work for multiple references to the same footnote in the text, unless you just always went back to the top of the page).

Footnotes is just a footer element.

Endnotes, I don’t know why that’s a div around a ul, instead of just the id on the ul directly… unless there’s a possibility of multiple ul’s in there?

2.) What is up with the position: relative; and position: fixed;?

I’m missing the position: relative… where is it?

The footer is position: fixed. This is called a fixed footer. It remains at the bottom of the screen at all times, since it’s attached not to the page, but to the viewport.
Fixed footers have the disadvantage of not being able to scroll from side-to-side, so if the user’s screen is less than the width of the footer content, everything to the right is lost. Maybe this has something to do with why Paul has a div around the ul?

3.) Can you explain how your :target thing works?

:target is a pseudo class (which doesn’t work in IE, lawlz) that styles whoever is the destination of an in-page link.

<a class=“stylin” href=“#tehFo0teR”>To tha f00ter!</a>

later on the page…

<div id=“tehFo0teR”>
<p>Yaar, we be at teh fo0teR, mateys. Yaar.</p>
</div>

If you style that like so:

.stylin:target {
color: #fff;
background-color: #f00;
border: 1px solid #090;
}

Then when the user clicks the link called “stylin”, their browser does the usual jumping down to tehFo0teR, but also tehFo0teR is now festive for teh holidayz. Yay.

Off Topic:

The target is now diamonds!

They don’t call me Robert Wellock for nothing; I am usually fairly accurate with markup and semantics. :smiley:

Off Topic:

Although obviously I was never actually showing an example of a Footnote, or how I would markup one. That may have confused one or two people, I was merely showing an extremely crude example of a fragment identifier at work.

I see a few problems with example; you don’t see the later endnotes on a smaller screen when tabbing and it is not obviously the main column is scrollable but other than that it is clever. :slight_smile:

Then you won’t (easily) be able to provide a link back to the point where the reader was before clicking on the footnote link. Using a class would only help for general styling of all hyperlinks, the reason for using an ID was to allow the reader to jump back up the page to continue from where they left off.

If you put the contents of the note in the title attribute on the link, rather than just “See end-note below”, that will make it a whole lot more helpful and user-friendly, and for some people will obviate the need for them to find their way back - because they can read the footnote in the tooltip, they never need to move away from that place in the main text.

Hi Tom,

I think the others have already answered these question but I’ll add my 1p.

In your example you had used negative margins on the ul to pull it into position because you didn’t realise that it already had a default left padding. However some browsers use left padding and some use left margin and therefore the position was different in various browsers.

Therefore reset margins and padding to zero and then just apply what you need and all browsers will be the same.

e.g. ul.test{margin:0;padding:0 5px}

Well, I’m not sure how practical it would be in my entire website, however it looks really impressive in the example we have been working on!

Yes it was just throwing ideas up. It seemed to work well and you could set the footer to overflow:scroll instead of hidden and avoid the problem that Robert noticed although it won’t look quite so pretty.

You could move the notes to the top if you wanted or even the side.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sample Paper with End-Notes</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body, h1, h2 {
    margin: 0;
    padding: 0;
}
html,body{min-width:832px}
body {
    font: small/1.3em Verdana, Helvetica, Arial, sans-serif;
}
#wrapper {
    width: 400px;
    margin: 0 auto;
    border: 1px solid #FFFFFF;
    padding:0 0 10px;
}
h1 {
    margin: 1.3em 0 0.7em 0;
    font-size: 1.3em;
}
sup {
    vertical-align: super;
    font-size: smaller;
    line-height: 0.9;
}
.reference {
    color: red;
}
hr {
    margin: 20px 0 0 0;
}
#endnotes {
    margin: 0 auto;
    padding:0 20px;
}
#footnotes h2 {
    margin: 0 auto 10px;
    padding:.5em 10px;
    font-size: 1em;
    border-top:5px solid #000;
    border-bottom:5px solid #000;
    background:#f2f2f2;
}
#endnotes ul {
    line-height: 1.3em;
    list-style-type: none;
    font-size: 0.8em;
    margin:0;
    padding:0;
}
#endnotes ul li {
    margin:0 0 .5em;
}
#endnotes li a {
    font-weight: 300;
}
#footnotes {
    position:fixed;
    left:0;
    top:50%;
    bottom:0;
    margin-top:-5em;
    width:200px;
    height:10em;
    background:#fffccc;
    padding:1em 0 1.5em;
}
#endnotes {
    height:6em;
    overflow:scroll;/* or overflow:hidden*/
    overflow-x:hidden;
}
#endnotes li {
    min-height:100px;
}
* html #footnotes, * html #endnotes {
    overflow:auto;
    height:auto;
    width:400px;
    margin:auto;
    padding:0;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>George Washington</h1>
    <p> On April 30, 1789, George Washington, standing on the balcony of Federal
        Hall on Wall Street in New York, took his oath of office as the first
        President of the United States. "As the first of every thing, in our
        situation will serve to establish a Precedent," he wrote James Madison,
        "it is devoutly wished on my part, that these precedents may be fixed
        on true principles." <sup id="cite_01"> <a href="#note_01" class="reference" title="See End-Note below...">[1]</a> </sup> </p>
    <p> Born in 1732 into a Virginia planter family, he learned the morals,
        manners, and body of knowledge requisite for an 18th century Virginia
        gentleman. <sup id="cite_02"> <a href="#note_02" class="reference" title="See End-Note below...">[2]</a> </sup> </p>
    <p> He pursued two intertwined interests: military arts and western
        expansion. At 16 he helped survey Shenandoah lands for Thomas,
        Lord Fairfax. Commissioned a lieutenant colonel in 1754, he fought
        the first skirmishes of what grew into the French and Indian War. The
        next year, as an aide to Gen. Edward Braddock, he escaped injury
        although four bullets ripped his coat and two horses were shot from
        under him. <sup id="cite_03"> <a href="#note_03" class="reference" title="See End-Note below...">[3]</a> </sup> </p>
    <p> From 1759 to the outbreak of the American Revolution, Washington
        managed his lands around Mount Vernon and served in the Virginia House
        of Burgesses. <sup id="cite_01"> <a href="#note_01" class="reference" title="See End-Note below...">[1]</a> </sup> Married to a widow, Martha Dandridge Custis, he devoted
        himself to a busy and happy life. But like his fellow planters,
        Washington felt himself exploited by British merchants and hampered by
        British regulations. As the quarrel with the mother country grew acute,
        he moderately but firmly voiced his resistance to the restrictions. </p>
    <p> When the Second Continental Congress assembled in Philadelphia in
        May 1775, Washington, one of the Virginia delegates, was elected
        Commander in Chief of the Continental Army. On July 3, 1775, at
        Cambridge, Massachusetts, he took command of his ill-trained troops
        and embarked upon a war that was to last six grueling years. </p>
    <p> He realized early that the best strategy was to harass the British. He
        reported to Congress, "we should on all Occasions avoid a general
        Action, or put anything to the Risque, unless compelled by a necessity,
        into which we ought never to be drawn." <sup id="cite_04"> <a href="#note_04" class="reference" title="See End-Note below...">[4]</a> </sup> Ensuing battles saw him fall back slowly, then strike unexpectedly.
        Finally in 1781 with the aid of French allies--he forced the surrender
        of Cornwallis at Yorktown. <sup id="cite_05"> <a href="#note_05" class="reference" title="See End-Note below...">[5]</a> </sup> </p>
    <p> Washington longed to retire to his fields at Mount Vernon. But he soon
        realized that the Nation under its Articles of Confederation was not
        functioning well, so he became a prime mover in the steps leading to
        the Constitutional Convention at Philadelphia in 1787. When the new
        Constitution was ratified, the Electoral College unanimously elected
        Washington President. <sup id="cite_02"> <a href="#note_02" class="reference" title="See End-Note below...">[2]</a> </sup> </p>
    <p> He did not infringe upon the policy making powers that he felt the
        Constitution gave Congress. But the determination of foreign policy
        became preponderantly a Presidential concern. <sup id="cite_06"> <a href="#note_06" class="reference" title="See End-Note below...">[6]</a> </sup> When the French Revolution led to a major war between France and
        England, Washington refused to accept entirely the recommendations
        of either his Secretary of State Thomas Jefferson, who was pro-French,
        or his Secretary of the Treasury Alexander Hamilton, who was
        pro-British. Rather, he insisted upon a neutral course until the
        United States could grow stronger. </p>
    <p> To his disappointment, two parties were developing by the end of his
        first term. Wearied of politics, feeling old, he retired at the end of
        his second. In his Farewell Address, he urged his countrymen to
        forswear excessive party spirit and geographical distinctions. In
        foreign affairs, he warned against long-term alliances. </p>
    <p> Washington enjoyed less than three years of retirement at Mount Vernon,
        for he died of a throat infection December 14, 1799. For months the
        Nation mourned him. </p>
    <hr>
</div>
<div id="footnotes">
    <h2>Sidenotes:</h2>
    <div id="endnotes">
        <ul>
            <li id="note_01"> <a href="#cite_01" class="reference" title="Return to Citation above...">[1]</a> Richard Brookhiser.  "Founding Father: Rediscovering George Washington" pg 103. </li>
            <li id="note_02"> <a href="#cite_02" class="reference" title="Return to Citation above...">[2]</a> Daniel C. Gedacht. <a href="http://books.google.com/books?id=-9TNKUwsPYIC&pg=PT73"> "George Washington: Leader of a New Nation"</a> The Rosen Publishing Group. (1999).  Retrieved August 26, 2010. </li>
            <li id="note_03"> <a href="#cite_03" class="reference" title="Return to Citation above...">[3]</a> Andrew Cayton.  "Learning to Be Washington," New York Times Sept. 30, 2010 </li>
            <li id="note_04"> <a href="#cite_04" class="reference" title="Return to Citation above...">[4]</a> Marcus Cunliffe, George Washington: Man and Monument (1958)  pg 24-26 </li>
            <li id="note_05"> <a href="#cite_05" class="reference" title="Return to Citation above...">[5]</a> John Randall.  "George Washington: A Life"  (1998)  pg 8,11 </li>
            <li id="note_06"> <a href="#cite_06" class="reference" title="Return to Citation above...">[6]</a> Mary Ellis.  "His Excellency: George Washington"  (2004)  pg 8 </li>
        </ul>
    </div>
</div>
</body>
</html>

These are just ideas an I’m not saying this is the best way.

1.) Why the need for two styles: Endnotes and Footnotes?

The two divs were needed because IE won’t center the position:fixed element in the viewport. We first make a 100% wide fixed element at the bottom of the viewport then we nest a static fixed width element which can be centred in the usual way with margin:auto.

2.) What is up with the position: relative; and position: fixed;?

Mallory answered this already and fixed positioning (which doesn’t work in IE6) fixes the element in position when the screen scrolls.

The position:relative on the h2 isn’t needed but originally I had moved the up a bit with relative positioning but changed my mind.

3.) Can you explain how your :target thing works?

It just allows for the destination that you reached via the fragment identifier to receive styling. It doesn’t matter that some browsers don’t understand it because it’s an enhancement and not a necessity.