Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts

    Footnoting with CSS?

    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.

    Thanks

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Define 'footnoting'.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts
    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.

    Thanks

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    632
    Thanks
    1
    Thanked 21 Times in 21 Posts
    I like to do it like this:
    Code:
        <style>
            .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;
            }
        </style>
    
    
          <p>
            George 
            <a href="#footnote1" name="footnotes_link1" title="footnote1" class="footnotelink">1</a>
            Mary
            <a href="#footnote2" name="footnotes_link2" title="footnote2" class="footnotelink">2</a>
          </p>
    
      
          <div class="footnotes">
            <a name="footnotes" id="footnotes" title="footnotes"></a>
            Note:&nbsp;
            <div class="footnote">
              <a href="#footnotes_link1" name="footnote1" id="footnote1" title="footnote1">
                1</a>.&nbsp; George's footnote reference.
            </div>
            <div class="footnote">
              <a href="#footnotes_link2" name="footnote2" id="footnote2" title="footnote2">
                2</a>.&nbsp; Mary's reference.
            </div>
          </div>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •