(ERLEDIGT) Problem mit vbox / hbox

[misux]

HI!

Ich versuche mir eine zweite hbox zu basteln was irgendwie nicht gelingt... er will mir die Dinge die ich dort drin habe nicht ordentlich nebeneinander skalieren... es ist eher alles määächtig groß und durcheinander auf dem ganzen Screen...

Könnte bitte jemand drüber schauen wo ich den Fehler habe? Finde ihn vor lauter </div> nicht...

Code Auswählen Erweitern

<li data-row="1" data-col="1" data-sizex="9" data-sizey="1" class=bg-transparent>

<div class="hbox items-space-between">
<!-- ============= TOR ================ -->
<!-- ====================================== -->
<div class="vbox">
<div style="padding:10px" class="inline fixedlabel bigger" data-type="label" data-device="SENSOR_1_Tor" data-states='["open","closed"]' data-classes='["red","grey"]'>TOR</div>

<div data-type="classchanger"
      data-device="SENSOR_1_Tor"
      data-on-class="roundborder-red"
      data-off-class="roundborder-black">

    <div data-type="label"
      style="line-height: 3em;"
      data-device="SENSOR_1_Tor"
      data-get="STATE"
      data-substitution='["open","OFFEN!!!","closed","Geschlossen"]'
      data-limits='["open","closed"]'
      data-colors='["#FF0000","grey"]'></div>
</div>
</div>



<!-- ============= SUNRISE ================ -->
<!-- ====================================== -->
<div class="vbox">
<div style="color:#aa6900;" class="tall">
<div class="wi wi-sunrise"></div>
<div data-type="label" color:white; data-device="sunrise_indoor" data-get="NTM" class=""></div>
</div>
</div>


<!-- ============= UHR ================ -->
<!-- ============================================== -->
<div class="vbox">
<div style="padding-top:10px !important; color:white" class="">
<div data-type="clock" data-format="H:i" class="great"></div>
<div data-type="clock" data-format="d.M Y" class=""></div>
</div>
</div>


<!-- ============= SUNSET ================ -->
<!-- ====================================== -->
<div class="vbox">
<div style="color:#aa6900;" class="tall">
<div class="wi wi-sunset"></div>
<div data-type="label" color:white; data-device="sunset_indoor" data-get="NTM" class=""></div>
</div>
</div>


<!-- ============= HEIZUNG ================ -->
<!-- ====================================== -->
<div class="vbox">
<div style="padding:10px" class="fixedlabel bigger" data-type="label" data-device="SENSOR_1_Heizung" data-states='["open","closed"]' data-classes='["red","grey"]'>HEIZUNG</div>

<div data-type="classchanger"
      data-device="SENSOR_1_Heizung"
      data-on-class="roundborder-red"
      data-off-class="roundborder-black">

    <div data-type="label"
      style="line-height: 3em;"
      data-device="SENSOR_1_Heizung"
      data-get="STATE"
      data-substitution='["closed","i.O.","open","ALARM!!!"]'
      data-limits='["closed","open"]'
      data-colors='["grey","#FF0000"]'></div>
</div>
</div>

</li>

[TWART016]

Schicke am besten mal ein Bild und überprüfen deine divs. Ein den ersten Blick fehlen mindestens zwei >

[misux]

Jaha... Die hab ich auch gefunden... Sogar 4 davon...  Hier das Bild weil es leider keine Besserung gibt nach der korrektur.

Das verrückt große soll eigentlich in der ersten Reihe nebeneinander sein...

[drhirn]

Du musst den DIV innerhalb von vbox/hbox immer die Klasse "card" zuweisen.

[misux]

  Das ist es! Vielen Dank!!!

Noch eine Frage... wie passe ich einzeln die Header mit Farben (Schriftfarbe und Hintergrung) an... bei mir ist es überall Grauer Hintergrund und hellgraue Schriftfarbe... Würde die Gerne unterschiedlich machen...

z.B. den Lichtschalter Header:

Code Auswählen Erweitern

<li data-row="2" data-col="1" data-sizex="15" data-sizey="1" class="bg-transparent">

<header>Lichtschalter</header>
</br>
<div class="hbox items-space-between bold large">
<div class="vbox">
<div data-type="switch" class="cell narrow" data-on-background-color="#00FF00" 
             data-device="WZEZ_WZFLed"
             data-get-on="on"
     data-get-off="off"
     data-set-on="on">
</div>
<div class="fixedlabel" data-type="label" data-device="WZEZ_WZFLed" data-states='["on","off"]' data-colors='["#00FF00","grey"]'>Fenster LED</div>
</div>

[drhirn]

Mit CSS. Entweder direkt im header-Tag

Code Auswählen Erweitern

<header style="background: blue; color: white;">Lichtschalter</header>
oder in einer eigenen css-Datei, die du dann auch einbinden musst.

[misux]

 

Super! Vielen Dank!