Foximan: Anker setzen ohne HTML-Kenntnisse

problematische Seite

Ich habe Mühe mit HTML-Befehlen. Ich stelle meine Websites die ich bisher mit einem Programm meines Hosters erstellt habe auf WordPress um. Bei den Spielregeln möchte ich Anker setzen (falls dies der richtige Ausdruck ist). Im verlinkten Beispiel Wie kann ich hier Anker setzen?sollte beispielsweise beim Anklicken von (1) der Cursor auf die Beschreibung (2) springen. Sicher geht das auch ohne HTML-Kenntnisse, mit wenigen Klicks. Auf meinem bisherigen Programm war das jedenfalls so, also muss das auch mit WP möglich sein.

Danke für Deine Hilfe. Foximan

  1. problematische Seite

    Hallo Foximan,

    Ganz ohne HTML-Kenntnisse wirds wohl nicht gehen: https://wiki.selfhtml.org/wiki/HTML/Regeln/Seiteninterne_Verweise

    Bis demnächst
    Matthias

    --
    Rosen sind rot.
    1. problematische Seite

      Danke Mathias für Deinen Hinweis. Ich kenne diese Seite, gestehe aber, dass das alles für mich "Bahnhof" ist. Kannst Du mir allenfalls kurz per Team-Viewer helfen, offensichtlich ist es (wenn man weiss wie, eine Kleinigkeit. Ich bin lernfähig, aber etwas "schwer von Begrifft". Danke. Foximan.

      1. problematische Seite

        Hallo Foximan,

        Kannst Du mir allenfalls kurz per Team-Viewer helfen,

        Leider nein.

        Bis demnächst
        Matthias

        --
        Rosen sind rot.
        1. problematische Seite

          ok, kann ich verstehen. Kannst Du mir bitte helfen indem Du die entsprechenden Einträge die ich in der Musterbeilage machen musst nennstMuster für Anker-setzen Danke.

          1. problematische Seite

            Hallo,

            die interne Navigation funktioniert so:

            <a href="#sprungziel">Zum Sprungziel</a><h2 id="sprungziel">Sprungziel</h2>
            

            Statt <h2> kann da auch ein anderes sinnvolles Element mit der id versehen werden.

            Gruß
            Jürgen

            1. problematische Seite

              Danke vielmals, langsam komme ich der Lösung näher. Kannst Du mir bitte noch genau erklären, an welcher Stelle ich die neuen HTML-Befehle eingeben muss: hier: Anker-1 und hier: Anker-2

              Sorry, dass ich so schwer von Begriff bin und danke für die erneute Hilfe. Foximan

              1. problematische Seite

                Hallo,

                du musst aus dem Element mit dem Linktext einen Link machen, also <span ...>...</span> durch <a href="#..." ...>...</a> ersetzen.

                Beim Sprungziel musst du dem <span ... dann die ID aus dem Link geben.

                Ich habe das jetzt nicht aus deinen Bilder abgeschrieben. Besser wäre es, wenn du den Queltext als Text und nicht als Bild postest.

                Gruß
                Jürgen

              2. problematische Seite

                sorry dass ich so begriffstutzig bin. Habe 72 Jahre lang nie mit HTML gearbeitet . . .

                du musst aus dem Element mit dem Linktext einen Link machen, also <span ...>...</span> durch <a href="#..." ...>...</a> ersetzen.

                Aus welchem Element wie einen Link machen?

                Hier noch die beiden Muster als Text-Version, hoffe ich habe sie richtig kopiert.

                <li>Flexible Mannschaftformen.</li>
                 	<li><span style="color: #ff0000;">(1) So wird gespielt.</span></li>
                 	<li>Maximalpunkte pro Kehre und Dauer einer Spielrunde.</li>
                
                </ul>
                <strong><span style="color: #ff0000;">(2) So wird gespielt.</span>
                </strong>Ziel ist es, möglichst viele Stöcke der eigenen Mannschaft in «Bestlage», also näher zur Daube als der Gegner zu bringen. Die Daube (oder Puck) ist ein Ring mit 12 cm Durchmesser. Gewertet werden nur Stöcke, die sich innerhalb des Zielfelds befinden. Die Daube wird vor Beginn einer Kehre (Runde) auf das Mittelkreuz gelegt. Die beiden Mannschaften (wir nennen sie in dieser Anleitung <span
                

                Danke für Deine Geduld. Foximan

                1. problematische Seite

                  Hallo Foximan,

                  ersetze

                  <li><span style="color: #ff0000;">(1) So wird gespielt.</span></li>
                  

                  durch

                  <li><a href="#Spielregeln">(1) So wird gespielt.</a></li>
                  

                  und

                  <strong><span style="color: #ff0000;">(2) So wird gespielt.</span></strong>
                  

                  durch

                  <strong id="Spielregeln"><span style="color: #ff0000;">(2) So wird gespielt.</span></strong>
                  

                  Bis demnächst
                  Matthias

                  --
                  Rosen sind rot.
                  1. problematische Seite

                    Ich danke allen die an meiner Blödheit fast verzweifeln. Ich habe genau das gemacht was mir Matthias empfohlen hat. Leider ohne Erfolg. Ich attache ein pdf-File, was ich gemacht habe. V Problem Anker setzen vielleicht entdeckt jemand den Fehler, wenn nicht, gebe ich auf.

                    Hier die Website mit dem Problem: problematische Website

                    Ich danke allen die sich bemüht haben mir zu helfen. Foximan.

                    1. problematische Seite

                      Hallo Foximan,

                      Ich:

                      <strong id="Spielregeln"><span style="color: #ff0000;">(2) So wird gespielt.</span></strong>
                      

                      Du:

                      <strong> id="Spielregeln"><span style="color: #ff0000;">(2) So wird gespielt.</span></strong>
                      

                      Bis demnächst
                      Matthias

                      --
                      Rosen sind rot.
                    2. problematische Seite

                      Hallo

                      Ich danke allen die an meiner Blödheit fast verzweifeln. Ich habe genau das gemacht was mir Matthias empfohlen hat.

                      Nein, hast du nicht.

                      vielleicht entdeckt jemand den Fehler, wenn nicht, gebe ich auf.

                      Zeile 355 deines HTML-Quellcodes (Quelltextansicht des Firefox):

                      <p><strong> id=&#8220;Spielregeln&#8220;><span style="color: #ff0000;">(2) So wird gespielt.</span></strong><br />
                      </strong>
                      

                      Abgesehen davon, dass das letzte </strong> eines zuviel ist, hast du das id-Attribut erstens außerhalb des Tags notiert und zweitens die Anführungszeichen (") maskiert (&#8220;). Verändere <strong> id=&#8220;Spielregeln&#8220;> zu <strong id="Spielregeln"> und das Attribut wird vom Browser als Linkziel erkannt.

                      Tschö, Auge

                      --
                      Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
                      Toller Dampf voraus von Terry Pratchett
                      1. problematische Seite

                        Danke Auge. Du sprichst zu mir in Rätseln. Ich habe die Quellcodes in Wordpress editiert und hier habe ich keine Zeilen-Nummern.

                        Auf dem WordPress Editor finde ich nirgendwo Bezeichnungen wie id=&8220:Spielregeln&#8220; etc die ich ergänzen resp. ersetzen kann.

                        Frage a) habe ich die vorgängig erhaltenen Hinweise korrekt übertragen? Frage b) wie komme ich auf die Zeile 355 der Quelltextansicht des Firefox?

                        Ist mir noch zu helfen?

                        Danke für eure Geduld. Foximan

                        1. problematische Seite

                          Hallo,

                          du hast doch den Änderungsvorschlag von Matthias mit einem kleinen Fehler eingebaut. Jetzt musst du es nur noch korrigieren, so wie es dir Matthias hier gezeigt hat.

                          Gruß
                          Jürgen

                          1. problematische Seite

                            Ich bin über meine Unfähigkeit und die Person die mir das ganze "eingebrockt" hat derart verärgert, dass ich den Computer für heute abschalte.

                            Ich gebe aber nicht auf und melde mich am Freitag wieder.

                            Herzlichen Dank allen die versucht haben, mir zu helfen. Foximan

                            1. problematische Seite

                              Sorry liebe zuvorkommende und verständnisvolle Helfer.

                              Vor lauter "Pröbeln" hat es mir die Page "verschossen" und ich musste die Auflistungen neu erstellen. Hier sind die auskopierten Einträge der entsprechenden Page: Spielregeln mit Anker

                              Die html-Einträge sehen nun anders aus als die gestern gemeldeten, hier diese also neu einkopiert:

                              Im ersten Auflistungspunkt soll der Anker mit Bezeichnung Anker-1 gesetzt werden. So sieht der html-Text aus, vor- und nachgängige Zeile sicherheitshalber auch aufgeführt:

                              <ul> <li>Geschichtliche Entwicklung des Eisstockschiessens. (hier am Anfang der Zeile Anker-1 setzen)</li> <li>Kleidung und Schuhe zum Eisstockschiessen.</li>

                              Dieser Anker-1 sollte veranlassen, dass der Cursor direkt an den Beginn des Abschnittes Geschichtliche Entwicklung. springt.

                              Wie es unter Sportlern üblich ist sagen wir uns alle Du

                              <strong>Geschichtliche Entwicklung. </strong>(an diese Stelle soll der Anker-1 springen)<strong> </strong>Vermutlich entstand das Eisstockschiessen bzw. seine Vorläufer im 13. Jahrhundert in Skand

                              Als Anker-Bezeichnungen möchte ich folgende ID-Begriffe verwenden: Anker-1 für dieses Beispiel, für die weiteren Zeilen Anker-2, Anker-3 usw.

                              Bitte meldet mir nochmals (bitte wiederum "dubelisicher"), welche Änderungen ich an welcher Stelle eintragen muss. Erklärt mir bitte auch, falls von euch angegeben Anführungs-(") und Schlusszeichen (") nicht geschrieben werden dürfen. Die an beiden Stellen in Klammern angegebenen Bezeichnungen (hier am Anfang der Zeile . . .) dienen hier nur als Hinweis, im Originaltext werde ich sie löschen.

                              Ich bin zuversichtlich, dass ich es mit eurer Hilfe nun endlich schaffe, herzlichen Dank für die unendliche Geduld.

                              PS: Kann ich irgendwo eine Liste herunterladen die mir sagt, was die Befehle <strong> - <li> - /span - /a usw. bedeuten, damit ich etwas klarer sehe?

                              Foximan

                              1. problematische Seite

                                Hallo,

                                Kann ich irgendwo eine Liste herunterladen die mir sagt, was die Befehle <strong> - <li> - /span - /a usw. bedeuten, damit ich etwas klarer sehe?

                                Elemente, nicht Befehle

                                Gruß
                                Kalk

                                1. problematische Seite

                                  Hallo kalk.

                                  Danke für den Link, html wird für mich Schritt für Schritt verständlicher.

                                  Gruss Foximan

                              2. problematische Seite

                                Hallo Foximan,

                                Bitte meldet mir nochmals (bitte wiederum "dubelisicher"), welche Änderungen ich an welcher Stelle eintragen muss.

                                Ist die konkrete Hilfe noch notwendig?

                                Bis demnächst
                                Matthias

                                --
                                Rosen sind rot.
                                1. problematische Seite

                                  Lieber Matthias, ja ich bin auf diese Hilfe angewiesen, danke. Foximan

                              3. problematische Seite

                                Hallo Foximan,

                                <ul>
                                 	<li>Geschichtliche Entwicklung des Eisstockschiessens. (hier am Anfang der Zeile Anker-1 setzen)</li>
                                 	<li>Kleidung und Schuhe zum Eisstockschiessen.</li>
                                
                                <strong>Geschichtliche Entwicklung. </strong>(an diese Stelle soll der Anker-1 springen)<strong>
                                </strong>Vermutlich entstand das Eisstockschiessen bzw. seine Vorläufer im 13. Jahrhundert in Skand
                                

                                Als Anker-Bezeichnungen möchte ich folgende ID-Begriffe verwenden: Anker-1 für dieses Beispiel, für die weiteren Zeilen Anker-2, Anker-3 usw.

                                Als Anker-Bezeichnungen möchtest du aussagekräftige Begriffe verwenden

                                <ul>
                                 	<li><a href="#Geschichte">Geschichtliche Entwicklung des Eisstockschiessens.</a> (Das ist ein Verweis auf den Anker, bei klick wird zum Anker gesprungen)</li>
                                
                                <strong id="Geschichte">Geschichtliche Entwicklung. </strong>(Das ist der Anker.)
                                

                                Bis demnächst
                                Matthias

                                --
                                Rosen sind rot.
                                1. problematische Seite

                                  Danke Matthias, JürgenB und Auge für eure Geduld und eure Hilfe. Dank euch ist mein Selbstvertrauen wieder stark aufgewertet. Allerdings habe ich immer noch eine Unklarheit. Obwohl ich diesmal genau den Anweisungen gefolgt bin werden die von mir gewünschten Links (wie leider schon früher 👎 ) nicht korrekt angezeigt:

                                  so sollte er angezeigt werden:

                                  so wird er angezeigt:

                                  Dieser Fehler trat schon nach den von mir umgesetzten Tipps von Matthias und Auge auf, daher habe ich (in der Meinung, ich sei ein hoffnungsloser Fall) resigniert und erst anfangs Woche wieder um Hilfe gebeten.

                                  Dafür gibt es meiner Ansicht nach zwei Erklärungen: a) nur ICH sehe die Anzeigen falsch, ihr seht sie vollkommen korrekt. b) der Menubalken wurde von meinem Supporter falsch eingerichtet, er unterdrückt die beiden ersten Zeilen, auch bei euch.

                                  Falls b) zutrifft realisiere ich eine pragmatische Lösung die am wenigsten Arbeit gibt: Ich setze die entsprechenden Anker einfach einen Abschnitt weiter oben hin, that's it. Denn mein Supporter ist leider ausgefallen und ich möchte mir keine unnötigen neuen Probleme schaffen.

                                  Bitte meldet wir, ob Ansicht a) oder b) zutrifft, je nachdem werde ich dann die Anker umplazieren. Hier sicherheitshalber nochmals der Link auf die entsprechende Page: betroffene Page

                                  Ich danke euch herzlich für Eure Hilfe. Wenn man weiss WIE, ist html gar nicht so schwierig. Doch zuerst muss man das WIE kennen.

                                  Foximan✌️

                                  1. problematische Seite

                                    Hallo Foximan,

                                    Durch das Navigieren zu einem Anker wird dieser in der ersten Zeile des Browsers angezeigt. Dadurch verschwindet er unter der Navigation. Eine Lösung dafür gibt es mit reinem HTML nicht.

                                    Bis demnächst
                                    Matthias

                                    --
                                    Rosen sind rot.
                                    1. problematische Seite

                                      Liebe Freunde der html-Programmierung🌝

                                      Danke für eure wertvolle Hilfe. Ich bin froh, dass man mit html nicht alle Probleme lösen kann, manchmal hilft eben logisches Denken ✌️ , fast unlösbare Probleme zu lösen.

                                      ICH habe MEINE "Anker-Probleme" mit eurer Hilfe UND meinem logischen Denken gelöst und html "überlistet". Schaut euch hier das Resultat an, ich bin ein ganz klein wenig stolz darauf: so habe ich html überlistet

                                      ✔️ Damit ist mein Problem definitiv gelöst. ✔️

                                      ❤️ Danke, danke, danke ❤️ Foximan

                                      1. problematische Seite

                                        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

                                        --
                                        sumpsi - posui - clusi
                                        1. problematische Seite

                                          Hallo Rolf.

                                          Langsam beginnt mir html und css Spass zu machen. Ich habe absichtlich auf den ersten Informationsblock keinen Link vorgesehen, eben wegen diesem Nachteil. Doch ich habe selbst gemerkt, dass meine "Notlösung" nicht sehr elegant ist, vor allem, wenn der vorherige Abschnitt mehrere Zeilen umfasst. Doch immer noch besser als eine Verlinkung wo der Interessent dann zuerst wieder nach oben scrollen muss. Da sich diese Website an Besucher wendet, die (ähnlich wie ich) wenig oder noch weniger (!) Erfahrungen haben mit Links wollte ich einfach die für mich beste Lösung finden. Es wird übrigens auf dieser Website keine weiteren Verlinkungen innerhalb der gleichen Seite geben.

                                          Ich bin Dir jedoch für Deine super-professionellen Tipps sehr dankbar und werde sie in einer freien Stunde umsetzen. Melde Dir das dann.

                                          Danke und en schöne Tag.👆 Foximan