Bilder nebeneinander anordnen links beginnend klappt nicht

[sxx128]

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:

Code Auswählen Erweitern



<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

[yersinia]

Du möchtest die Bilder in den Zellen also linksbündig, richtig? Für cell class gibt es laut wiki auch left-align welches die Inhalte der Zelle linksbündig darstellt:

Code Auswählen Erweitern

<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>

[sxx128]

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

[yersinia]

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:

Code Auswählen Erweitern

<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:

Code Auswählen Erweitern

<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%:

Code Auswählen Erweitern

<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>

[sxx128]

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.

Code Auswählen Erweitern


<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

[sxx128]

Hallole

nach langem hin und her passt es jetzt. HBox war genau das richtige.

Code Auswählen Erweitern



<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