Fußnoten-Test

Beispieltext:

Lorem ipsum dolor [1] sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren [2], no sea takimata sanctus [3] est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore [4] et dolore magna aliquyam erat, sed diam voluptua. At vero [5] eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Zugehöriger HTML-Code:

Fußnoten im Text:

<sup><a href="#fn1">[1]</a></sup>
...

Fußnotentext am Ende der Seite:

<div style="border-top:1px solid #000;font-size:10px;">
<a id="fn1"></a> Fußnote #1
<a id="fn2"></a> Fußnote #2
<a id="fn3"></a> Fußnote #3
<a id="fn4"></a> Fußnote #4
<a id="fn5"></a> Fußnote #5
</div>
Fußnote #1
Fußnote #2
Fußnote #3
Fußnote #4
Fußnote #5
Advertisements

9 Gedanken zu “Fußnoten-Test

    • Sofern man das in mehreren Beiträgen einsetzen möchte, sollte man unbedingt darauf achten, in jedem davon eindeutige IDs zu vergeben. Würdest du in allen Beiträgen immer die gleichen „fn1“, … IDs verwenden, könnte es abhängig vom Theme Probleme in der Übersicht geben, da eine ID immer nur einmalig vergeben werden darf.

      Soviel nur zur Warnung. 🙂

      Gefällt mir

          • Nochmals danke, Du hast mich auf was gebracht 🙂
            Bei dem link, gibts ja ein Inhaltsverzeichnis, wie könnte ich so etwas auch haben, ich meine nur die Box, das andere kriege ich jetzt auch so hin.
            Mit Tabellen bin ich eher auf Kriegsfuss 🙂

            Gefällt mir

            • Das Inhaltsverzeichnis auf den Supportseiten wird skriptgesteuert automatisch erstellt. Aber natürlich kannst du so etwas auch selbst erstellen. Ich habe so etwas Ähnliches z.B. in meinem Beitrag über individuelle Aufzählungszeichen erstellt. Sogar in Kombination mit einer Seitennummerierung (Pagination).

              Ist vom HTML Code nicht mal besonders spektakulär. Einfach ein div-Element und eine ungeordnete Liste:

              <div style="background-color:#F5F5F5;margin:0 60px 40px;padding:5px;font-size:16px;">
                <ul style="list-style-type:none;margin:0 0 0 1em;padding:5px 0;">
                  <li style="background:url('http://iqatrophie.files.wordpress.com/2009/01/brain_bright_32.png') no-repeat left center;padding-left:40px;margin:3px 0;line-height:32px;">→ Einleitung</li>
                  <li style="background:url('http://iqatrophie.files.wordpress.com/2009/01/brain_bright_32.png') no-repeat left center;padding-left:40px;margin:3px 0;line-height:32px;"><a href="/2013/03/26/eigene-aufzaehlungszeichen/2/">per list-style-image</a></li>
                  <li style="background:url('http://iqatrophie.files.wordpress.com/2009/01/brain_bright_32.png') no-repeat left center;padding-left:40px;margin:3px 0;line-height:32px;"><a href="/2013/03/26/eigene-aufzaehlungszeichen/3/">per background</a></li>
                  <li style="background:url('http://iqatrophie.files.wordpress.com/2009/01/brain_bright_32.png') no-repeat left center;padding-left:40px;margin:3px 0;line-height:32px;"><a href="/2013/03/26/eigene-aufzaehlungszeichen/4/">Bonus: CSS-Sprites</a></li>
                </ul>
              </div>
              

              Gefällt mir

            • Quadratbox wird schwierig, da du ja die Breite jedesmal an die Länge anpassen müsstest. Aber generell sollte das mit ein bisschen CSS-Code zu machen sein.

              Ich habe mal einen Beispielbeitrag erstellt, der dir vielleicht weiterhilft. Unter Umständen musst du mit dem HTML Code noch etwas herumspielen, um ihn an dein Theme anzupassen.

              Gefällt mir

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s