Frage zum Wiki-Artikel ‚Grafiken‘

[LUKAS:)]

Auf einer Seite möchte ich in großer Anzahl ein Bild an Unterschiedlichen stellen anzeigen lassen. Da die Bilder im laufenden Text eingebettet werden sollen, wird dadurch der HTML-Code sehr unübersichtlich.

Meine Frage ist nun, ob es ein Möglichkeit ist, der Befehl zum Einfügen für Bilder einer Art Kurzvariablen zu definieren. Diesen kann man dann an Unterschiedlichen stellen einfügen und der Text wird durch den Befehl Bild-Einfügen ersetzt.

Achtung ich bin Anfänger, daher bitte ich um eine einfache und verständliche Lösung.

[Matthias Scharwies]

Servus!

Auf einer Seite möchte ich in großer Anzahl ein Bild an Unterschiedlichen stellen anzeigen lassen. Da die Bilder im laufenden Text eingebettet werden sollen, wird dadurch der HTML-Code sehr unübersichtlich.

Wenn dein Bild ein Icon ist, könntest du dem Element davor eine Klasse geben, die dann per CSS einen linken Rand und dort die Grafik als Hintergrundbild festlegt.

Meine Frage ist nun, ob es ein Möglichkeit ist, der Befehl zum Einfügen für Bilder einer Art Kurzvariablen zu definieren. Diesen kann man dann an Unterschiedlichen stellen einfügen und der Text wird durch den Befehl Bild-Einfügen ersetzt.

???

Achtung ich bin Anfänger, daher bitte ich um eine einfache und verständliche Lösung.

Evtl helfen dir auch CSS/Anwendung und Praxis/Icon-Fonts

Herzliche Grüße

Matthias Scharwies

[LUKAS:)]

Ok, die Frage war umständlich formuliert.

Gibt es eine Möglichkeit, HTML-Befehlen die häufig verwendet werden, zu Beginn in einer Variablen zu definieren, um diese dann im darauffolgenden Verlauf einzusetzten, anstatt des Langen Befehls.

Beispiel: Fusballseite eines Vereins Mannschaftsaufstellung

Verein: Spieler A, Spieler B [GELB], Spieler C, Spieler D [GELB], Spieler E [TOR] usw.

Anstatt Der Text [GELB] und [TOR] soll durch ein Icon ersetzt werden. Daher soll hier der Befehl <img>...<img> eingefügt werden, der zuvor definiert wurde.

Der der Befehl fürs einfügen von Bildern (inkl. url) recht lang ist, wird so die Aufstellung im Quellcode sehr schnell unübersichtlich.

[Matthias Scharwies]

Servus!

Ok, die Frage war umständlich formuliert.

Gibt es eine Möglichkeit, HTML-Befehlen die häufig verwendet werden, zu Beginn in einer Variablen zu definieren, um diese dann im darauffolgenden Verlauf einzusetzten, anstatt des Langen Befehls.

Der der Befehl fürs einfügen von Bildern (inkl. url) recht lang ist, wird so die Aufstellung im Quellcode sehr schnell unübersichtlich.

So etwas könntest du mit JavaScript programmieren, aber nicht als Anfänger.

[GELB] und [TOR] soll[en] durch ein Icon ersetzt werden.

Das war genau meine Antwort: diesmal mit Links und einem Stück BeispielCode:

Wenn dein Bild ein Icon ist, könntest du dem Element davor eine Klasse geben, die dann per CSS einen linken Rand und dort die Grafik als Hintergrundbild festlegt.

<p>Müller kriegt erst eine <span class="gelb">gelbe Karte</span>, schießt aber 10 min später ein <span class="tor">Tor</span>!</p>

.gelb {
  padding-left:10px;
  background-image: url('gelbe_karte.jpg') left no-repeat;
}

.tor {
  musst du selber machen
}

Da die Icons Teil der Präsentation sind, werden sie im CSS und nicht als Bild per <img> im Inhalt eingebunden.

Herzliche Grüße

Matthias Scharwies

[LUKAS:)]

Hallo nochmal,

zunächst vielen Dank für eure Hilfe.

Ich habe nun versucht, die Möglichkeit nach Matthias zu verwenden, leider ohne Erfolg.

Es wird nun ein Leerraum angezeigt, jedoch habe ich es noch nicht geschafft diesen Leeraum mit einem Hintergrundbild zu füllen.

Gruß Lukas

[Matthias Apsel]

Hallo LUKAS:),

Es wird nun ein Leerraum angezeigt, jedoch habe ich es noch nicht geschafft diesen Leeraum mit einem Hintergrundbild zu füllen.

Der Pfad zum Bild muss relativ zur CSS-Datei angegeben werden.

Hilfreich wäre es, wenn du die Seite zeigen könntest.

