LUKAS:): Frage zum Wiki-Artikel ‚Grafiken‘

problematische Seite

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.

  1. problematische Seite

    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

    --
    Es gibt viel zu tun - packen wir's an: * ToDo-Liste * gewünschte Seiten
    1. problematische Seite

      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.

      1. 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

        --
        Es gibt viel zu tun - packen wir's an: * ToDo-Liste * gewünschte Seiten
        1. 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

          1. 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

            --
            Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein)
              1. @@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 🖖

                --
                „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                „Hat auf dem Forum herumgelungert …“
                (Wachen in Asterix 36: Der Papyrus des Cäsar)
              2. @@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 🖖

                --
                „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                „Hat auf dem Forum herumgelungert …“
                (Wachen in Asterix 36: Der Papyrus des Cäsar)
    2. problematische Seite

      @@Matthias Scharwies

      Praxis/Icon-Fonts

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

      LLAP 🖖

      --
      „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
      „Hat auf dem Forum herumgelungert …“
      (Wachen in Asterix 36: Der Papyrus des Cäsar)
      1. problematische Seite

        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:

        Herzliche Grüße

        Matthias Scharwies

        --
        Es gibt viel zu tun - packen wir's an: * ToDo-Liste * gewünschte Seiten
  2. problematische Seite

    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

    --
    Hosen sind Blau
  3. problematische Seite

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

    --
    „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
    „Hat auf dem Forum herumgelungert …“
    (Wachen in Asterix 36: Der Papyrus des Cäsar)