phplist: Interne Sprungmarken funktionieren nicht

[Julia]

Liebe Gemeinschaft,

zur Newsletter-Erstellung nutzen wir in unserer Orga phplist und haben folgendes Problem: Die Sprungmarken, die wir definieren, funktionieren nicht. Wir haben am Anfang ein Inhaltsverzeichnis und die einzelnen Einträge mit einer internen Sprungmarke versehen. Wenn ich mir diese als Test schicke, springt er sonst wo hin, aber nicht zu dem jeweiligen Eintrag!

In der Box, die sich in der Umgebung öffnet, steht der Anzeigetext und der Link-Typ ("Anker in dieser Seite"). Darunter steht dann aber "(Keine Anker im Dokument vorhanden)".

Im Quellcode sieht es folgendermaßen aus:

<title></title>
<style type="text/css">* {
 margin:0;
 padding:0;
 }
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eee;
}
#wrapper {
 max-width:800px;
 min-width:360px;
 margin:0 auto;
 padding:20px;
 background:#fff;
}
</style>
<div id="wrapper">

**Hier beginnt der Inhalt**

<h3><strong>Text</strong><br />

<p style="margin-left: 40px;">&rArr; <a href="#1">XYZ</a></p>

</h3>



**Hier steht weiterer Inhalt**

<h3 id="1">XYZ</h3>

Warum funktioniert das nicht? Es funktioniert mit allen Ankern nicht.Könntet ihr mir bitte helfen? Was müsste in dem Pop-Up vielleicht noch eingestellt werden (wenn man es nicht über den HTML-Code macht)?

LG

Julia

[Robert B.]

Moin Julia,

zur Newsletter-Erstellung nutzen wir in unserer Orga phplist und haben folgendes Problem: Die Sprungmarken, die wir definieren, funktionieren nicht.

In welchem Programm „funktioniert das nicht“?

Wir haben am Anfang ein Inhaltsverzeichnis und die einzelnen Einträge mit einer internen Sprungmarke versehen. Wenn ich mir diese als Test schicke, springt er sonst wo hin, aber nicht zu dem jeweiligen Eintrag!

Was heißt denn „sprint sonst wo hin“? Ist das zufällig oder immer an die gleiche Stelle?

<h3><strong>Text</strong><br />

<p style="margin-left: 40px;">&rArr; <a href="#1">XYZ</a></p>

</h3>

Äh, das ist falsches HTML, da eine h3 kein p enthalten darf. Dein p sieht eher wie eine Navigationsliste aus. Und es ist semantisch sinnlos, den gesamten Text einer Überschrift als strong auszuzeichnen.

Hier steht weiterer Inhalt

<h3 id="1">XYZ</h3>

Warum funktioniert das nicht? Es funktioniert mit allen Ankern nicht.

Kann es sein, dass das Programm, dass den Newsletter anzeigt, nicht mehr numerischen IDs umgehen kann? Lange Zeit war das gar nicht erlaubt. Aber dafür müsste man wissen, welche(s) Programm(e) den Newsletter anzeigen und nicht wie erwartet navigieren.

Viele Grüße
Robert

[Rolf B]

Hallo Julia,

Navigationsliste

HTML in Mails ist immer so eine Sache, weil viele Mailprogramme alt sind und einen dementsprechend alten HTML Renderer beinhalten. Wenn numerische IDs nicht funktionieren, ist das schonmal ein schlechtes Zeichen.

Ich trau mich daher gar nicht, list-style-type: '⇒ '; für die von Robert vorgeschlagene Navigationsliste ins Spiel zu bringen. &rArr geht in CSS nicht. Und der Pfeil als String geht nur, wenn (a) der HTML Renderer halbwegs aktuell ist und (b) die Mail als Unicode (also UTF-8) gesendet wird.

Ohne Unicode wäre list-style-type: '\21D2 '; die Alternative (ja, 2 Leerzeichen, das erste beendet die CSS-Escapesequenz).

Für einen Uralt-Mailclient bleibt tatsächlich nur list-style-type:none; und &rArr im Listitem.

Rolf

