Anker-Funktion funktioniert nicht wie vorgesehen?!

    Joomla Version
    5.0.2
    PHP Version
    PHP 8.1.x
    Hoster
    STRATO
    Link (URL) zur Seite mit dem Problem
    http://pferdetherapie-haase.de/index.php/therapie-angebote

    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… hmm
    Was bitte tun?
    Danke für Hilfe – im Voraus!
    LG, Boy

    Joomla 5.1.0. – Fujitsu Intel Core i7-6700; 32 GB RAM, 2 SSDs je 1 TB, 3 TB HDDs je 2 TB, WIN11 (22H2) 64 Bit & Linux Mint 21.3 /64 Bit – Dual-Boot. Immer aktuellste Versionen.

    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>

    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 Dautrich schon schreibt, die unnötigen <span>. Die beiden geschachtelten mit verschiedenen Farben machen z.B. keinen Sinn.

    ------------------------------------------------------------
    Gruß vom Jörg
    (Lehrer ist kein Beruf sondern eine Diagnose. oops )

    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/e…anker-links-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.

    Wenn man die Lösung hat, dann muss man nur noch das passende Problem finden.

    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.

    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

    Joomla 5.1.0. – Fujitsu Intel Core i7-6700; 32 GB RAM, 2 SSDs je 1 TB, 3 TB HDDs je 2 TB, WIN11 (22H2) 64 Bit & Linux Mint 21.3 /64 Bit – Dual-Boot. Immer aktuellste Versionen.

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

    Joomla 5.1.0. – Fujitsu Intel Core i7-6700; 32 GB RAM, 2 SSDs je 1 TB, 3 TB HDDs je 2 TB, WIN11 (22H2) 64 Bit & Linux Mint 21.3 /64 Bit – Dual-Boot. Immer aktuellste Versionen.

    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. ;):(

    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

    Joomla 5.1.0. – Fujitsu Intel Core i7-6700; 32 GB RAM, 2 SSDs je 1 TB, 3 TB HDDs je 2 TB, WIN11 (22H2) 64 Bit & Linux Mint 21.3 /64 Bit – Dual-Boot. Immer aktuellste Versionen.

    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/…in-cassiopeia-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

    --- 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

    Joomla 5.1.0. – Fujitsu Intel Core i7-6700; 32 GB RAM, 2 SSDs je 1 TB, 3 TB HDDs je 2 TB, WIN11 (22H2) 64 Bit & Linux Mint 21.3 /64 Bit – Dual-Boot. Immer aktuellste Versionen.

    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.

    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

    Joomla 5.1.0. – Fujitsu Intel Core i7-6700; 32 GB RAM, 2 SSDs je 1 TB, 3 TB HDDs je 2 TB, WIN11 (22H2) 64 Bit & Linux Mint 21.3 /64 Bit – Dual-Boot. Immer aktuellste Versionen.

    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!

    Joomla 5.1.0. – Fujitsu Intel Core i7-6700; 32 GB RAM, 2 SSDs je 1 TB, 3 TB HDDs je 2 TB, WIN11 (22H2) 64 Bit & Linux Mint 21.3 /64 Bit – Dual-Boot. Immer aktuellste Versionen.

    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}

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


    LG, Boy

    Joomla 5.1.0. – Fujitsu Intel Core i7-6700; 32 GB RAM, 2 SSDs je 1 TB, 3 TB HDDs je 2 TB, WIN11 (22H2) 64 Bit & Linux Mint 21.3 /64 Bit – Dual-Boot. Immer aktuellste Versionen.