Ankündigung

Einklappen
Keine Ankündigung bisher.

Gradient Background direkt in HTML setzen?

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Gradient Background direkt in HTML setzen?

    Hi,

    ich baue eine recht komplexe Matrix aus einer Tabelle auf. Nun muss ich manche Zellen mit einem gradienten füllen. Was mit einer definition in einer CSS auch wunderbar klappt.

    Code:
    .gradientCell
    {
        background: repeating-linear-gradient(45deg,transparent,transparent 10px,#rrr 10px,#rrr 20px),
                             linear-gradient(to bottom,#eee,#999);
    }
    Code:
    $row+="<td class="gradientCell">....
    Nun ist es aber so, das der Gradient spezielle Farben haben soll und es dabei so 20 verschiedene Farben gibt. Ich könnte jetzt 20 class in der CSS definieren und dann immer die entsprechende nutzen aber eigentlich dachte ich es wäre einfacher wenn ich den CSS code direkt erzeuge also:

    Code:
    $row+="<td style='background:repeating-linear-gradient(45deg,transparent,transparent 10px,#rrr 10px,#rrr 20px),linear-gradient(to bottom,#eee,#999);">.....
    wobei ich dann problemlos durch einen Platzhalter an Stelle der Farben diese immer durch die benötigte Farbe ersetzen könnte.

    Das klappt so aber nicht.

    Gibt es einen Weg oder habt ihr vielleicht noch eine viel bessere Idee?

    Gruß

    Claus
    Pre-Coffee-Posts sind mit Vorsicht zu geniessen!

  • #2
    Was ist der Hintergrund? Welche Bedeutung haben die Farben?

    Kommentar


    • #3
      Zitat von hellbringer Beitrag anzeigen
      Was ist der Hintergrund? Welche Bedeutung haben die Farben?
      Warum ist das wichtig?
      Pre-Coffee-Posts sind mit Vorsicht zu geniessen!

      Kommentar


      • #4
        Zitat von Thallius Beitrag anzeigen
        Warum ist das wichtig?
        Um Content und Layout vernünftig trennen zu können. Abhängig davon wäre dann die Empfehlung, wie vorzugehen ist.

        Kommentar


        • #5
          Hallo,

          ich verstehe dein Problem nicht.

          Handelt es sich um eine HTML-Tabelle?

          Wie groß ist die Tabelle?

          Wonach richtet sich welche Zellen welche Farben erhalten sollen?

          Ändern sich die Einträge in der Tabelle oder die Farben regelmäßig? Wenn ja, wovon ist das abhängig?

          Hast mal einen Link zu der Seite, damit man sich die Tabelle mal anschauen kann?

          Gruss

          MrMurphy

          Kommentar


          • #6
            Zitat von MrMurphy Beitrag anzeigen
            Hallo,

            ich verstehe dein Problem nicht.

            Handelt es sich um eine HTML-Tabelle?

            Wie groß ist die Tabelle?

            Wonach richtet sich welche Zellen welche Farben erhalten sollen?

            Ändern sich die Einträge in der Tabelle oder die Farben regelmäßig? Wenn ja, wovon ist das abhängig?

            Hast mal einen Link zu der Seite, damit man sich die Tabelle mal anschauen kann?

            Gruss

            MrMurphy
            Hallo,

            wo liegt denn jetzt das Problem dass alle hier wissen wollen wie die Tabelle aussieht? Ich möchte eine HTML Tabelle machen in der ich beliebige Zellen mit einem Gradienten füllen kann, möchte aber nicht für jede mögliche Farbkombination der Gradienten eine eigene CSS erstellen. Um diese Frage zu beantworten muss ich nicht die Tabelle zeigen.

            Gruß

            Claus
            Pre-Coffee-Posts sind mit Vorsicht zu geniessen!

            Kommentar


            • #7
              Wir fragen nicht nach um dich zu ärgern.

              Ohne die Informationen können wir dir aber nicht angemessen helfen.

              Kommentar


              • #8
                Danke kein Problem. Mit den Informationen könnt ihr mir dann nämlich auch nicht helfen.
                Pre-Coffee-Posts sind mit Vorsicht zu geniessen!

                Kommentar


                • #9
                  Welchen Hintergrund hat es denn, das du deine HTML-Datei mit inline-CSS verschandeln willst, statt Klassen zu definieren?
                  Mir ergibt sich kein Vorteil.

                  Kommentar


                  • #10
                    Kann doch eigentlich nur daran liegen, dass da irgendwas nicht regelkonform notiert ist. Kannst ja mal den Output von einem CSS- oder HTML-Validator prüfen lassen. M. E. stimmt da mindestens was nicht mit dem Stringzusammenbau.
                    [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

                    Kommentar


                    • #11
                      Warum nicht die CSS-Styles dynamisch per PHP erstellen lassen, wie es kürzlich z.B. hier (CSS-Variablen) diskutiert wurde?

                      Um einzelne Zellen bequem stylen zu können, versehe ich meine Tabellen mit CSS-Klassen für Zeilen und Spalten, da ich auch kein Freund von umfangreichen Inlinestyles bin.
                      Vereinfachtes Beispiel:
                      HTML-Code:
                      <table id="tab1">
                        <tr class="r1">
                          <td class="c1">a</td>
                          <td class="c2">b</td>
                        </tr>
                        <tr class="r2">
                          <td class="c1">c</td>
                          <td class="c2">d</td>
                        </tr>
                      </table>
                      Das hat den Vorteil, das sich solche Tabellen erstmal weitgehend automatisiert erstellen lassen, ohne Layoutbestandteile einfließen lassen zu müssen.
                      Um nun bestimmte Zellen zu gestalten, werden solche Styles
                      Code:
                      #tab1 tr.r1 td.c1  {color:#0f0;} /* style Zeile1 Spalte1 */
                      definiert. Diese können fix angelegt werden, per PHP dynamisch erstellt oder auch clientseitig per Javascript zugefügt werden.
                      Werden die Styledefinitionen etwas umfangreicher, können auch Templates (hab TinyTemplate schon dafür genutzt) zur Anwendung kommen.

                      Kommentar


                      • #12
                        Zitat von jspit Beitrag anzeigen
                        Warum nicht die CSS-Styles dynamisch per PHP erstellen lassen, wie es kürzlich z.B. hier (CSS-Variablen) diskutiert wurde?

                        Um einzelne Zellen bequem stylen zu können, versehe ich meine Tabellen mit CSS-Klassen für Zeilen und Spalten, da ich auch kein Freund von umfangreichen Inlinestyles bin.
                        Vereinfachtes Beispiel:
                        HTML-Code:
                        <table id="tab1">
                        <tr class="r1">
                        <td class="c1">a</td>
                        <td class="c2">b</td>
                        </tr>
                        <tr class="r2">
                        <td class="c1">c</td>
                        <td class="c2">d</td>
                        </tr>
                        </table>
                        Und warum nicht einfach :nth-child() verwenden?

                        Ich bin überhaupt kein Fan von durchnummerierten Klassen. Das ist so, wie durchnummerierte Variablen in PHP.

                        Kommentar


                        • #13
                          So muss ich die Child's im Style durchnumerieren. z.B. für Zeile 2 und Spalte 2:
                          Code:
                          #tab1 tr:nth-child(2) td:nth-child(2) {background-color:yellow;}
                          Kann je nach Anwendung zugegeben einfacher werden. Meine obige Darstellung ist stark vereinfacht. In der Praxis sind die Klassen auch nicht immer durchnummeriert.

                          Kommentar

                          Lädt...
                          X