Hallo zusammen,
ich würde gerne ein paar Fotos nebeneinander in meiner TabletUI darstellen. Leider krieg ich das nur bedingt hin. Ich habe es jetzt mal mit zwei Bildern probiert die haben jetzt aber einen riesen Abstand zueinander. Zu Testzwecken habe ich jetzt einfach mal die Aral Logos genommen. Später sollen es Urlaubsbilder sein.
Folgendes habe ich probiert:
<li data-row="7" data-col="1" data-sizex="9" data-sizey="3">
<header>Test</header>
<div class="sheet">
<div class="row">
<div class="cell">
<div data-type="image" data-url="/fhem/www/images/tankstelle/aral.png" data-size="100px"></div>
</div>
<div class="cell">
<div data-type="image" data-url="/fhem/www/images/tankstelle/aral.png" data-size="100px"></div>
</div>
</div>
</div>
</li>
</li>
Das Ergebnis seht ihr im angehängten Screenshot. Wie gesagt das Wunschziel wäre die Fotos "linksbündig" beginnend nebeneinander zu positionieren.
Ich komme da nicht weiter. Könnt ihr mir bitte helfen. Das wäre super nett.
Vielen Dank für eure Hilfe im Voraus
sxx128
Du möchtest die Bilder in den Zellen also linksbündig, richtig? Für cell class gibt es laut wiki auch left-align (https://wiki.fhem.de/wiki/FHEM_Tablet_UI#CSS-Klassen) welches die Inhalte der Zelle linksbündig darstellt:
<li data-row="7" data-col="1" data-sizex="9" data-sizey="3">
<header>Test</header>
<div class="sheet">
<div class="row">
<div class="cell left-align">
<div data-type="image" data-url="/fhem/www/images/tankstelle/aral.png" data-size="100px"></div>
</div>
<div class="cell left-align">
<div data-type="image" data-url="/fhem/www/images/tankstelle/aral.png" data-size="100px"></div>
</div>
</div>
</div>
</li>
Hallo yersinia,
vielen Dank für die Hilfe.
left-align
hatte ich schon ausprobiert.
Das bringt nicht das gewünschte Ergebnis (siehe Scrennshot). Ich möchte im Endergebnis dass das rechte Aral Logo unmittelbar an das linke angrenzt und da daneben soll dann das nächste Foto. Eins nach dem anderen ohne große Abstände dazwischen.
Grüße
sxx128
Naja, du nutzt eine Tabelle, welche die gesamte zur Verfügung stehende Breite ausnutzt, mit zwei Spalten, welche sich den Platz teilen. Works as defined.
Wenn du die Tabelle nicht benötigst, kannst du auch ohne Arbeiten:
<li data-row="7" data-col="1" data-sizex="9" data-sizey="3">
<header>Test</header>
<div class="hbox">
<div data-type="image" data-url="/fhem/www/images/tankstelle/aral.png" data-size="100px"></div>
<div data-type="image" data-url="/fhem/www/images/tankstelle/aral.png" data-size="100px"></div>
</div>
</li>
Wenn du die Tabelle dennoch benötigst, brauchst du mehr Zellen (Spalten) und eine Definition der Verhältnisse - hier 1/4 - 1/4 - 2/4:
<li data-row="7" data-col="1" data-sizex="9" data-sizey="3">
<header>Test</header>
<div class="sheet">
<div class="row">
<div class="cell-1-4 left-align">
<div data-type="image" data-url="/fhem/www/images/tankstelle/aral.png" data-size="100px"></div>
</div>
<div class="cell-1-4 left-align">
<div data-type="image" data-url="/fhem/www/images/tankstelle/aral.png" data-size="100px"></div>
</div>
<div class="cell-2-4">
<!-- leer -->
</div>
</div>
</div>
</li>
oder so mit prozentangaben - hier 20% / 20% / 60%:
<li data-row="7" data-col="1" data-sizex="9" data-sizey="3">
<header>Test</header>
<div class="sheet">
<div class="row">
<div class="cell-20 left-align">
<div data-type="image" data-url="/fhem/www/images/tankstelle/aral.png" data-size="100px"></div>
</div>
<div class="cell-20 left-align">
<div data-type="image" data-url="/fhem/www/images/tankstelle/aral.png" data-size="100px"></div>
</div>
<div class="cell-60">
<!-- leer -->
</div>
</div>
</div>
</li>
Hallole
also ich glaube langsam ich bin zu doof dazu. Eine Tabelle brauche ich nicht dazu. Deswegen habe ich es jetzt so probiert.
Allerdings mit mäßigen Erfolg.
<li data-row="7" data-col="1" data-sizex="9" data-sizey="3">
<header>Test</header>
<div class="hbox">
<div data-type="image" data-url="/fhem/www/images/tankstelle/aral.png" data-size="100px"></div>
<div data-type="image" data-url="/fhem/www/images/tankstelle/aral.png" data-size="100px"></div>
</div>
</li>
Grüße
sxx128
Hallole
nach langem hin und her passt es jetzt. HBox war genau das richtige.
<li data-row="7" data-col="1" data-sizex="9" data-sizey="3">
<div class="hbox">
<div class="card"><header>Bild 1</header><div data-type="image" data-url="/fhem/www/images/tankstelle/aral.png" data-size="100px"></div></div>
<div class="card"><header>Box 02</header><div data-type="image" data-url="/fhem/www/images/tankstelle/aral.png" data-size="100px"></div></div>
<div class="card"><header>Box 03</header><div data-type="image" data-url="/fhem/www/images/tankstelle/aral.png" data-size="100px"></div></div>
<div class="card"><header>Box 04</header><div data-type="image" data-url="/fhem/www/images/tankstelle/aral.png" data-size="100px"></div></div>
</div>
</li>
Das Ergebnis seht ihr anhand des Screenshots
Vielen Dank für die Hilfe.
Grüße
sxx128