Ausrichtung und Anordnung innerhalb eines Widgets/einzelner Zellen

[spel]

Hallo,

ich möchte gerne mit meinen Tablet UI Seiten loslegen, verzweifele aber nun schlicht am Layout.

Code Auswählen Erweitern

<li data-row="1" data-col="2" data-sizex="3" data-sizey="2">
       <header>Fahrzeiten</header>
<table class="tg">
   <tr>
     <th align =left class="tg-yw4l">Ziel</th>
     <th class="tg-yw4l">Normal</th>
     <th class="tg-yw4l">Aktuell</th>
   </tr>
   <tr>
     <td class="tg-yw4l">H</td>
     <td class="tg-yw4l"><div data-type="label" data-device="L2H" data-get="duration"></div></td>
     <td class="tg-yw4l"><div data-type="label" data-device="L2H" data-get="duration_in_traffic"></div></td>
   </tr>
   <tr>
     <td class="tg-yw4l">B</td>
     <td class="tg-yw4l"><div data-type="label" data-device="L2B data-get="duration"></div></td>
     <td class="tg-yw4l"><div data-type="label" data-device="L2B" data-get="duration_in_traffic"></div></td>
   </tr>
</table>
</li>

So würde ich einzelne Tabellen anlegen.

Code Auswählen Erweitern

<li data-row="2" data-col="4" data-sizex="6" data-sizey="3">
        <header>WOHNZIMMER</header>
        <div class="container">
          <div class="left">
                <div data-type="thermostat" data-device="WohnzimmerHeizung_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="cell left-space"></div>
                <div data-type="thermostat" data-device="WohnzimmerHeizung2_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="top-narrow left-space"></div>
          </div>
          <div class="right right-space">
                <div data-type="switch" data-device="PowerAV_Sw" class="cell"></div>
                <div data-type="label" class="">SchrankLicht</div>
                <div data-type="dimmer" data-device="HUEDevice1" data-get-on="!off" data-get-off="off" class="top-space-2x" ></div>
                <div data-type="label" class="cell">Philips</div>
          </div>

Bei diesem Beispiel tue ich mich total schwer mir das ganze vorstellen zu können und nach meinen Wünschen anzupassen. Gibt es irgendwo eine Seite wo das etwas besser beschrieben ist?

Ich habe den Sinn hinter den "Klassen" glaube ich noch nicht ganz verstanden.. Ich hatte mal HTML in der Schule.. ;-(

Vielen Dank für Hilfestellungen!

Christoph

[amenomade]

Die Klassen sind auf der Github Seite beschrieben:
https://github.com/knowthelist/fhem-tablet-ui#format

[moonsorrox]

vllt. kommst du hiermit besser klar...! 
https://wiki.fhem.de/wiki/FHEM_Tablet_UI

[spel]

Hallo,

danke für die Links. Die Github-Seite war noch etwas besser!

Ich habe jetzt noch folgendes Problem:

Code Auswählen Erweitern

<div data-type="label" class="top-space" class="gray" class="cell">Rollo</div>
-> Hier passt der Abstand "top-space" - jedoch wird "gray" ignoriert!

Code Auswählen Erweitern

<div data-type="label" class="gray" class="top-space" class="cell">Rollo</div>
-> Hier ist es andersherum: es passt die Farbe "gray" - jedoch wird "topspace" ignoriert!

Danke für Hinweise!
Christoph

[amenomade]

Code Auswählen Erweitern

<div data-type="label" class="top-space, gray, cell" >Rollo</div>

[spel]

Hallo,

das Ergebnis ist leider das gleiche...

Code Auswählen Erweitern

<li data-row="1" data-col="4" data-sizex="2" data-sizey="2">
    <header>Aussentemperatur</header>
    <div data-type="label" class="top-space, gray, cell">Temperatur</div>
    <div data-type="label" class="bigger" data-device="GV.ga.TF.Aussentemperatur" data-get="temperature" data-unit="&deg;C" class="top-space"></div>
    <div data-type="label" class="top-space" >Luftfeuchte</div>
    <div data-type="label" class="bigger" data-device="GV.ga.TF.Aussentemperatur" data-get="humidity" data-unit="%" class="top-space"></div>
</li>



Danke,
Christoph

[Standarduser]

Jedes Element, ganz gleich ob HTML oder Widget, darf nur ein mal class bekommen. Gibst du dieses Attribut mehrfach an, wird immer nur das erste genommen.
Um mehrere Klassen zuweisen zu können, nutzt du 1x class und fügst alle gewünschten Klassen per Leerzeichen getrennt ein.

...class="klasse1 klasse2 klasse3"

[spel]

Hallo Standarduser!

Besten Dank!