[Julia]

Hallo Rolf,

danke auch dir!

Das heißt, die Pfeile sind eher nicht geeignet, ist das korrekt? Ich denke, wir müssen nicht unbedingt auf Pfeilen beharren, das muss ich noch einmal mit meinem Team besprechen. Ohne Pfeil würde dann die Navigationsliste funktionieren?

Wo muss man den list-style-type eingeben? Das ist nicht dasselbe wie list-style ganz am Anfang oder doch? Und was meinst du mit dem Pfeil als Listitem? Entschuldige, ich bin wirklich Anfänger 🙈

Ganz liebe Grüße

Julia

[Rolf B]

Hallo Julia,

nein, die Pfeile kannst Du schon verwenden. Du musst sie nur auf die für euer Umfeld brauchbare Weise erzeugen.

Die Pfeile sind auch nicht der Grund dafür, dass die Links nicht funkionieren. Bisher dachten wir ja, das läge an den numerischen Sprungmarken. Wenn aber auch href="#Test" nicht funktioniert, um zu id="Test" zu springen, dann wird's kniffliger.

In Outlook kannst Du die Mail öffnen (wirklich öffnen, als neues Fenster, nicht die Vorschauansicht), dann hast Du oben den Nachrichten-Tab und irgendwo ein "Aktionen" Menü. Darin gibt's, ggf. in einem Untermenü, den Punkt "Quelltext anzeigen".

Mach das mal und guck, was aus deinen Links und Ids geworden ist. Vielleicht gibst Du ja gar nicht das aus, was Du meinst. Oder es wird im Mailserver zu Mehl zerrieben.

Rolf

[Tabellenkalk]

Hallo,

Oder es wird im Mailserver zu Mehl zerrieben.

Dann wär's ein Mehlserver…

Gruß
Kalk

[Julia]

Lieber Rolf,

danke dir!

Ich werde das am Dienstag, wenn ich wieder arbeite, mal alles austesten. Ich werde noch einmal Text als Sprungmarke verwenden und es noch einmal ausprobieren. D.h., ihr werde eventuell erst dann wieder von mir eine dezidierte Rückmeldung erhalten!

In der Mail, die ich mir testweise gesendet habe, und die ich mir nun im HTML-Code angesehen habe, sehen die Marken so aus wie in phplist, also kein "Mehlserver". 😅 Es ist echt wie verhext!

Ich werde kommende Woche mit meinem Team besprechen, ob ich den Code hier komplett mal hochladen könnte.

Euch erst einmal ein wunderbares Wochenende und bis nächste Woche 😀

Julia

[Julia]

Morgen Robert,

danke für deine rasche Antwort!

Zunächst einmal hat der Newsletter bei mir im Outlook (verknüpft mit meinem Yahoo-Account) nicht funktioniert. Das heißt der Newsletter wird als Mail versendet. Mir ist bewusst, dass es da häufige Probleme gibt mit den unterschiedlichsten Mail-Servern.

Das gute an phplist ist, dass man keine HTML-Programmierungskenntnisse benötigt aufgrund des WYSIWYG-Editoren, daher ist es verwunderlich, dass er dann falschen HTML-Code erzeugt. Kann das sein?

In der Mail springt er meistens relativ zum Anfang des Newsletters. Manchmal springt er aber auch einfach an eine Stelle mitten im Newsletter. Soweit ich das sehen konnte, sind das je nach Sprungmarke immer diesselben Stellen im Newsletter, die angesprungen werden.

Dieser in meiner ersten Mail genannte Inhaltsverzeichnis-Bereich sieht im Newsletter so aus:

Alle Interessierte

--> Inhalt 1
--> Inhalt 2

usw.

Später kommen dann die einzelnen Inhalte mit mehr Informationen dazu.

"Alle Interessierte" ist die H3-Überschrift fettgedruckt. Wie würdest du das programmieren, damit die Überschrift fett ist, weil du meintest es ist semantisch sinnlos?

Alle "Inhalte" sind mit internen Sprungmarken versehen und wie Hyper-Links unterstrichen, sodass die Leser direkt an die jeweilige Stelle des Newsletters gelangen sollten, was aber nicht funktioniert.

