Widget-Anordnung

[tndx]

Hallo,

meine Frage im Thread für Widgets für Rolladensteuerungen ist wohl untergegengen, deswegen versuche ich es mit einem eigenen Thread.

Ich versuche für meine Rolladensteuerung eine Widget-Gruppe zu nutzen s. 1.Bild, oben links. Die Gruppe soll gleich zentriert werden mit Widgets, die die Steuerungsbuttons nicht haben, also sollen immer gleich große Zellen benutzt werden, unabhängig davon ob ein Widget oder eine Widgetgruppe benutzt wird. Ich habe mit unterschiedlichen Layot-Möglichkeite und Klassen-Attributen experimentiert, das beste, was ich hinbekommen habe, ist im 1. Bild zu sehen, das ist aber immer noch nicht optimal bzgl vertikaler Ausrichtung. Alle anderen Versuche führten bis jetzt dazu, dass meine Rollden-Widget-Gruppe auseinandergerissen wurde, s. 2.Bild.

Hier der Code von dem 1.Bild:

Code Auswählen Erweitern


<li data-row="1" data-col="2" data-sizey="1" data-sizex="3">
    <header>Küche</header>
<div class="sheet">
<div class="row">
<div class="cell">
<div class="row">
<div class="col-50 big"
data-type="symbol"
data-device="Kueche_Rollo"
data-icons='["oa-fts_shutter_100","oa-fts_shutter_10"]'
data-background-icon="fa-circle"
data-states='["runter","hoch"]'
data-background-color="#505050"
data-color="#2A2A2A"
title="Küchen-Rollo">
</div>
<div class="col-50 tiny triplebox-v">
<div data-type="push"
data-device="Kueche_Rollo"
data-icon="fa-chevron-up"
data-background-icon="fa-square-o"
data-set-on="hoch"
title="hoch">
</div>
<div data-type="push"
data-device="Kueche_Rollo"
data-icon="fa-stop"
data-background-icon="fa-square-o"
data-set-on="stop"
title="stop">
</div>
<div data-type="push"
data-device="Kueche_Rollo"
data-icon="fa-chevron-down"
data-background-icon="fa-square-o"
data-set-on="runter"
title="runter">
</div>
</div>
</div>
</div>
<div class="cell big"
data-type="symbol"
data-device="Kueche_Fenster"
data-icons='["oa-fts_window_2w", "oa-fts_window_2w_open_l", "oa-fts_window_2w_tilt_l"]'
data-background-icon="fa-circle"
data-states='["closed","open", "tilted"]'
data-background-color="#505050"
data-color="#2A2A2A"
title="Küchenfenster">
</div>
<div class="cell big"
data-type="symbol"
data-device="Kueche_DAH"
data-icon="oa-vent_ventilation"
data-background-icon="fa-circle"
data-states='["an","aus"]'
data-background-color="#505050"
data-colors='["#2A2A2A","#2A2A2A"]'
title="Dunstabzugshaube">
</div>
</div>
</div>
</li>
<li data-row="2" data-col="2" data-sizey="1" data-sizex="3">
    <header>Wohnzimmer</header>
<div class="sheet">
<div class="row">
<div data-type="symbol"
data-device="WZ_Rollo_links"
data-icons='["oa-fts_shutter_100","oa-fts_shutter_10"]'
data-background-icon="fa-circle"
data-states='["runter","hoch"]'
data-background-color="#505050"
data-color="#2A2A2A"
title="Wohnzimmer-Rollo links"
class="cell big top-space">
</div>
<div data-type="symbol"
data-device="WZ_Rollo_rechts"
data-icons='["oa-fts_shutter_100","oa-fts_shutter_10"]'
data-background-icon="fa-circle"
data-states='["runter","hoch"]'
data-background-color="#505050"
data-color="#2A2A2A"
title="Wohnzimmer-Rollo rechts"
class="cell big top-space">
</div>
<div data-type="symbol"
data-device="WZ_Rollo_Terrassentuer"
data-icons='["oa-fts_shutter_100","oa-fts_shutter_10"]'
data-background-icon="fa-circle"
data-states='["runter","hoch"]'
data-background-color="#505050"
data-color="#2A2A2A"
title="Wohnzimmer-Rollo Terrassentür"
class="cell big top-space">
</div>
</div>
</div>
</li>


Hat jemand einen Tip für mich, wie ich das ohne Rückfall auf <table> hinbekomme? Wenn es mit weniger Layout-divs geht, hätte ich nichts dagegen... Mit css kenne ich mich leider gar nicht aus.