Icons als Hintergrundbild

[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 🖖