Anker-Funktion funktioniert nicht wie vorgesehen?!

boyherre

Hallo Forum,
nachdem ich das meiste zum Thema „Anker“ in einem Text gelesen und hoffentlich verstanden habe, wurde der Anker von mir im Text (auf der o.a. Seite) auf „Laser“ gesetzt – und der Menüpunkt oben verlinkt, Aber unabhängig vom Fenster-Typus, rutscht beim Klick die Ansicht nicht auf den Anker „Laser“, sondern immer ans Ende der Seite (!).
Mach' ich was falsch, wenn ja : was?
Oder ist das ein Bug?
Ich bin strikt nach beschriebenem Schema vorgegangen:
Anker platzieren/labeln
Link auf den Anker setzen;
das wirkt straight forward, funktioniert aber nicht; und ich versteh's nicht…
Was bitte tun?
Danke für Hilfe – im Voraus!
LG, Boy

Rolf Dautrich

Dein HTML mit den vielen <span>-Tags verwirrt mich ein wenig - und den Browser vielleicht auch.

Deine Verzweigung sieht so aus:

Code

<a href="#Laser" target="_self" title="Laser">
    <span style="font-size: 12pt;">Lasertherapie;</span>
</a>

Ich würde das so machen:

Code

<p style="font-size: 12pt;">
    <a href="#Laser">Lasertherapie</a>
</p>

Beim Sprungziel sieht es bei Dir so aus, was aus meiner Sicht syntaktisch falsch ist:

Code

<h5>
    <span style="color: #ff9900;">
        <span style="color: #912b3b;">
            <a id="Laser">
            </a>
Lasertherapie
        </span>
    </span>
</h5>

Ich würde es so machen und dabei das Sprungziel in einen Absatz unmittelbar vor der Überschrift packen:

Code

<p>
    <a id="Laser"></a>
</p>
<h5 style="color: #912b3b;">Lasertherapie</h5>

hechtnetz

Mit welchem Editor erstellst Du die Anker?

Da vermischst Du nach meiner Erinnerung was.

Versuch mal:

Code

<h5 id="Laser">Lasertherapie</h5>

HTML/Tutorials/Links/Referenzieren in HTML – SELFHTML-Wiki

OT:
Und entferne mal, wie Rolf Dautrich schon schreibt, die unnötigen <span>. Die beiden geschachtelten mit verschiedenen Farben machen z.B. keinen Sinn.

LukasHH

Was die vorherigen geschrieben haben, das stimmt und würde ich auch entsprechend bereinigen. Unsauberer Code kann schnell zu unerwünschten Nebeneffekten führen.

Aber das behebt nicht Dein "Problem". Denn der Ankerlink funktioniert, genauso wie angegeben. Er springt nicht an das Ende der Seite, sondern setzt die Überschrift an den oberen Rand des Bildschirm. Im Screenshot habe ich mal versucht es darzustellen.

Da Du einen "Sticky" Header nutzt, sieht man die Überschrift nicht, da diese vom Header verdeckt wird. Man kann das umgehen, wenn man die Höhe des Header als Scroll-Abstand von oben definiert. Hier ist das ganz gut beschrieben, wie man das umgehen kann: https://www.annikagievers.de/elementor-anke…s-setzen#sticky

Ich würde aber zuvor schauen, dass der Header etwas schmaler gehalten wird. Durch das große Bild nimmt es einen Großteil der Bildschirmfläche ein. Oder komplett auf dem Sticky verzichten.

Rolf Dautrich

hechtnetz Dein Code entspricht meinem mit dem Unterschied, dass ich den Anker -wie im Text beschrieben- auf einen (leeren) Absatz unmittelbar über dem Anker setze, damit der Anker nicht unschön direkt an den Bildschirmrand geklatscht wird.

LukasHH Danke für den Tipp. Ich habe mich auch manchmal schon gewundert, dass der Anker nur noch halb sichtbar ist; auch ich nutze sticky Header.

boyherre

