Tabelle in Widget Tabs

FUJ

Hallo
Ich bin wieder am ausprobieren, schaff es aber nicht.
Folgende zwei "Probleme" stellten sich mir.
Im Widget Tabs habe ich eine Tabelle eingefügt. Nun möchte ich die Tabelle einfärben wie es beim Widget Tabelle funktioniert. Zumindest würde ich gerne die Tabellenreihen sichtbar trennen.

Im weiteren habe ich in einer Zelle ein Bild eingefügt. Wäre toll wenn ich das mit Klick vergrössen lassen würde ohne dass ich die Seite verlasse. Also so was wie ein Pop up.
Etwas viel ich weiss, aber vielleicht hat da jemand eine gute Idee.

Vielen Dank
FUJ

Jochen

Hallo FUJ

zu 1. "Farbige Tabelle":
Schau dir dazu mal folgendes an: http://www.mathematik.uni-ulm.de/help/selfhtml-7.0/tcef.htm
Die dort gezeigten Beispiele kannst du im Widget "Tabs" als HTML-Code einfügen und dann noch nach deinen Wünschen anpassen.
Dazu in der Werkzeugleiste "HTML-Quelltext anzeigen" auswählen und dann den Code einfügen.
Durch erneutes anwählen der Option, kannst du dann wieder auf die normale Ansicht wechseln.

zu 2: "Bild Vergrößern":
Du meinst damit bestimmt so eine Option "Bild vergößern", wie es sie im Widget "Bild" gibt?
Das ist momentan nicht so ohne weiteres direkt in dem Widget "Tabs" möglich.
(Nur durch einen umfangreicheren manuellen Eingriff).

ThM

Hallo,

ich persönich find ja selfhtml ziemlich "altbacken" und würde, wenn schon, das wiki dazu nehmen. Es geht aber nichts über w3schools.

Wenn Du dieses Kapitel einmal studierst, dann wirst Du die Tabellen im Widget Tabs einmal komplett auf den Kopf stellen können.

FUJ

Vielen Dank euch beiden.
Das funktioniert sehr gut im Widget selbst. Wenn ich aber dann auf ok klicke und auf die Seite zurückkehre, dann ist die Farbe weg. Ich habe schon probiert mit der Hintergrundfarbe (auf transparent gestellt), aber das hat nichts genützt. Irgendwie wird der Inhalt des Widgets übersteuert. Nur wie ?
Vielleicht hast du mir da auch einen guten Hinweis. Auf jeden Fall vielen Dank für deinen Support Jochen.

FUJ

Jochen

Hallo FUJ,

poste mal bitte hier den Code, der bei dir da nicht geht.
Und wenn die Seite auch schon Online sein sollte, dann den Link dazu.
Dann kann man sich das mal genauer ansehen, denn im Normalfall geht das problemlos.

FUJ

Hallo Jochen
Der Code ist es nicht. Trotzdem hier das kopierte Script.

<table border bgcolor=#CCFFFF> <tr> <td>Zeile 1 Spalte 1 = hellblau</td> <td>Zeile 1 Spalte 2 = hellblau</td> </tr> <tr> <td>Zeile 2 Spalte 1 = hellblau</td> <td>Zeile 2 Spalte 2 = hellblau</td> </tr></table>
Es liegt am verwendeten Layout. Modern responsive. Wenn ich ein anderes wähle funktioniert es bestens. Nur eben. Ich möchte eigentlich das Modern responsive verwenden.

Herzlichen Gruss
FUJ

Jochen

Hallo FUJ,

da hast du recht.
Das Layout "Modern Responsive" hat damit ein Problem.
Bei eben 3 anderen Layouts überprüft, und da geht das.

Warte mal auf morgen was Zeta dazu schreibt.
Denke das es da evtl. ein Layoutupdate dafür geben könnte.

Als Workaround, geht es mit eigenen kombinierten CSS und HTML.
Aber....das sollte auch "so einfach" gehen.

Steffen T.

Das "bgcolor" ist ja schon recht veraltet. Besser CSS verwenden, dann geht das auch im Modern Responsive.

Code

<table style="background-color: #ccffff">
  <tr>
    <td>Zeile 1 Spalte 1 = hellblau</td>
    <td>Zeile 1 Spalte 2 = hellblau</td>
  </tr>
  <tr>
    <td>Zeile 2 Spalte 1 = hellblau</td>
    <td>Zeile 2 Spalte 2 = hellblau</td>
  </tr>
</table>

ThM

Hallo Steffen,

ich beschäftige mich auch nur nebenbei damit aber die eigentliche Frage aus #Post7 ist leider nur bedingt beantwortet. Daher zu dieser Thematik auch von mir eine Anmerkung/Frage.
Warum wird der Codeblock dann in anderen Layouts, trotz veraltetem bgcolor korrekt dargestellt und in Modern Responsive nicht ?

