Formatierungs Unterschiede zwischen FF und Android

Begonnen von moonsorrox, 20 März 2018, 19:41:12

Vorheriges Thema - Nächstes Thema

moonsorrox

ich erstelle gerade eine Seite für Rollladen und muss feststellen das mir der Firefox auf dem PC es richtig anzeigt nur auf dem Android Tablet wieder mal anders.

Ich habe 5 Spalten in die ich was eintrage ganz links stehen die Räume drin, wenn die unterschiedlich lang sind, kann es dadurch Verschiebungen geben..?
Oder kommt die Verschiebung zustande weil ich in der Spalte 4 weniger an Symbolen oder auch Text habe.
Text steht da nur drin damit ich es besser sehe, der soll dann raus und die Spalte leer sein

Und es stimmt ein Abstand nicht zwischen der Spalte mit der Position/Circlemenü und den weiteren Icons für das fahren der Rollläden.
Auch hier wieder der Unterschied zwischen Firefox und Android zu sehen auf den Screenshot.

Mit den Überschriften habe ich deshalb noch gar nichts gemacht  :-\
Vielleicht kann mir da jemand auf die Sprünge helfen, dass in den Griff zu bekommen.?
Evtl. hilft es auch die ganz linke Spalte, also die erste in der Breite zu beschränken/fest einzustellen bis alle Bezeichnungen rein passen, ist mir aber nicht gelungen...!

hier mal mein code
<!DOCTYPE html>
<html>

<head>
<title>FHEM-Tablet-UI</title>
</head>

<body>
<div class="page" id="flur_content4">
<div class="gridster">
            <ul>
<!-- Rollladen Überschriften -->
<li data-row="5" data-col="1" data-sizex="16" data-sizey="1" style="background-color:#1f222e">
<div class="hbox">
<div class="vbox">
<div class="border-crimson hbox">
<div class="card"><div><div class="left" style="margin-left:10px !important; font-size:150%">Raum -- Zimmer</div></div></div>
<div class="card"><div><div class="left" style="margin-left:25px !important; font-size:150%">Position</div></div></div>
<div class="card"><div><div class="left" style="margin-left:-25px !important; font-size:150%">Steuerung --- Beschattung</div></div></div>
<div class="card"><div><div class="left" style="margin-left:0px !important; font-size:150%">Modus</div></div></div>
<div class="card"><div><div class="left MediumSpringGreen" style="margin-left:25px !important; font-size:150%">Zeiten</div></div></div>
</div>
</div>
</div>
</li>
<!-- ANFANG - Rollläden - ALLE -->
                <li data-row="5" data-col="1" data-sizex="16" data-sizey="15" style="background-color:#1f222e">
<div class="hbox">
<div class="vbox">