Danke für die vieien Tipps! ich werde das abarbeiten und schauen, wie's geht…

Die Anker (und die ganze Seite) wurden eerstellt mit JCE pro.
Der vorhandene Code ergibt sich aus dem, was der JCEpro erzeugt.
Ich werde versuchen, den Code zu entschlacken.
Ich werde zunächst die Anker auf 'ne Leerzeile setzen.
Schaun mer mal!
Bis später!
LG, Boy

drmenzelit

Schriftgröße 12pt! ganz böses Zeugs ... pt ist eigentlich eine Größe für den Druck und nicht für Web. Abgesehen davon, mal sollte die Schriftgröße in der CSS vom Template definieren und nicht direkt im Text.

boyherre

Danke für die Anregung. Werde mich drum kümmern: JCEpro biettet halt diese Option über pt.
LG, Boy

Rolf Dautrich

Zitat

JCEpro biettet halt diese Option über pt.

Du kannst in Deinen Profileinstellungen des JCE auch andere Auswahlmöglichkeiten (als die voreingestellten mit pt) einstellen. Ich bin da generell auf px gegangen.

Außerdem bin ich bei drmenzelit, dass es besser ist, geeignete Klassen zu definieren und diese statt des Inline-CSS zu verwenden. Wenn Du dann mal was generell verändern willst, änderst Du nur noch die Klasse im CSS, statt in zig Beiträgen nach den Inline-Styles zu suchen.

PS: Auch ich nutze (leider immer noch zu oft) Inline-Styles und halte mich nicht an die eigenen Ratschläge.

Sieger66

Und siehe z.B. auch:

CSS/Tutorials/Einstieg/Syntax – SELFHTML-Wiki

boyherre

Danke für die vielen Hinweise in den Links. Dort steht zwar (wie immer und überall), WAS man machen soll, aber nie das WIE.
Das steht – wie fast immer – einer sofortigen erfolgreichen Umsetzung entgegen. Und in diesem Fall würde es mich vorerst auch zeitlich überfordern, wieder in meine Weiterbildung einzusteigen.
Ich werde die 12 pt-Anweisung erst mal canceln bzw. ersetzen, in der Hoffnung, dass der optische Eindruck nicht zu sehr leidet.
Jedenfalls großen Dank an alle für die Unterstützung!
LG, Boy

christine2

Zitat von boyherre

Danke für die vielen Hinweise in den Links. Dort steht zwar (wie immer und überall), WAS man machen soll, aber nie das WIE.

Schau mal hier: https://coolcat-creations.com/blog/passe-dei…eia-template-an

Als 1. würde ich zu dem Punkt gehen:

Eine user.css Datei hinzufügen

Dort steht auch WIE das geht und CSS Basic.

Wenn Du dann eine user.css erstellt hast, als 1. Übung:

Code

p {
font-size: 1em;
color:   #808080;
}

Hab da jetzt mal nur wegen der Größe der Schrift bzw. die Farbe (die hab ich bei Dir wo Inline gefunden) in einem Aufwasch sozusagen formatiert.

Somit gilt das dann hier:

Zitat von Dautrich

Außerdem bin ich bei drmenzelit, dass es besser ist, geeignete Klassen zu definieren und diese statt des Inline-CSS zu verwenden. Wenn Du dann mal was generell verändern willst, änderst Du nur noch die Klasse im CSS, statt in zig Beiträgen nach den Inline-Styles zu suchen.

Liebe Grüße

Christine

boyherre

--- vielen Dank dafür!
user css habe ich sogar schon kennengelernt.
Die inkriminierte Schrift habe ich erst mal auf Style Header 6 gestellt, was sich prima einfügt.
Bis später...
LG, Boy

drmenzelit

Zitat von boyherre

Die inkriminierte Schrift habe ich erst mal auf Style Header 6 gestellt

