Tabelle mit CSS-Style - Metro Responsive (Express)

  • Tabelle mit CSS-Style - Metro Responsive (Express)

    Welche Zeta Producer Version nutzen Sie?

    -> Die aktuelle Version Zeta Producer Express Version 12.2.0 (16.09.2014)

    Welches Layout nutzen Sie?

    -> Layout Metro Responsive (Express)

    Was haben Sie gemacht / welche Vorgänge haben Sie in Zeta Producer durchgeführt?

    -> http://www.hypnose-oldenburg.de/hypnosestadien…trin_alwan.html
    -> Einfügen der CSS Style Informationen für ".tabellehypnose" unter Seite - Attribute - Standard mobile_script (Inhalt siehe Anhang "tabellehypnose_mobile_script.css.txt")
    -> Einfügen der Tabelle "tabellehypnose" über Widget - Text & Bild - Quelltext (Inhalt siehe Anhang "tabellehypnose_mobile_script.html.txt")

    Welches Resultat haben Sie erwartet?

    -> Letzte Tabellen Zeile (tr:last-child) ohne sichtbaren Abstand zu Gesamt Rahmen der Tabelle
    -> Funktions- und Darstellungsbeispiel ohne ZP12 siehe angehängte Dateien "tabellehypnose.css.txt" zusammen mit "tabellehypnose.html.txt"
    -> Siehe angehängten Screenshot "2015-02-04 22_31_14-Mozilla Firefox.png"

    Was ist stattdessen passiert?

    -> Letzte Tabellen Zeile (tr:last-child) mit sichtbaren Abstand zu Gesamt Rahmen der Tabelle
    -> Markierung [1] siehe angehängten Screenshot "2015-02-04 22_24_00-Hypnosestadien - Praxis für analytische Hypnose - Katrin Alwan - Hypnosetherapie.png"

    ###

    Zusätzliche Frage - sind in den bestehenden "Responsive Designs" auch "Responsive Tabellen" berücksichtigt bzw. einbindbar?

    ###

    Gruß & vielen Dank
    Martin Seidel

  • Hallo,

    vielen Dank für den vorbildhaften und ausführlichen Bericht. Es handelt sich hier aber um eine allgemeine Frage bzgl. HTML/CSS und da fehlt uns leider die Zeit, im Detail hier darauf einzugehen. Zeta Producer liefert seine Daten ja einfach an den Browser und was dieser daraus macht, liegt ausserhalb unseres Einflusses. Wenn Sie Ihre Tabelle und Ihr CSS mal in eine ganz einfache, von Zeta Producer unabhängige HTML-Seite einfügen und diese im selben Browser öffnen, wird sich die Darstellung sicher gleich verhalten. Wenn nicht, dann könnte es auf ein Fehlverhalten von Zeta Producer hindeuten und das können wir dann versuchen nachzuverfolgen.

    Responsive Tabellen sind im Moment noch in keinem unserer Layouts enthalten.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Ausnahmsweise: Ihre Tabelle befindet sich übrigens innerhalb von einem DIV. Das DIV erzeugt den blauen Rahmen. Der Abstand unten zwischen letzter Tabellenzeile und Rahmen kommt zustande, weil im Layout für Tabellen standardmäßig eine "margin-bottom:16px;" vorgegeben ist. Das müssten sie halt entsprechend mit "margin-bottom:0;" überschreiben…

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Hallo Herr Seiz,

    die CSS Style Informationen für ".tabellehypnose" unter Seite - Attribute - Standard mobile_script habe ich entsprechend um "margin-bottom:0;" ergänzt - die Darstellung ist jetzt wie im Funktions- und Darstellungsbeispiel ohne ZP12 - Letzte Tabellen Zeile ohne sichtbaren Abstand zu Gesamt Rahmen der Tabelle - und entspricht dem erwartetem Ergebnis.

    <SNIP>
    <style type="text/css">
    .tabellehypnose table {
    border-collapse: collapse;
    margin-bottom:0;
    text-align: left;
    width: 100%;
    }
    <SNIP>

    Der Hinweis "weil im Layout für Tabellen standardmäßig eine "margin-bottom:16px;" vorgegeben ist" war zielführend - der Wert kommt aus meiner Sicht dann wohl aus der ZP Metro Responsive CSS Styledefinition http://www.hypnose-oldenburg.de/_media/styles.css?v=1 und wurde durch die Werte aus "mobile_script" unverändert belassen (weil nicht gesetzt ...).

    Die Nutzung von <DIV> ist wohl meinem Alter und Kennnisstand geschuldet - ich wollte lediglich die Tabellen in einem eigenständigen Bereich nutzen... ?(

    <DIV > - Allgemeines Block-Element
    http://de.selfhtml.org/html/text/bereiche.htm
    Sie können mehrere Elemente wie Text, Grafiken, Tabellen usw., in einen gemeinsamen Bereich einschließen. Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften. Es ist dazu gedacht, um mit Hilfe von nach unten CSS formatiert zu werden.

    Gruß & vielen Dank für die zeitnahe und zielgerichtete Unterstützung :thumbup: .
    Martin Seidel

    Einmal editiert, zuletzt von MSEWEB (5. Februar 2015 um 18:29)

  • Hallo,

    oh, ich hatte nicht gedacht, dass ich Ihre Nutzung eines DIV angezweifelt habe. War nur ein Hinweis auf die Ursache.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!