Anker setzen ohne HTML-Kenntnisse

[Rolf B]

Hallo Foximan,

im Rahmen der Informationen, die Du zur Verfügung hattest, ist das eine clevere Lösung.

Dein Konstrukt sieht so aus:

<strong id="Kunsteisfeld">Kleidung und Schuhe zum Eisstockschiessen.</strong>

D.h. du hast pro Überschrift die ID des folgenden Kapitels gesetzt. Zum einen führt das bei längeren Kapiteln dazu, dass die gewünschte Überschrift nicht oben ist, sondern irgendwo in der Mitte, zweitens ist das bei redaktionellen Änderungen die reine Hölle, und drittens kannst Du so dem ersten Abschnitt keinen Eintrag im Inhaltsverzeichnis geben.

Dummerweise bin ich diesem Thema nicht gefolgt, sonst hätte ich mich eher gemeldet. Ich hätte eine Lösung im Angebot, die diese Nachteile nicht hat. Mit reinem HTML gelingt es nicht, da hat Matthias recht, aber mit einer Prise CSS gewürzt wird es schmackhaft.

#Vorschlag:

Es gibt die Möglichkeit, HTML-Elemente von ihrem Platz wegzuschieben. Das macht man mit CSS-Styles, d.h. entweder mit einem Eintrag in der CSS Datei oder mit einem style-Attribut an dem zu verschiebenden Element. Ich zeige Dir hier beides, damit Du es so umsetzen kannst wie es deinem aktuellen Lernstand entspricht. Was dadurch genau ausgelöst wird, erkläre ich danach.

1. Mit Style-Attribut

<p>
  <a id="Kleidung" style="display:block; position:relative; top:-50px;"></a>
  <strong>Kleidung und Schuhe zum Eisstockschiessen.</strong>
  Für's Eisstockschießen…
</p>

2. Mit CSS

Im HTML:

<p>
  <a class="verschobenerAnker" id="Kleidung"></a>
  <strong>Kleidung und Schuhe zum Eisstockschiessen.</strong>
  Für's Eisstockschießen…
</p>

und irgendwo in deiner CSS Datei als weitere Regel:

.verschobenerAnker {
   display: block;
   position: relative;
   top: -50px;
}

Die HTML+CSS Lösung ist deswegen besser, weil Du dann nicht für jede Überschrift das Style-Attribut neu setzen musst.

Was passiert hier? Die Eigenschaft position:relative bewirkt, dass ein HTML Element verschiebbar wird. Der Browser tut zwar erstmal so, als stünde es an seinem Platz und zeichnet den Rest des Dokuments entsprechend drumherum, aber danach wendet er noch die mit top, left, right oder bottom angebene Positionierung an, und zwar mit der entsprechenden Kante des Elements als Bezugsgröße. top:-50px bedeutet bei relativer Positionierung also: Verschiebe die Oberkante um 50 Pixel nach oben (die 50 ist nicht willkürlich, das ist die Höhe deines Menüs). D.h. der verschobene Anker befindet sich nun 50 Pixel oberhalb der eigentlichen Überschrift. Er hat keinen Inhalt und ist deswegen nicht sichtbar. Springt man die ID an, wird das Ankerelement nach oben positioniert. Hinter das Menü. Macht aber nichts, durch die Verschiebung ist die eigentliche Überschrift 50 Pixel tiefer, und GENAU da, wo Du sie haben willst.

Die Angabe display:block ist die Wahl zwischen Teufel und Beelzebub. Das a Element ist von seinem Sinn her hier genau richtig, aber es ist ein sogenanntes Inline-Element, also ein Ding, das vom Browser im Text fließend angeordnet wird. Ein Inline-Element ohne Inhalt reagiert (bei mir in Chrome) aber nicht auf die Verschiebung. Deswegen habe ich es durch die Display-Angabe zu einem Block-Element gemacht (sowas wie div oder p). Die Alternative wäre gewesen, statt a gleich div zu nehmen. Da ich ein semantisch klares Markup bevorzuge und Diveritis für eine abscheuliche Krankheit halte, habe ich a gewählt.

Wenn Du sehen willst, wo sich die Anker nun befinden, dann setze zum Testen einfach ein paar Sternchen hinein...

Rolf