Also wir könnten das eventuell als Navigationsliste programmieren? Kann man dann innerhalb des <nav> Elements alle Inhalte bündeln, müsste gehen oder? Und wie bekommt man den Text des jeweiligen Inhalts in dem <nav>-Element angezeigt (nicht die Überschrift, sondern "Inhalt1", "Inhalt2" etc.)? Dürfen denn innerhalb des <nav>-Elements dann <p>-Elemente stehen oder auch nicht? Ich hoffe, es ist verständlich, auf was ich hinaus will, ansonsten gerne nachfragen!😀

Testweise habe ich es auch mit einer nicht-numerischen Sprungmarke versucht (#Test), hat aber auch nicht funktioniert.

Da ich HTML-Einsteiger bin, bitte möglichst einsteigerfreundlich erklären 🙈 Danke!🙂

Liebe Grüße zurück

Julia

[Robert B.]

Moin Julia,

Das gute an phplist ist, dass man keine HTML-Programmierungskenntnisse benötigt aufgrund des WYSIWYG-Editoren, daher ist es verwunderlich, dass er dann falschen HTML-Code erzeugt. Kann das sein?

Leider ja. Ich habe schon einige WYSIWYG-Editoren gesehen, die zum Teil katastrophalen Code erzeugen. WYSIWYG ist bei HTML konzeptionell eh nicht gegeben, da das M in HTML für Markup steht, also Textauszeichnung. Für das Aussehen ist CSS zuständig.

In der Mail springt er meistens relativ zum Anfang des Newsletters. Manchmal springt er aber auch einfach an eine Stelle mitten im Newsletter. Soweit ich das sehen konnte, sind das je nach Sprungmarke immer diesselben Stellen im Newsletter, die angesprungen werden.

Das wäre jetzt mal spannend zu wissen, wie der erzeugte HTML-Code dafür aussieht und ob das auch in anderen Emailprogrammen der Fall ist.

"Alle Interessierte" ist die H3-Überschrift fettgedruckt. Wie würdest du das programmieren, damit die Überschrift fett ist, weil du meintest es ist semantisch sinnlos?

strong heißt stark betont, nicht „Fettdruck“! Und eine komplette Überschrift stark zu betonen, erscheint mir nicht logisch.

Wenn dein h3 nicht fett genug ist (was es standardmäßig doch sein sollte), nimm CSS dafür:

h3 {
    font-weight: bold;
}

Alle "Inhalte" sind mit internen Sprungmarken versehen und wie Hyper-Links unterstrichen, sodass die Leser direkt an die jeweilige Stelle des Newsletters gelangen sollten, was aber nicht funktioniert.

Wie sieht eigentlich der Code dafür aus? Aus deinen Schnipseln konnte ich jetzt nirgends erkennen, dass da die h3 mit den id unterstrichen dargestellt werden.

Also wir könnten das eventuell als Navigationsliste programmieren? Kann man dann innerhalb des <nav> Elements alle Inhalte bündeln, müsste gehen oder?

Aus unserem Wiki (es ist ja nicht so, als hätte ich den Artikel vorher schon verlinkt):

Das nav-Element umschließt Navigationsleisten und Menüs, wobei es neben einer unsortierten Liste mit den Verweisen auch eine Überschrift oder ähnliches enthalten kann.

„Alle Inhalte“ ist also nicht korrekt, weil nav nur die Navigation enthalten soll.

Und wie bekommt man den Text des jeweiligen Inhalts in dem <nav>-Element angezeigt (nicht die Überschrift, sondern "Inhalt1", "Inhalt2" etc.)? Dürfen denn innerhalb des <nav>-Elements dann <p>-Elemente stehen oder auch nicht?

Weil wir gerade beim Wiki sind: Die Frage deutet darauf hin, dass auch das Tutorial zur Seitenstrukturierung für dich interessant ist.

Viele Grüße
Robert

[Julia]

Hallo an alle,

also ich bin jetzt heute mit den internen Sprungmarken weitergekommen! Es lag nicht an den Ziffern, auch nicht an der Einbettung in eine Tabelle. Es ist ganz kurios. Also Folgendes:

Es ist zumindest nicht wie in dem Wiki-Eintrag:

seiteninterne_Verweise

So war es auch ursprünglich verlinkt!

Bei phplist muss man dem Element, auf das verwiesen werden soll, noch ein a-Element verpassen:

<h1 id="zweitens"><a id="zweitens" name="zweitens">XYZ</a></h1>

Das ID-Element direkt hinter h1 erkennt er nicht, warum auch immer! Erst mit dem weiteren a-Element kann man die Verknüpfung herstellen.

Für alle die es interessiert: Im Editor geht man folgendermaßen vor: Das Element im Text, auf das gesprungen werden soll (beispielsweise "zweitens") markieren und einen Anker setzen (Fahne im Editor). Dann den Namen eingeben (in unserem Fall: "zweitens"). Die Farbe lässt sich auch noch im Editor anpassen.

Zurückgehen zu dem Ursprungselement, von dem aus gesprungen werden soll, dieses markieren und das Link-Symbol anklicken. Es öffnet sich ein Bearbeitungsfenster, dort unter "Link-Typ" "Anker in dieser Seite" anklicken. Weil man zuvor schon den Anker "zweitens" gesetzt hat, kann man nun bei den erscheinenden zwei kleinen Eingabe-Fenstern diesen auswählen. Fertig!

Es wird dann z.B. folgender Code produziert:

<p style="margin-left: 40px;">&rArr;&nbsp;<a href="#zweitens">XYZ</a></p>

<h1 id="zweitens"><a id="zweitens" name="zweitens">XYZ</a></h1>

Vom HTML-Code her wahrscheinlich nicht korrekt, aber es klappt zumindest in phplist.

Danke noch einmal an alle!

Liebe Grüße

Julia

P.S.: Weil das gefragt wurde: Das Template, das ich nutze, fängt folgendermaßen an:

<!doctype html>
<html>
<head><meta name="viewport" content="width=device-width" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>[SUBJECT]</title>
	<style type="text/css">

Es ist das responsive Template von GitHUB email.html

[Auge]

Hallo

Bei phplist muss man dem Element, auf das verwiesen werden soll, noch ein a-Element verpassen:

<h1 id="zweitens"><a id="zweitens" name="zweitens">XYZ</a></h1>

Das ID-Element direkt hinter h1 erkennt er nicht, warum auch immer! Erst mit dem weiteren a-Element kann man die Verknüpfung herstellen.

Zur Nomenklatur: „Das ID-Element direkt hinter h1“ meint das ID-Attribut der Überschrift, nicht ein Element.

Deine Schlussfolgerung ist teilweise – ohne jegliche Schuldzuweisung – eine Fehlinterpretation aufgrund fehlender historischer Kenntnisse.

1. Das Problem ist nicht phplist. Der erzeugt einfach nur den HTML-Quelltext, den er erzeugen soll. Das Problem sind E-Mail-Clients mit quasi unfähigen HTML-Renderern, die mit einigermaßen modernem HTML nicht umgehen können. Schau mal mit Rolfs Anleitung eine typische Werbe-E-Mail im Quelltext an. Da siehst du, was für Verrenkungen die im Quelltext machen, damit in allen typischen E-Mail-Clients eine einigermaßen gleichartige Ausgabe generiert wird.
2. Deine Konstruktion <h1 id="zweitens"><a id="zweitens" name="zweitens">… ist fehlerhaft. Eine ID muss in einem Dokument eindeutig sein. Sie darf also nur einmalig verwendet werden. Damit, sie in der Überschrift und im Link verwendet zu haben, brichst du diese Regel.
3. Das, was die Sprunganker mutmaßlich funktioneren lässt, ist das Attribut name. Das ist nämlich in HTML die erste Möglichkeit gewesen, einen Sprunganker als Ziel eines Links zu definieren. Das funktioniert quasi überall. <h1><a name="zweitens">… sollte also prinzipiell reichen.

Tschö, Auge

[edit]: (2024-02-07 10:37) ein paar Typos

[Julia]

Danke dir für die Aufklärung Auge!

Ich werde nochmal gucken, ob ich dieses Id-Attribut im h1-Element im Editor wegbekomme. Das Problem ist, wir sind alle keine IT-ler, d.h., es muss mit dem Editor funktionieren. Ich schaue mir das bald noch einmal an! Bin jetzt schon im Feierabend! 🙂

Ihr seid auf alle Fälle eine große Hilfe, vielen Dank!🙏

Einen wunderbaren Abend für euch alle!

Julia

[Robert B.]

Moin Julia,

Das Problem ist, wir sind alle keine IT-ler, d.h., es muss mit dem Editor funktionieren.

Naja, das wichtigste ist doch, dass es in den Email-Programmen der Empfänger funktioniert 😉

Ihr seid auf alle Fälle eine große Hilfe, vielen Dank!🙏

Einen wunderbaren Abend für euch alle!

Gerne und gleichfalls!

Viele Grüße
Robert

[Raketenwilli]

<p style="margin-left: 40px;">&rArr; <a href="#1">XYZ</a></p>
…
<h3 id="1">XYZ</h3>

Hm.

The syntax for id is: write a hash character (#), followed by an id name.

https://www.w3schools.com/html/html_id.asp

Ein „name“ ist ein String. Deine ID besteht aus einer Ziffer bzw. Zahl. Ich denke, diese müsste mit einem Buchstabe oder dem Unterstrich beginnen.

Teste also

<p style="margin-left: 40px;">&rArr; <a href="#_1">XYZ</a></p>
…
<h3 id="_1">XYZ</h3>

[Rolf B]

Hallo Raketenwilli,

du zitierst die HTML 4 Regeln.

In HTML 5 ist id="1" in Ordnung, und ein href="#1" auch. Nur im CSS muss man es escapen.

Aber deswegen fragten wir ja nach dem Client, der das anzeigt. Ein Outlook 2013 oder so könnte durchaus noch HTML 4-konform rendern.

Rolf

[Raketenwilli]

Hallo Raketenwilli,

du zitierst die HTML 4 Regeln.

In HTML 5 ist id="1" in Ordnung, und ein href="#1" auch. Nur im CSS muss man es escapen.

Aber deswegen fragten wir ja nach dem Client, der das anzeigt. Ein Outlook 2013 oder so könnte durchaus noch HTML 4-konform rendern.

Rolf

Jetzt hast Du mich unterbrochen. Ich setze fort:

Aber:

https://wiki.selfhtml.org/wiki/HTML/Attribute/id

Beachten Sie: Die Regeln für ids in HTML und CSS sind unterschiedlich. Zum Beispiel darf man in HTML inzwischen eine Ziffer an erster Stelle haben und vieles mehr.

Es kann also auch davon abhängen, welche HTML-Version im Doctype behauptet wurde.

• https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundgerüst#Doctype
• https://www.mediaevent.de/html/doctype.html

[Rolf B]

Hallo Raketenwilli,

schön, dass wir uns einig sind. Und jetzt müsste uns Julia nur noch den Teil ihres HTML zeigen, wo sie den Doctype setzt.

Wobei ein HTML5-fähiger Browser meines Wissens immer HTML5 anwendet, auch wenn der Doctype HTML 1.0 verlangt. Die Gefahr ist eher - aber ich wiederhole mich.

Rolf

[nix]

Bin vor kurzem irgendwo (w3.org?) über ein Stück Text gestolpert, in dem sinngemäß stand, daß DOCTYPE Einluß haben kann („wenn’s denn sein muß“), die Browser aber davon eher Abstand nehmen sollten. Sozusagen „HTML in der Migration“ — und die Browser sollten das unterstützen.

[Gunnar Bittersmann]

@@Raketenwilli

Es kann also auch davon abhängen, welche HTML-Version im Doctype behauptet wurde.

Nein. Der Doctype hat Einfluss auf die Darstellung, sonst nichts.

Weiterlesen im Archiv.

Kwakoni Yiquan