<!-- ANFANG - Rollläden Wohnzimmer Links -->
<div class="hbox">
<div class="vbox">
<div class="hbox">
<div class="card"><!--1--><div class="left-align" style="margin-left:10px !important; margin-top:-20px !important; font-size:150%;">Wohnzimmer links</div></div>
<!-- Position Circlemenü -->
<div class="card grow-0"><!--2-->
<div class="center" data-type="circlemenu" data-item-width="55" data-item-hight="55" data-device="WZ_Rollladen_O" data-direction="right-half" data-circle-radius="90">
<ul>
<li class="circleborder MediumSpringGreen"><div data-type="label" data-device="WZ_Rollladen_O"></div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="on" data-icon="">⇧</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="60" data-icon="">60</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="70" data-icon="">70</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="80" data-icon="">80</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="75" data-icon="">⩸</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="off" data-icon="">⇩</div></li>
</ul>
</div>
</div>
<div class="card"><!--3-->
<div class="center" style="margin-left:0px !important; margin-right:-0px !important;">
<div data-type="push" data-device="WZ_Rollladen_O" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-icon="fa-chevron-up" data-on-color="#DC143C" data-off-color="#808080" data-background-icon="fa-square-o" data-set-on="on"></div>
<div data-type="push" data-device="WZ_Rollladen_O" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-icon="fa-minus" data-on-color="#DC143C" data-off-color="#808080" data-background-icon="fa-square-o" data-set-on="stop"></div>
<div data-type="push" data-device="WZ_Rollladen_O" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-icon="fa-chevron-down" data-on-color="#DC143C" data-off-color="#808080" data-background-icon="fa-square-o" data-set-on="off"></div>
<div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="60" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">60</div>
<div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="70" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">70</div>
<div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="80" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">80</div>
</div>
</div>
<!-- Modus Wohnzimmer links -->
<div class="card"><!--4-->
<div class="center" style="margin-left:0px !important; margin-top:0px !important; margin-right:-15px !important;">
<div class="inline"><div class="big" data-type="push" data-device="du_RolloWZmodus" data-get="STATE" data-background-icon="none" data-get-on="FHEM" data-get-off="!on" data-on-color="lightgreen" data-off-color="white" data-icon="oa-fts_shutter_automatic" data-set-on="FHEM"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">FHEM</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_RolloWZmodus" data-get="STATE" data-background-icon="none" data-get-on="Beschattung" data-get-off="!on" data-on-color="#4169e1" data-off-color="white" data-icon="fs-fts_shutter_updown" data-set-on="Beschattung"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Beschattung</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_RolloWZmodus" data-get="STATE" data-background-icon="none" data-get-on="Weihnachten" data-get-off="!on" data-on-color="crimson" data-off-color="white" data-icon="oa-fts_shutter_automatic" data-set-on="Weihnachten"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Weihnachten</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_RolloWZmodus" data-get="STATE" data-background-icon="none" data-get-on="Aus" data-get-off="!on" data-on-color="yellow"  data-off-color="white" data-icon="oa-fts_shutter_manual" data-set-on="Aus"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Aus / Hand</div>
</div>
</div>
</div>
<div class="card"><!--5--><div><div class="MediumSpringGreen" style="font-size:150%;">Zeit_1</div></div></div>
</div>
</div>
</div>
<!-- ENDE - Rollladen Wohnzimmer Links -->

<!-- ANFANG - Rollladen Wohnzimmer Terrasse -->
<div class="hbox">
<div class="vbox">
<div class="hbox">
<div class="card"><!--1--><div class="left-align" style="margin-left:10px !important; margin-top:-20px !important; font-size:150%;">Wohnzimmer Terrasse</div></div>
<!-- Position Circlemenü -->
<div class="card grow-0"><!--2-->
<div class="center" data-type="circlemenu" data-item-width="55" data-item-hight="55" data-device="RollladenWZT" data-direction="right-half" data-circle-radius="90">
<ul>
<li class="circleborder MediumSpringGreen"><div data-type="label" data-device="RollladenWZT"></div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenWZT" data-set-on="on" data-icon="">⇧</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenWZT" data-set-on="60" data-icon="">60</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenWZT" data-set-on="70" data-icon="">70</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenWZT" data-set-on="80" data-icon="">80</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenWZT" data-set-on="75" data-icon="">⩸</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenWZT" data-set-on="off" data-icon="">⇩</div></li>
</ul>
</div>
</div>
<div class="card"><!--3-->
<div class="center" style="margin-left:0px !important; margin-right:-0px !important;">
<div data-type="push" data-device="RollladenWZT" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-icon="fa-chevron-up" data-on-color="#DC143C" data-off-color="#808080" data-background-icon="fa-square-o" data-set-on="on"></div>
<div data-type="push" data-device="RollladenWZT" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-icon="fa-minus" data-on-color="#DC143C" data-off-color="#808080" data-background-icon="fa-square-o" data-set-on="stop"></div>
<div data-type="push" data-device="RollladenWZT" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-icon="fa-chevron-down" data-on-color="#DC143C" data-off-color="#808080" data-background-icon="fa-square-o" data-set-on="off"></div>
<div data-type="push" data-cmd="set" data-device="RollladenWZT" data-set-on="60" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">60</div>
<div data-type="push" data-cmd="set" data-device="RollladenWZT" data-set-on="70" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">70</div>
<div data-type="push" data-cmd="set" data-device="RollladenWZT" data-set-on="80" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">80</div>
</div>
</div>
<!-- Modus Terrasse -->
<div class="card"><!--4-->
<div class="center" style="margin-left:0px !important; margin-top:0px !important; margin-right:-15px !important;">
<div class="inline"><div class="big" data-type="push" data-device="du_RolloWZTmodus" data-get="STATE" data-background-icon="none" data-get-on="FHEM" data-get-off="!on" data-on-color="lightgreen" data-off-color="white" data-icon="oa-fts_shutter_automatic" data-set-on="FHEM"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">FHEM</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_RolloWZTmodus" data-get="STATE" data-background-icon="none" data-get-on="Beschattung" data-get-off="!on" data-on-color="#4169e1" data-off-color="white" data-icon="fs-fts_shutter_updown" data-set-on="Beschattung"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Beschattung</div>
</div>
<div>&nbsp;</div>
<!--div class="inline"><div class="big" data-type="push" data-device="du_RolloWZTmodus" data-get="STATE" data-background-icon="none" data-get-on="Weihnachten" data-get-off="!on" data-on-color="crimson" data-off-color="white" data-icon="oa-fts_shutter_automatic" data-set-on="Weihnachten"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Weihnachten</div>
</div-->
<div class="inline"><div class="large" data-type="push" data-device="du_RolloWZTmodus" data-get="STATE" data-background-icon="none" data-get-on="Aus" data-get-off="!on" data-on-color="yellow"  data-off-color="white" data-icon="fs-general_aus" data-set-on="Aus"></div>
<div style="margin-top:0px !important; font-size:90%" data-type="label">Aus / Hand</div>
</div>
</div>
</div>
<div class="card"><!--5--><div><div class="MediumSpringGreen" style="font-size:150%;">Zeit_2</div></div></div>
</div>
</div>
</div>
<!-- ENDE - Rollladen Wohnzimmer Terrasse -->