Wenn ich in diesem Layout (Modern Responsive) innerhalb des Widgets Tabs eine Tabelle mit dem integrierten Quellcode Editor erstelle und dort ebenfalls separate style Angaben einfüge, werden die style Angaben nicht akzeptiert, da mir nach Bestätigen mit OK die style Angaben in ein ein CDATA "verpackt" werden und somit nicht interpretiert werden können.

Im folgenden Mal ein Beispiel wie es bei mir aussieht:
Dieser Quellcode einer Tabelle mit style Angaben wurde von mir in Modern Responsive innerhalb des Widget Tabs über den Quelltext Editor eingebunden (noch nicht gespeichert).
Sieht soweit ja noch ok aus.

HTML

<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}




td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}




tr:nth-child(even) {
    background-color: #CCFFFF;
}
</style>




<table>
  <tbody>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th></tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td></tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td></tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td></tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td></tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td></tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td></tr></tbody></table>

Alles anzeigen

Nach Bestätigen mit OK und damit einhergehend keiner sichtbaren optischen Veränderung der Tabelle wird das Widget Tabs erneut geöffnet und in den Quelltext Editor umgeschaltet. Hier stelle ich dann das bereits oben beschriebene fest (siehe auch den nachfolgenden Quelltext - mal abgekürzt nur den Style Bereich - man beachte die generierte CDATA Angabe)

HTML

<style><![CDATA[
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}




td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}




tr:nth-child(even) {
    background-color: #CCFFFF;
}
]]></style>

Alles anzeigen

In anderen Layouts passiert das nicht. Ich bin der Auffassung, dass hier irgendetwas nicht passig ist.

Steffen T.

Hallo Thomas,

das Layout Modern Responsive hat eine globale CSS-Einstellung "background-color: transparent". Daher funktioniert das mit dem "bgcolor" nicht. Ich geb das mal an den Entwickler des Layouts weiter.

Eine Style-Angabe gehört immer in den Head-Bereich. Bitte nicht in den Quelltext schreiben.

Stefan S

Hallo,

es kann immer mal vorkommen, dass ein Layout oder ein Widget eigenes CSS für bestimmte Elemente setzt. Das können und wollen wir nicht vermeiden. Wenn Sie aber zur Anpassung aktuellen, standards-conformen code nutzen (z.B. style= statt bgcolor=) und dafür z.B. inline-css oder eigenes CSS (in Einstellungen > CSS) nutzen, dann sollte dies eigentlich immer funktionieren und Ihnen somit alle Anpassungsmöglichkeiten offen stehen.

Ein <style>-Block darf nur im <head> des Dokuments verwendet werden. Dass es bei Verwendung im Body zu Fehlern kommt, ist daher nicht verwunderlich. Es gab mal einen schönen Vorschlag, ein scroped-Attribut für <style>-Blöcke einzuführen mit deren Hilfe man es auch im Body verwenden hätte können. Das wurde aber leider wieder aus deer Spezifikation entfernt bzw. gar nicht erst aufgenommen.

ThM

Hallo Steffen,

danke für die Antwort.
Punkt 2 ist für mich nur bedingt nachvollziehbar, da es sich für mein dafürhalten mit dem Begriff "Quelltext" widerspricht und das Formatieren von solcher Art Tabellen unheimlich schwer bzw. umständlich macht. Ich wüßte jetzt auf Anhieb auch gar nicht, wie ich meine Style Angaben der Tabelle in den HEAD Bereich auch nur mit dieser einen Tabelle innerhalb dieses einen Widget Tabs verknüpfe. Desweiteren funktioniert es z. Bsp. in meinem primär verwendeten Layout "Technical Responsive" ja auch einwandfrei und hier wird mir kein CDATA hinzugefügt.
Wie gesagt, für mich irgendwie alles ein bischen komisch.

Stefan S

Über "Einstellungen > CSS" landen CSS angaben immer korrekt im Head. Über die neuen "CSS"-Felder (CSS-Klasse / Inline-CSS), die jeder Artikel hat (Bearbeiten > Mischpult-Icon > Mehr…), kann man ganz einfach einen entsprechenden Klassennamen definieren, über den man dann sein CSS anwenden kann.

Das mit dem CDATA ist komisch, da eine solche Verwendung aber sowieso invalides HTML generieren würde, müssen wir der Ursache für das CDATA, glaube ich, nicht weiter auf den Grund gehen.

ThM

OK, danke Herr Seiz ....

Zitat von sseiz

Das mit dem CDATA ist komisch, da eine solche Verwendung aber sowieso invalides HTML generieren würde, müssen wir der Ursache für das CDATA, glaube ich, nicht weiter auf den Grund gehen.

..... aber es ist schon suspekt, dass das eine Layout den Code nach Bestätigen mit OK einmal ohne CDATA generiert und ein anderes Layout hingegen mit CDATA.

Stefan S

Der Artikel-Editor kommt hier zu Teilen vom IE und der hat seine ganz eigene Logik. Sowas kann auch vom Doctype etc. abhängen. Seisdrum…

Tabelle in Widget Tabs

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?