Zur Navigation

Anker "zurück nach oben"

1 Lotti

Hi Jörg!

Ich hab jetzt doch mal ein Problem wo ich nicht weiter komme. Und zwar geht es um Anker und das Anspringen bestimmter Stellen innerhalb eines Dokuments. Ich hab jetzt oben einen Bereich mit CSS festgelegt, der ist 153 Pixel hoch, darunter kommt das Textfeld, eine Überschrift, darunter kommen Links zu den Textstellen weiter unten und dann der Text.
Wenn ich jetzt oben bei der Überschrift einen Anker setze und unten im Text den Anker anspringen will, dann springt er mir zwar prima an den Anker, aber da liegen ja jetzt meine 153 Pixel drüber. Ich hab schon überlegt ob ich die Seite nicht so gestalten kann, dass oben noch 153 Pixel irgendwas geschrieben steht, damit man den Anker einfach höher setzt, aber das kann ja auch nicht die Lösung sein.

Hat jemand eine Idee wie man das löst? Ich hab jetzt hier auch noch keinen Beitrag gefunden wo das schon erklärt wäre...

Liebe Grüsse

Lotti

25.01.2006 12:20

2 Jörg

Du kannst auch einen leeren Anker setzen, da muss kein Text drin stehen:


<a name="top" id="top"></a>

Und falls dieser leere Anker eine unerwünschte Lücke erzeugt, kannst du diese mit CSS wegformatieren:


#top { line-height:0; }

25.01.2006 12:42

3 Lotti

Hi Jörg!

Danke :-)
Ich hab soeben auch eine Lösung gefunden die funktioniert...

<a name="back" class="bck"></a>
Und dann im CSS:
a.bck {padding-top:270px;} 

Dass ein Anker leer sein kann, wusste ich. Aber ich muss ihn ja irgendwo hinsetzen. Und da es nicht weiter hoch geht als bis zum Text, sonst wäre ich im Headbereich, hat er mir oben alles verdeckt. Mit der padding-Angabe funktioniert es aber prima.

Ich schau mir deine Lösung etwas später auf jeden Fall auch nochmal an. Aber ich glaub die macht was anderes als das was ich meine...

Liebe Grüsse

Lotti

25.01.2006 12:47

4 Jörg

Eine kleine Verbesserungsvorschlag hätte ich noch:

Ich würde bei Ankern statt einer Klasse eine ID einsetzen:

<a name="back" id="back"></a>

a#back {padding-top:270px;}

Dann hättest du automatisch auch den neuen Anker mit drin

Zur Erklärung:

In älteren HTML-Versionen wurde der Anker mit dem name Attribut gekennzeichnet. Ab HTML 4.01 gibt es daneben auch die Möglichkeit, den Anker mit einer ID zu markieren, in XHTML ist die ID sogar zwingend vorgeschrieben. In kommenden XHTML Versionen gibt es dann nur noch die ID-Anker, das name Attribut entfällt dann ganz.

25.01.2006 13:05 | geändert: 25.01.2006 13:05

5 Lotti

:-))))))))))

Danke!! Wird sofort umgesetzt :-)

25.01.2006 13:14

6 Lotti

Hi Jörg!

Funktionuckelt bestens :-)
Aber einen Haken hat es noch: Es gibt Probleme mit gleichen Bezeichnungen für unterschiedliche Dinge. Also wenn ich einen Anker "back" hab, darf ich keine ID "back" haben. Mit Anker "back" und ID "bck" gehts aber :-)

Danke!

Liebe Grüsse

Lotti

25.01.2006 13:27

7 Lotti

Hi Jörg!

Funktioniert doch nicht. Momentan meckert das Validing fürchterlich mit mir rum, weil ich das mit dem ID an mehreren Stellen machen musste. Also nicht nur beim Link "back", sondern auch bei den anderen Ankern. Technisch funtkioniert es, aber ich bekomm Fehlermeldungen:
	Im Tag "A" müssen das name-Attribut und das id-Attribut identische Werte besitzen.
Komisch, dann war mir was unklar mit den verschiedenen Namen...
Und hier meckert er:
	ID "BCK" bereits definiert
Etc. Also ich bekomm grad Haue von dem Programm ;-)

Liebe Grüsse

Lotti

25.01.2006 13:36

8 Jörg

Hallo Lotti,

name und id müssen innerhalb eines Elementes den gleichen Wert haben, also so wie ich es in Posting 4 aufgeführt habe. Dieser Wert muss aber insofern einmalig sein, als dass du ihn nicht mehr innerhalb eines zweiten Elementes benutzen kannst. Also so ist richtig:

<a name="anker1" id="anker1"></a>
<a name="anker2" id="anker2"></a>
<a name="anker3" id="anker3"></a>

25.01.2006 13:48

9 Lotti

Hi Jörg nochmal!

Also ich habs wieder in class="bck" umgewandelt, sofort war ich wieder valide mit der Seite und CSS hat auch nicht gemeckert.

Was ich am Anfang nicht gemerkt hab: Auch die Anker im Text wurden so angesprungen, dass sie oben verdeckt wurden. Also brauchte ich eine Formatierung für alle.

Sag mal, die ID ist immer nur auf eins bezogen und die Klasse auf mehrere, richtig? Dann ändert irgendwann das
<a name="back"></a>

auf

<a id="back"></a>

richtig? Aber dann kann man die ID ja nichtmehr im Stylesheet für mehrere Anker definieren, oder? Also dann müsste ich ja jede ID einzeln definieren, weil ich sie ja nicht 2 Anker gleich benennen kann.

Also müsste ich dann bei mehreren Ankern doch wieder mit einer Klasse arbeiten, richtig?

Und wenn ich das jetzt super toll für alle super genial schreiben will, schreib ich jetzt:
<a name="back" id="back" class="bck"></a>
Richtig?

Liebe Grüsse

Lotti

25.01.2006 13:56

10 Jörg

Hallo Lotti,

Und wenn ich das jetzt super toll für alle super genial schreiben will, schreib ich jetzt:
<a name="back" id="back" class="bck"></a>

Ja, das geht natürlich auch :). name="back" ist dann der Anker für Uralt-Browser wie Netscape 4, die kein HTML 4.01 verstehen. id="back" ist der Anker für alle modernen Browser und kann auch für Einzelformatierungen genutzt werden (#back); mit class="bck" schließlich kannst du eine Klasse von Ankern definieren (.bck)

25.01.2006 14:05