Link um Inhaltselement

[trommlbomml]

Liebe Contao-Community,

Ich möchte also für ein Inhaltselement als gesamts einen Link herum erstellen. In meinem Anwendungsfall habe ich ein Inhaltselement Text mit einer CSS-Klasse, so dass es wie ein großer Button aussieht. Ich möchte auf den gesamten div-Klicken und den link auslösen können.

nach einigem googlen habe ich herausgefunden, dass auch jemand anderes dieses Problem hat:

Github-Issue

Wie sieht denn aktuell die Lage aus? Gibt es ggf. einen halbwegs adäquaten Workaround?

[neuland-agentur]

Du hast natürlich die Möglichkeit, ein <div> im "Texteditor" um den Inhalt zu bauen und das dann entsprechend komplett zu verlinken. Ist natürlich für den Redakteur keine ideale Lösung. Es kommt da etwas auf den konkreten Fall an, vorallem wie dynamisch das sein soll bzw. sein muss.

[planepix]

Schau dir einmal diese Erweiterung an: https://contao.org/de/extension-list...lement.de.html

Damit solltest du das umsetzen können.

[Bennie]

Es gäbe doch auch die Möglichkeit mittels Inhaltselement "Html" vor und nach dem Inhaltselement "Text" eine Verlinkung drumherum zu bauen. Dann benötigst Du keine Erweiterung und dem Redakteur gibst Du keine Rechte für das HTML Element , so kann er auch nichts "zerschießen"

[trommlbomml]

Danke für die zahlreichen antworten.

Du hast natürlich die Möglichkeit, ein <div> im "Texteditor" um den Inhalt zu bauen und das dann entsprechend komplett zu verlinken. Ist natürlich für den Redakteur keine ideale Lösung. Es kommt da etwas auf den konkreten Fall an, vorallem wie dynamisch das sein soll bzw. sein muss.

Es ist ein Inhaltselement mit Text im Gridsystem, so dass zwei Inhaltselemente nebeneinander sind. Das wäre vermutlich eine verkraftbare lösung.

Es gäbe doch auch die Möglichkeit mittels Inhaltselement "Html" vor und nach dem Inhaltselement "Text" eine Verlinkung drumherum zu bauen. Dann benötigst Du keine Erweiterung und dem Redakteur gibst Du keine Rechte für das HTML Element , so kann er auch nichts "zerschießen"

Glaube ich leider keine passende Lösung, weil ich das ganze noch im Grid angeordnet habe. Da müsste ich dann im HTML-Code die div selber klassifizieren.

Schau dir einmal diese Erweiterung an: https://contao.org/de/extension-list...lement.de.html

Damit solltest du das umsetzen können.

Cool! Das ist so in etwa, was ich gesucht hab. Die HTML5-Beschränkung ist natürlich doof, ich muss auch ältere Standards unterstützen.

[tab]

Cool! Das ist so in etwa, was ich gesucht hab. Die HTML5-Beschränkung ist natürlich doof, ich muss auch ältere Standards unterstützen.

Das ist keine Beschränkung. In älteren Standards darfst du sowieso keine block-Elemente wie z.B. ein <div> innerhalb eines <a></a> verwenden. Oder meinst du, dass du ältere Brwoser unterstützen musst? Da hilft einfach nur testen, ob alle zu unterstützenden Browser das dann auch richtig darstellen.

Alternativ kannst du eventuell einen Link bauen und absolut über deinem Inhaltselement positionieren.

[fivebytes]

Du könntest das auch recht einfach mit einem MiniScript lösen:

window.addEvent('domready', function(){

	// elements with class linkbox gets a link
	$$('.linkbox').addEvent('click', function(){
		if (this.getElement('a')) this.getElement('a').click();
	});
});

So reicht ein einfache Link innerhalb des Containers und der bekommt einfach nur die Klasse "linkbox".

[trommlbomml]

Das ist keine Beschränkung. In älteren Standards darfst du sowieso keine block-Elemente wie z.B. ein <div> innerhalb eines <a></a> verwenden. Oder meinst du, dass du ältere Brwoser unterstützen musst? Da hilft einfach nur testen, ob alle zu unterstützenden Browser das dann auch richtig darstellen.

Alternativ kannst du eventuell einen Link bauen und absolut über deinem Inhaltselement positionieren.

ich meine damit ältere Browser, die ja vermutlich kein HTML5 Unterstützen. Aber ich denke a um div herum sollte denke ich klappen, letztendlich werde ich als fallback innerhalb des elements ein Link auf das Bild machen, dann kann man halt darauf zumindest klicken, wenn das a um den div herum nicht funktioniert.

@fivebytes: Danke, sowas habe ich gerade versucht selbst zu tippen! ich werde aber trotzdem erstmal die Lösung mit dem a um den div einfach versuchen.

[lucina]

Wenn ich mir http://html5readiness.com anschaue, dann gibt es eigentlich keinen triftigen Grund mehr, HTML4 zu verwenden. Sorry.

[neuland-agentur]

Schau dir einmal diese Erweiterung an: https://contao.org/de/extension-list...lement.de.html

Damit solltest du das umsetzen können.

Richtig cool. Dieser Erweiterung war mir bislang noch nicht bekannt. Gerade einmal getestet, echt praktisch und genau das was du brauchst trommlbomml!

[trommlbomml]

Wenn ich mir http://html5readiness.com anschaue, dann gibt es eigentlich keinen triftigen Grund mehr, HTML4 zu verwenden. Sorry.

Es wäre hervorragend, wenn dem wirklich so wäre. Dass alle aktuellen Browser HTML5 unterstützen ist mir schon klar. Aber wie viel wirklich unterstützt ist, gerade was CSS angeht, bin doch etwas pessimistisch. Gerade im Mobile-bereich harkt es noch ein bisschen. Und dann fängt man doch wieder an Rückwärtskompatibel zu sein. So zumindest mein letzter Wissensstand.

[lucina]

Ob Mobilgeräte überhaupt noch in Betrieb sind wenn sie älter als drei Jahre sind? Und ob Mobilgeräte dann, wenn sie kein HTML5 rendern können, in der Lage sind, HTML4 vollständig darzustellen? Ich habe da meine Zweifel. Und für speziellere Fragen empfiehlt es sich ohnehin, http://caniuse.com/ zu Rate zu ziehen.

(seit drei Jahren keine Seite mehr mit HTML4 umgesetzt, keine Kundenbeschwerden. Null)

[tab]

Wenn du - aus für mich nicht nachvollziehbaren Gründen - meinst, HTML 4 benutzen zu müssen, dann bleibt dir nur Javascript oder ein div absolut über dem Inhaltselement zu positionieren und dieses zu verlinken. Denn, wie bereits geschrieben, in HTML 4 ist innerhalb eines a-Tags kein div erlaubt. Und ein Inhaltselement ist nun mal ein div. Da hilft dann auch kein Github-Issue. Wenn überhaupt, dann wird das wohl nur für HTML 5 kommen.