[FTUI] Layout CSS Frage

[nanocosmos]

Hallo zusammen,

ich wollte nach längerer Zeit mein Tablet Layout aktualisieren. Hauptsächlich um die neuen amcharts Icons für das Wetter nutzen zu können. 
Bisher lag der Ordner nicht in www/tablet sondern in www/tablet/meinlayout.
Es hat leider (und auch erwartungsgemäß) nicht gereicht die neue widget_weather.js in meinen Unterordner meinlayout zu kopieren.
Ich habe dahen den kompletten Ordner meinlayout nun ins eigentliche Hauptverzeichnis für FTUI (www/tablet) kopiert.
Macht eh Sinn, damit die ganzen Updates für FTUI auch mal bei mir ankommen. Biser hatten sie ja keine Auswirkungen, da mein Layout ja in einem Unterordner lag.
Nun hat FHEM natürlich bei einem Update auch meine CSS Dateien überschrieben (bis auf fhem-tablet-ui-user.css).

Ich habe nun den Effekt, dass mein Layout an zwei Stellen stark verschoben wirkt:
Problem 1:
Ich habe mehrere div Elemente die in einer hbox nebeneinander liegen, zum Beispiel:

Code Auswählen Erweitern


<div class ="hbox items-space-between items-space-around">
      <div>
         <div data-type="symbol"  data-off-background-color="#7A7A7A" data-on-background-color="#7A7A7A" data-device="XMI_win1"    data-get="state" data-off-color="#E6E600"    data-get-on='["open","close"]'  data-icons='["oa-fts_window_roof_open_2","oa-fts_window_roof"]'    data-on-colors='["red","green"]' class="big narrow"></div>                 
         <div class="narrow">Bad oben</div>
      </div>
                 <div>
         <div data-type="symbol"  data-off-background-color="#7A7A7A" data-on-background-color="#7A7A7A" data-device="XMI_win2"    data-get="state" data-off-color="#E6E600"    data-get-on='["open","close"]'  data-icons='["oa-fts_window_roof_open_2","oa-fts_window_roof"]'    data-on-colors='["red","green"]' class="big narrow"></div>                 
         <div class="narrow">Bad oben</div>
      </div>
</div>


Der Abstand ist jetz aber viel größer als vorher und ich weiß leider nicht, an welcher Stelle ich dies in der user.css korrigieren könnte.
https://s18.directupload.net/images/190616/o4fxbwh5.jpg

Problem 2:
An anderer Stelle habe ich die gute alte Tabelle zur Formatierung genutzt, leider ist der Platz innerhalb der Zellen viel izu groß.
Habe bereits in der user.css das padding auf 0px gesetzt, die Elemente brauchen aber immer noch zu viel Platz.

Code Auswählen Erweitern


table {
   width: 100%;
   table-layout: fixed;
   border-collapse: collapse;
   padding: 0px;
}



Wahrscheinlich ist es nur ein kleiner CSS Eintrag, aber gerade sehe ich den Wald vor lauter Bäumen nicht...

[nanocosmos]

Problem 1 konnte ich durch line-height lösen. Allerdings fände ich es "schöner" eine allgemeine Regel in CSS zu definieren, bei der kein Abstand innerhalb der hbox besteht, statt bei jedem <div> Element noch eine entsprechende line-height anzugeben.

[yersinia]

Zum Problem 2 wäre noch der HTML Code wünschenswert.
Wenn du das padding auf dem <table>-Element definierst, kann es uU auf dem <td>-Element ignoriert werden. Du kannst probieren, dass padding: 0; oder padding: inherit; auf dem <td>-Element zu definieren ([1]; [2]).

Auch immer wieder spannend: CSS Boxmodell