Das ist eigentlich auch nicht korrekt ... Für eine korrekte Website, die barrierefrei ist und SEO-mäßig was drauf hat, soll man die Reihenfolge der Überschriften folgen: eine h1 pro Seite, gefolgt von h2 (kann mehrere davon geben), dann h3 > h4 > h5 > h6, man soll keins überspringen.

boyherre

Oje! Ich muss noch so viel lernen
Erst mal muss diese Seite funktionieren auch auf dem Smartphone. Und das tut sie.
Und: die Fakten sind eins; das Verstehen, warum das so ist (Reihenfolge Überschriften-Größe), ist was anderes...
Da ist erst mal Geduld angesagt...
Jedenfalls danke für die Hilfe!
LG, Boy

christine2

Zitat von boyherre

Und: die Fakten sind eins; das Verstehen, warum das so ist (Reihenfolge Überschriften-Größe), ist was anderes...

Hier mal nur als Mini-Beispiel zusammengewürfelt. Siehe Unterschiede linkes/rechtes Bild:

Liebe Grüße

Christine

boyherre

Ja... und?

Typographische Gestaltung, über Geschmack kann man nicht streiten.

Zwischen den gleichen Zeichengrößen von links und rechts kann ich keinen Unterschied entdecken.
h4 (links) ist mit h4 (rechts) identisch. Ebenso h2 links und rechts.
Die Gestaltung von Titelzeile, Unterzeile und Lauftext muss stimmen, den gewünschten Eindruck hinterlassen.
Eine Webseite hat doch nichts mit der Gliederung einer Doktorarbeit zu tun.
Eher mit dem Layout einer Zeitungs- oder Zeitschriften-Seite...
Ich habe bis zur Rente als Schlussredakteur in einem großen Verlagshaus gearbeitet --, und das war mein täglich Brot.
Worin soll nun der Unterschied zwischen dem rechten und dem linken Beispiel bestehen?
Oder was wolltest Du mir mit deinen Beispielen sagen?
LG, Boy

PS Danke für Deinen Einsatz!

Lui_brempt

Es geht nicht um dass reine Aussehen. Es geht um die richtige Semantik.

Jemand der auf einen Screenreader angewiesen ist, hat es bei richtiger Semantik einfacher die Seite zu verstehen.

firstlady

Zitat

Eine Webseite hat doch nichts mit der Gliederung einer Doktorarbeit zu tun.

Doch. Wenn es deine private webseite ist ist es egal.

Aber es sieht so aus als ob du das für eine Kundin machst. Und sie hat Anspruch darauf, dass ihre Seite von Suchmaschinen nicht abgewertet wird.
Suchmaschinen sehen die Seite nicht. Sie lesen den Quelltext wie eine Doktorarbeit. Und die beginnt mit einer Hauptüberschrift h1, gefolgt von einer korrekten Gliederung.

Was man dir zu erklären versucht:
<h5> ist eine semantische Auszeichnung. In der Doktorabeit ist das ein Punkt, der sehr tief in der Gliederung steht.

1. Untersuchung über die semantisch auszeichnung von html-seiten

?.?.?.?.1 Punkt auf ebene h5
statt

1. Untersuchung über die semantisch auszeichnung von html-seiten
1.1 Ebene h2
1.1.1 Ebene h3

1.1.1.1 Ebene h4

1.1.1.1.1 Ebene h5

2.1 zweiter Punkt auf Ebene 2

2.1.1 Ebene h3

2.1.1.1 Ebene h4

2.1.1.1.1 Ebene h5
Wenn man nun will, dass eine Zeile aussieht wie das h5,

Schreibt man in die user.css sowas:

.h5 { font-size: 2rem; font-weight: bold; }

oder was du eben willst.

und schreibt in den Text <h2 class="h5"> dann ist das eine der Hauptüberschriften, sieht aber aus wie h5.

Noch besser wärs aber, du würdest gleich in deine user-css schreiben

h2 { font-size: 2rem; font-weight: bold; color: #nnnn}

boyherre

Aha! Danke für den Hinweis.
Werde es beachten & umsetzen.

LG, Boy