Beispieltext:
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.
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.
Frohe Weihnachten
HTML-Code des Inhaltsverzeichnisses:
<div style="background-color:#F5F5F5;float:right;margin:0 10px 10px;padding:10px 10px 0;display:inline;max-width:180px;"> <p style="font-weight:bold;font-size:16px;margin-bottom:5px;">Inhalt</p> <ul style="list-style-type:none;margin-left:0;"> <li><a href="#jm1">Sprungmarke1</a></li> <li><a href="#jm2">Sprungmarke2</a></li> <li><a href="#jm3">Sprungmarke3</a></li> </ul> </div>
Sprungmarke im Text:
<a name="jm1"></a>
WPcom Experimente 
Vielleicht liegts am Theme, aber ich bekomme keine Box und es ist, als ob es ganz normal als Links eingefügt wäre.
Ich möchte gerne diese Box rechts oben bei den Beiträgen haben, wo ich über Bücher schreibe, zur besseren Verständnis.
Ansonsten weiss ich auch nicht, wie ich paar links genau oben rechts neben dem Text und den Bild positionieren kann.
Kannst Du mir da helfen?
LikeLike
Den oben erwähnten HTML-Code habe ich ganz zu Beginn des Beitrags notiert, falls es eventuell daran gelegen hat. Andernfalls wäre es hilfreich, wenn du auf einen deiner Beiträge verlinkst, in dem du das Ganze ausprobiert hast. Dann kann ich mir das mal ansehen.
LikeLike
Sehr merkwürdig, habe ich vielleicht falsch abkopiert.
Aber jetzt gehts!
Hier noch der erste Beitrag:
Nochmals vielen Dank für deine HIlfe!
Grüße, Gregor
LikeLike
Wenn ich dir noch einen Tipp geben darf, du solltest neben jede Sprungmarke/Überschrift noch einen Rücksprunglink zum Seitenanfang platzieren, damit deine Leser nicht umständlich zurückscrollen müssen, um wieder das Inhaltsverzeichnis aufzurufen.
Ich habe so etwas z.B. auf meiner Über-Seite in meinem Blog umgesetzt. Als Symbol habe ich einen Doppelpfeil nach oben verwendet, aber prinzipiell könntest du in den Anker auch einen Text wie „Zurück“ oder „Seitenanfang“ schreiben. Der HTML-Code sieht folgendermaßen aus:
LikeLike
Hey, das ist ja super!
Vielen Dank!
Wenn ich den gleichen Pfeil verwenden darf 🙂
LikeLike
Klar. Das ist ein schnöder Unicode Pfeil (http://www.alanwood.net/unicode/arrows.html), also frei verwendbar. 🙂
LikeLike
Ich würde den Pfeil direkt neben die Überschrift setzen. Also einfach mit in das „strong“ Element notieren.
Ist aber nur ein Vorschlag. 😉
LikeLike
Neee 🙂
Links gefällts mir echt besser und es passt auch besser zum Text.
LikeLike
Wie du meinst. 🙂 Allerdings finde ich, dass man ihn da links leicht übersieht. Wenn schon nicht neben die Überschrift, würde ich ihn wenigstens rechts platzieren.
LikeLike
Das wäre aber richtig besser 😀
Danke
LikeLike
Okay, getan, neue Frage 🙂
Wie kriege ich den Pfeil auf die gleiche Linie z.b. von Lieblingszitate?
LikeLike
Versuch mal, den Anker in das h3-Element zu setzen, und dann nach rechts floaten zu lassen.
LikeLike
Vielen Dank!
Habe mir auch notiert, aber bei dem Ganzen habe ich bemerkt, dass diese Pfeile eher den Beitrag verunstalten und paar Pixel die Maus nach oben ziehen und da kann man es auch klicken, wenn man nach oben möchte.
LikeLike
Ah ja und wie bekomme ich die Box grau?
LikeLike
Ich hatte den Eindruck, dass du HTML-Code grob verstehst? Ist aber auch nicht weiter schlimm. Die Hintergrundfarbe der Box wird in der ersten Zeile des Codes festgelegt. Genauer gesagt hier:
Wenn du hier statt „F5F5F5“ einfach einen anderen Hexwert – wie z.B das dunkle Grau (#E4E4E2) in deiner Beitragstitelleiste – einstellst, änderst du die Hintergrundfarbe.
LikeLike
Ja schon, nur ich habe schon die Erfahrung gemacht, dass ich tausendmal rumprobiert habe und doch kein erwünschtes Ergebnis bekommen habe.
Deshalb frage ich gleich den Experten 🙂
Danke!
LikeLike