Bis demnächst
Matthias

[LUKAS:)]

http://svdielbach.de/senioren/1mannschaft/049b2fa52e037c504.html

[Gunnar Bittersmann]

@@LUKAS:)

http://svdielbach.de/senioren/1mannschaft/049b2fa52e037c504.html

Das nächste Mal bitte verlinken: <url> bzw. [text](url) oder per Button über dem Eingabefeld. Ich hab das mal für dich nachgeholt.

LLAP 🖖

[Gunnar Bittersmann]

@@LUKAS:)

http://svdielbach.de/senioren/1mannschaft/049b2fa52e037c504.html

Das Menü ist nicht bedienbar. Nicht per Tastatur (Tab-Taste). Die Es Untermenüs öffnen sich nicht und es gibt keine Möglichkeit, zu den Inhalten zu gelangen.

---

Die Meldungen des Markup-Checkers nehmen gar kein Ende …

TL;DR:

1. Verwende HTML5.

2. Verwende UTF-8 als Zeichencodierung.

3. Verwende keine darstellungsbezogenen Elemente (wie font, center) und Attribute (wie align, cellspacing), sondern CSS.

4. Berichtige die Syntaxfehler (wie fehlende <).

---

Auch der CSS-Validator meldet einige Fehler. So gibt’s für

.rot {
  padding-left:10px;
  background-image: 
  url('https://de.wikipedia.org/wiki/Fu%C3%9Fball-Weltmeisterschaft_2014#/media/File:Yellow_card.svg') 
  left no-repeat;
}

die rote Karte. Die background-image-Eigenschaft darf – wie ihr Name schon sagt – als Wert nur das Hintergrundbild haben, nicht die Angaben zu background-position und background-repeat. Verwende die Einzeleigenschaften oder die Sammeleigenschaft background.

Ach nein, die gelbe Karte gibt’s (Yellow_card.svg). Äh, wie denn nun, Schiri?

.tor {
  padding-left:12px;
  background-image: 
  url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Soccerball.svg/200px-Soccerball.svg.png'); 
  height:12px;
  width:12px;
  left no-repeat;
}

Hier hängen left no-repeat in der Luft – Syntaxfehler.

Das Bild ist 200 × 200 Pixel groß, in den Ecken ist nichts. Also ist davon auch nichts zu sehen. Du willst das Bild mit background-size: contain skalieren? in deinem Grafikprogramm auf die gewünschte Größe skalieren? Oder doch eine Vektorgrafik (SVG) verwenden?

LLAP 🖖

[Gunnar Bittersmann]

@@Matthias Scharwies

Praxis/Icon-Fonts

Dem Artikel fehlt der Hinweis, dass man Icon-Fonts nicht verwenden sollte, sondern besser SVG.

LLAP 🖖

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Praxis/Icon-Fonts

Dem Artikel fehlt der Hinweis, dass man Icon-Fonts nicht verwenden sollte, sondern besser SVG.

Jeder ist willkommen am Wiki mitzuarbeiten! Leider habe ich den Artikel noch nicht ganz fertig; es fehlen die Beispiele:

• SVG/Anwendung und Praxis/Icons

Herzliche Grüße

Matthias Scharwies

[Malcolm Beck`s]

Hi LUKAS:),

Achtung ich bin Anfänger, daher bitte ich um eine einfache und verständliche Lösung.

Unwissenheit schützt vor lernen nicht.

Bis bald

[Gunnar Bittersmann]

@@LUKAS:)

Auf einer Seite möchte ich in großer Anzahl ein Bild an Unterschiedlichen stellen anzeigen lassen.

Die erste Frage dazu ist: Was sind das für Bilder?

a) Dienen sie zur visuellen Verdeutlichung der vorhandenen Inhalte? Dann könnten Hintergrundbilder mit CSS – wie Matthias sagte – Mittel der Wahl sein. Oder SVG-Icons (symbol/use).

b) Oder vermitteln die Bilder Information, die anderweitig noch nicht vorhanden ist? Dann wären img-Elemente mit Altenativtext angebracht. Oder auch SVG (symbol/use) mit Alternativtext.

Da die Bilder im laufenden Text eingebettet werden sollen, wird dadurch der HTML-Code sehr unübersichtlich.

Im Fall b) könnte man das auch mit serverseitigen Techniken (SSI, PHP, …) machen. Was steht dir zur Verfügung?

Nur der Vollständigkeit halber:

• Es ginge auch mit Web components: custom elements oder HTML templates. Damit macht man sich aber von JavaScript abhängig. (Was im Fall a) aber nicht tragisch wäre.)

• In XHTML gäbe es auch die Möglichkeit, Entities als Abkürzungen zu verwenden.

LLAP 🖖