<!-- ANFANG - Rollladen Wohnzimmer Rechts -->
<div class="hbox">
<div class="vbox">
<div class="hbox">
<div class="card"><!--1--><div class="left-align" style="margin-left:10px !important; margin-top:-20px !important; font-size:150%;">Wohnzimmer rechts</div></div>
<!-- Position Circlemenü -->
<div class="card grow-0"><!--2-->
<div class="center" data-type="circlemenu" data-item-width="55" data-item-hight="55" data-device="WZ_Rollladen_O" data-direction="right-half" data-circle-radius="90">
<ul>
<li class="circleborder MediumSpringGreen"><div data-type="label" data-device="WZ_Rollladen_O"></div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="on" data-icon="">⇧</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="60" data-icon="">60</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="70" data-icon="">70</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="80" data-icon="">80</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="75" data-icon="">⩸</div></li>
<li><div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="off" data-icon="">⇩</div></li>
</ul>
</div>
</div>
<div class="card"><!--3-->
<div class="center" style="margin-left:0px !important; margin-right:-0px !important;">
<div data-type="push" data-device="WZ_Rollladen_O" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-icon="fa-chevron-up" data-on-color="#DC143C" data-off-color="#808080" data-background-icon="fa-square-o" data-set-on="on"></div>
<div data-type="push" data-device="WZ_Rollladen_O" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-icon="fa-minus" data-on-color="#DC143C" data-off-color="#808080" data-background-icon="fa-square-o" data-set-on="stop"></div>
<div data-type="push" data-device="WZ_Rollladen_O" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-icon="fa-chevron-down" data-on-color="#DC143C" data-off-color="#808080" data-background-icon="fa-square-o" data-set-on="off"></div>
<div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="60" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">60</div>
<div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="70" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">70</div>
<div data-type="push" data-cmd="set" data-device="WZ_Rollladen_O" data-set-on="80" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">80</div>
</div>
</div>
<!-- Modus Wohnzimmer rechts -->
<div class="card"><!--4-->
<!--div class="inline">&nbsp;</div>
<div class="inline">&nbsp;3.Reihe</div>
<div class="inline">&nbsp;4.Spalte</div>
<div class="inline">&nbsp;</div-->
<div class="center" style="margin-left:0px !important; margin-top:0px !important; margin-right:-15px !important;">
<div class="inline">&nbsp;<div class="big"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label"></div></div>

