Frage zum Wiki-Artikel „Gestaltung_mit_CSS“

[Popeyeberlin1]

Hallo werte Community!

Ich habe ein Problem beim CSS und komme einfach nicht auf die Lösung. Ich schließe nicht aus, den Wald vor lauter Bäumen nicht zu sehen und bitte deshalb um einen kleinen Denkanstoß:-)

Ich möchte auf einer HTML-Seite ein Bild einfügen, dass als Link in einer Textdatei hinterlegt ist. In der Textdatei deshalb, da es sich immer wieder ändert.

Nehm ich den Link direkt, klappt es mit

<img id="links" src="http://....../flags/tr.svg">

einbinden, ausrichten usw.! Wie aber bekomme ich es hin, dass mein Stylesheet den Link aus der Textdatei "Flag.txt" ausliest/nimmt!

Geht das mit CSS überhaupt? Im Bash-Skript mach ich das mit Variablen zuordnen, im CSS steh ich voll aufm Schlauch:-o

Vielleicht kann mir jemand auf die Sprünge helfen. Bitte!

VG

Popeye

[MudGuard]

Hi,

Ich habe ein Problem beim CSS

nein.

Ich möchte auf einer HTML-Seite ein Bild einfügen, dass als Link in einer Textdatei hinterlegt ist. In der Textdatei deshalb, da es sich immer wieder ändert.

Nehm ich den Link direkt, klappt es mit

<img id="links" src="http://....../flags/tr.svg">

einbinden, ausrichten usw.! Wie aber bekomme ich es hin, dass mein Stylesheet den Link aus der Textdatei "Flag.txt" ausliest/nimmt!

Dazu brauchst Du eine serverseitige Technik (PHP, ...), die die Datei ausliest und an der passenden Stelle ins HTML einsetzt, oder aber, falls die Text-Datei per HTTP erreichbar ist (und sein soll), Javascript (Text-Datei per "Ajax" holen, und dann die URL per JS ins img-Element einsetzen).

Geht das mit CSS überhaupt?

Nein.

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo Popeyeberlin1,

dass als Link in einer Textdatei hinterlegt ist

Falls Du das so gemacht hast, wie ich es zu verstehen glaube: Ein Bild ist kein Link. Falls Du einen click-Handler darauf registriert haben solltest - lass das. Ein <img> Element ist nicht interaktiv.

Ein Link ist ein <a> Element. Du kannst
<a href="..."><img id="links" alt="?" src="..."></a>
ins HTML schreiben. Das ist ist ein Bild-Link.

<img id="links" src="http://....../flags/tr.svg">

Dies ist ungültiges HTML. Ein img Element braucht zwingend ein alt-Attribut. Weitere Informationen in unserem Wiki und in der HTML Spezifikation

D.h. so einfach ist die Nummer gegebenenfalls nicht. Du musst für deinen Anwendungsfall klären, ob sich das alt-Attribut ebenfalls ändern muss, wenn sich das Bild ändert. Das ist ohne Kontextinformationen von hier aus nicht entscheidbar. Wenn sich das alt-Attribut mit ändern muss, dann brauchst Du eine flags.txt Datei, die beide Informationen enthält. Und was ist mit der Link-URL - bleibt die gleich?

Weiteres Problem: Das src-Attribut eines img Elements kannst Du mit CSS nicht beeinflussen. Never ever. Das geht (1) am Server, wenn Du die Seite mit einem Programm generierst (z.B. PHP) oder (2) im Browser, wenn Du die Informationen für den Link mit JavaScript vom Server nachliest und das img-Element nach Bedarf anpasst. Die zweite Lösung ist allerdings unschön, weil das Nachlesen Zeit braucht und ggf. für einen Moment das unangepasste Bild sichtbar ist.

Wenn das Bild rein dekorativen Charakter hat, kannst Du das alt Attribut leer lassen (aber nicht weglassen). Für den Benutzer ist dann nur der Link-Text relevant. In diesem Fall könntest Du aber das img Element auch ganz weglassen und dafür dem a Element ein background-image geben. Die Größe des a Elements musst Du dann natürlich auf anderem Weg festlegen (die CSS Angaben display:inline-block, width und height helfen da weiter), und das könntest Du mit CSS beeinflussen. Falls die Link-URL immer gleich bleibt - wäre es möglich, dass Du deine flags.txt durch eine flags.css ersetzt und da einfach die erforderliche CSS Regeln notierst?

#links {
   background-image: url(xy.svg);
}
#links::before {
   content: "XY Link";
}

Die erste Regel legt das Hintergrundbild fest, die zweite Regel brauchst Du dann, wenn sich zusätzlich zum Bild auch der Link-Text ändert. Sie setzt ein ::before-Pseudoelement in den Link, mit dem Text, den der Benutzer gezeigt oder vorgelesen bekommt.

Wäre es zumutbar, eine solche Datei zu pflegen? Serverseitig müsstest Du dann noch festlegen, dass diese Datei mit einem passenden Expiration-Header ausgeliefert wird, damit sie nicht zu lange gecached wird, denn sonst bekommen die Anwender ein veraltetes Bild mit veraltetem Text.

Aber wie gesagt, das bringt nur was wenn sich die Link-URL nicht ändert. Ein href-Attribut ist mit CSS nicht zu beeinflussen.

Mit Server-Side-Includes oder PHP könntest Du auch den HTML Teil, der den Link enthält, in eine separate HTML Datei auslagern und an der benötigten Stelle einbinden. Du müsstest dann bei Änderungen an Link-URL, Bild-URL, Alt-Text oder Link-Text nur dieses Snippet ändern und die Änderung taucht automagisch überall auf, wo es eingesetzt wird.

Du siehst - ohne genauere Informationen können wir Dir zwar einen bunten Strauß an Möglichkeiten vorstellen, aber was davon für dich passt, bleibt unklar.

Rolf