<div class="inline">&nbsp;3.Reihe<div class="big"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label"></div></div>

<div class="inline">&nbsp;4.Spalte<div class="big"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label"></div></div>

<div class="inline">&nbsp;<div class="big"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label"></div></div>
</div>
</div>
<div class="card"><!--5--><div><div class="MediumSpringGreen" style="font-size:150%;">Zeit_3</div></div></div>
</div>
</div>
</div>
<!-- ENDE - Rollladen Wohnzimmer Rechts -->

<!-- ANFANG - Rollladen Schlafzimmer -->
<div class="hbox">
<div class="vbox">
<div class="hbox">
<div class="card"><!--1--><div class="left-align" style="margin-left:10px !important; margin-top:-20px !important; font-size:150%;">Schlafzimmer</div></div>
<!-- Position Circlemenü -->
<div class="card grow-0"><!--2-->
<div class="center" data-type="circlemenu" data-item-width="55" data-item-hight="55" data-device="RollladenSZ" data-direction="right-half" data-circle-radius="90">
<ul>
<li class="circleborder MediumSpringGreen"><div data-type="label" data-device="RollladenSZ"></div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="on" data-icon="">⇧</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="75" data-icon="">75</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="50" data-icon="">50</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="25" data-icon="">25</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="75" data-icon="">⩸</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="off" data-icon="">⇩</div></li>
</ul>
</div>
</div>
<div class="card"><!--3-->
<div class="center" style="margin-left:0px !important; margin-right:-0px !important;">
<div data-type="push" data-device="RollladenSZ" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-icon="fa-chevron-up" data-on-color="#DC143C" data-off-color="#808080" data-background-icon="fa-square-o" data-set-on="on"></div>
<div data-type="push" data-device="RollladenSZ" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-icon="fa-minus" data-on-color="#DC143C" data-off-color="#808080" data-background-icon="fa-square-o" data-set-on="stop"></div>
<div data-type="push" data-device="RollladenSZ" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-icon="fa-chevron-down" data-on-color="#DC143C" data-off-color="#808080" data-background-icon="fa-square-o" data-set-on="off"></div>
<div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="25" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">25</div>
<div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="50" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">50</div>
<div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="75" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">75</div>
</div>
</div>
<!-- Modus Schlafzimmer -->
<div class="card"><!--4-->
<div class="center" style="margin-left:0px !important; margin-top:0px !important; margin-right:-15px !important;">
<div class="inline"><div class="big" data-type="push" data-device="du_RolloSZmodus" data-get="STATE" data-background-icon="none" data-get-on="FHEM" data-get-off="!on" data-on-color="lightgreen" data-off-color="white" data-icon="oa-fts_shutter_automatic" data-set-on="FHEM"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">FHEM</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_RolloSZmodus" data-get="STATE" data-background-icon="none" data-get-on="Beschattung" data-get-off="!on" data-on-color="#4169e1" data-off-color="white" data-icon="fs-fts_shutter_updown" data-set-on="Beschattung"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Beschattung</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_RolloSZmodus" data-get="STATE" data-background-icon="none" data-get-on="Nachtschicht" data-get-off="!on" data-on-color="crimson" data-off-color="white" data-icon="oa-fts_shutter_automatic" data-set-on="Nachtschicht"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Nachtschicht</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_RolloSZmodus" data-get="STATE" data-background-icon="none" data-get-on="Aus" data-get-off="!on" data-on-color="yellow"  data-off-color="white" data-icon="oa-fts_shutter_manual" data-set-on="Aus"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Aus / Hand</div>
</div>
</div>
</div>
<div class="card"><!--5--><div><div class="MediumSpringGreen" style="font-size:150%;">Zeit_4</div></div></div>
</div>
</div>
</div>
<!-- ENDE - Rollladen Schlafzimmer -->

<!-- ANFANG - Rollladen Küche -->
<div class="hbox">
<div class="vbox">
<div class="hbox">
<div class="card"><!--1--><div class="left-align" style="margin-left:10px !important; margin-top:-20px !important; font-size:150%;">Küche</div></div>
<!-- Position Circlemenü -->
<div class="card grow-0"><!--2-->
<div class="center" data-type="circlemenu" data-item-width="55" data-item-hight="55" data-device="RollladenSZ" data-direction="right-half" data-circle-radius="90">
<ul>
<li class="circleborder MediumSpringGreen"><div data-type="label" data-device="RollladenK"></div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenK" data-set-on="on" data-icon="">⇧</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenK" data-set-on="75" data-icon="">75</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenK" data-set-on="50" data-icon="">50</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenK" data-set-on="25" data-icon="">25</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenK" data-set-on="75" data-icon="">⩸</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenK" data-set-on="off" data-icon="">⇩</div></li>
</ul>
</div>
</div>
<div class="card"><!--3-->
<div class="center" style="margin-left:0px !important; margin-right:-0px !important;">
<div data-type="push" data-device="RollladenK" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-icon="fa-chevron-up" data-on-color="#DC143C" data-off-color="#808080" data-background-icon="fa-square-o" data-set-on="on"></div>
<div data-type="push" data-device="RollladenK" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-icon="fa-minus" data-on-color="#DC143C" data-off-color="#808080" data-background-icon="fa-square-o" data-set-on="stop"></div>
<div data-type="push" data-device="RollladenK" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-icon="fa-chevron-down" data-on-color="#DC143C" data-off-color="#808080" data-background-icon="fa-square-o" data-set-on="off"></div>
<div data-type="push" data-cmd="set" data-device="RollladenK" data-set-on="25" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">25</div>
<div data-type="push" data-cmd="set" data-device="RollladenK" data-set-on="50" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">50</div>
<div data-type="push" data-cmd="set" data-device="RollladenK" data-set-on="75" data-icon="" data-on-color="#DC143C" data-off-color="#808080" data-on-background-color="#4169e1" data-off-background-color="#4169e1" data-background-icon="fa-circle-thin">75</div>
</div>
</div>
<!-- Modus Küche -->
<div class="card"><!--4-->
<div class="center" style="margin-left:0px !important; margin-top:0px !important; margin-right:-15px !important;">
<div class="inline"><div class="big" data-type="push" data-device="du_RolloKmodus" data-get="STATE" data-background-icon="none" data-get-on="FHEM" data-get-off="!on" data-on-color="lightgreen" data-off-color="white" data-icon="oa-fts_shutter_automatic" data-set-on="FHEM"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">FHEM</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_RolloKmodus" data-get="STATE" data-background-icon="none" data-get-on="Beschattung" data-get-off="!on" data-on-color="#4169e1" data-off-color="white" data-icon="fs-fts_shutter_updown" data-set-on="Beschattung"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Beschattung</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_RolloKmodus" data-get="STATE" data-background-icon="none" data-get-on="Weihnachten" data-get-off="!on" data-on-color="crimson" data-off-color="white" data-icon="oa-fts_shutter_automatic" data-set-on="Weihnachten"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Weihnachten</div>
</div>
<div class="inline"><div class="big" data-type="push" data-device="du_Rollomodus" data-get="STATE" data-background-icon="none" data-get-on="Aus" data-get-off="!on" data-on-color="yellow"  data-off-color="white" data-icon="oa-fts_shutter_manual" data-set-on="Aus"></div>
<div style="margin-top:-10px !important; font-size:90%" data-type="label">Aus / Hand</div>
</div>
</div>
</div>
<div class="card"><!--5--><div><div class="MediumSpringGreen" style="font-size:150%;">Zeit_5</div></div></div>
</div>
</div>
</div>
<!-- ENDE - Rollladen Küche -->

</div>
</div>
</li>
<!-- ENDE - Rollläden - ALLE -->
</ul>
</div>
</div>
</body>
</html>
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM