Anfängerfrage: Tablet UI html code

[Steffmaster]

Hallo! Ich habe folgenden code.

Code Auswählen Erweitern

<li data-row="2" data-col="2" data-sizex="4" data-sizey="3">
<header>Jalousien</header>
<div class="cell inline">
    <div class="cell">
              <div data-type="label" class="cell darker">Bad</div>
              <div data-type="symbol" data-device="Rollo_Bad" data-get="status"
   data-get-on='["up","0","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-8]","99","down"]'
               data-icons='["oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_100","oa-fts_shutter_100"]'
               data-on-colors='["SeaGreen","SeaGreen","GoldenRod","GoldenRod","GoldenRod","GoldenRod","GoldenRod","GoldenRod","GoldenRod","GoldenRod","GoldenRod","Crimson","Crimson"]'
               class="cell big"></div>
   <div data-type="label" data-device="Rollo_Bad" data-get="status"class="cell darker narrow" data-unit="%"></div>
   

  <div data-type="label" class="cell darker">Fabienne links</div>
              <div data-type="symbol" data-device="Rollo_Fabienne_1" data-get="status"
   data-get-on='["up","0","1[0-9]","2[0-9]","3[0-9]","4[0-9]","5[0-9]","6[0-9]","7[0-9]","8[0-9]","9[0-8]","99","down"]'
               data-icons='["oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_100","oa-fts_shutter_100"]'
               data-on-colors='["SeaGreen","SeaGreen","GoldenRod","GoldenRod","GoldenRod","GoldenRod","GoldenRod","GoldenRod","GoldenRod","GoldenRod","GoldenRod","Crimson","Crimson"]'
               class="cell big"></div>
   <div data-type="label" data-device="Rollo_Fabienne_1" data-get="status"class="cell darker narrow" data-unit="%"></div>
           
</div>
</div>


</li>

Soweit alles gut. In der html Seite werden mir dann allerdings die beiden Jalousien unter einander angezeigt. Ich hätte sie aber gern neben einander. Ich dachte bisher, das erledigt.

Code Auswählen Erweitern

<div class="cell inline">

Wo liegt da denn der Fehler?

Besten Dank

[CoolTux]

Versuche mal statt inline ein left

Grüße

[Steffmaster]

Das "letf" bedeutet doch linksausgerichtet.

[CoolTux]

und wenn du zwei objekte in ein und der selben höhe links ausrichtest reihen sie sich nebeneinander linksbündig ein. zumindest bei mir. bei dir anscheinend nicht, oder hast du es noch nicht mal probiert?

[wkarl]

Hallo,

hier ein Beispiel von mir. Ich bin kein Spezialist, ich such mir passendes und modifizier es nach meinem Gusto. Also Ich kann Dir nicht alles erklären - das Wieso und Warum.

Code Auswählen Erweitern

<header><font size="+1">Wohnzimmer Teich</font></header>
<div class="container">

<div class="cell">
<div class="inline" data-type="push"
    data-device="Wohnzimmer_RL_Teich" data-set="off"
data-icon="oa-control_arrow_up"
      data-background-icon="fa-circle"
   data-off-background-color="dimgrey"
data-on-background-color="dimgrey"
data-off-color="darkorange"
data-on-color="darkorange">
      </div>
<div class="inline" data-type="push"
    data-device="Wohnzimmer_RL_Teich" data-set="pct 20"
data-icon="oa-fts_shutter_20"
      data-background-icon="fa-circle"
   data-off-background-color="dimgrey"
data-on-background-color="dimgrey"
data-off-color="darkorange"
data-on-color="darkorange">
      </div>
</div>
<div class="cell">
<div class="inline" data-type="push"
    data-device="Wohnzimmer_RL_Teich" data-set="stop"
data-icon="oa-audio_stop"
      data-background-icon="fa-circle"
   data-off-background-color="dimgrey"
data-on-background-color="dimgrey"
data-off-color="darkred"
data-on-color="darkred">
      </div>
<div class="inline" data-type="symbol"
    data-device="Wohnzimmer_RL_Teich"
    data-get="state"
    data-get-on='[".","1.","2.","3.","4.","5.","6.","7.","8.","9.","100"]'
data-icons='["oa-fts_shutter_00","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40","oa-fts_shutter_50",
"oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80","oa-fts_shutter_90","oa-fts_shutter_100"]'
      data-background-icon="fa-square-o"
   data-off-background-color="dimgrey"
data-on-background-color="dimgrey"
data-off-color="darkorange"
data-on-color="darkorange">
      </div>
</div>
<div class="cell">
<div class="inline" data-type="push"
    data-device="Wohnzimmer_RL_Teich" data-set="on"
data-icon="oa-control_arrow_down"
      data-background-icon="fa-circle"
   data-off-background-color="dimgrey"
data-on-background-color="dimgrey"
data-off-color="darkorange"
data-on-color="darkorange">
      </div>
<div class="inline" data-type="push"
    data-device="Wohnzimmer_RL_Teich" data-set="pct 60"
data-icon="oa-fts_shutter_80"
      data-background-icon="fa-circle"
   data-off-background-color="dimgrey"
data-on-background-color="dimgrey"
data-off-color="darkorange"
data-on-color="darkorange">
      </div>
</div>

</div>



ciao walter

[devil77]

Das ganze ist zwar kein Thema für Fhem da es hier um css und html geht.
Aber mann muß sich die css schon mal richtig ansehen was wo an welcher stelle gesetzt wird.
So brauchst Du bei deinem Beispiel mit dem Wohnzimmer Teich gar kein div um alles packen und auch kein inline extra setzen um das gleiche Ergebnis zu bekommen.
Das liegt daran das Du  fa Icons benutzt und diese ein Klasse fa-stack erzeugen die bereits die Option inline mitrbingen.
Je weniger Ebenen man sich schaft umso einfacher ist es die css zu gestalten um die Optik anzupassen.
Das ist auch das Problem des Threaderstellers, jede Menge Div Boxen ohne zu schauen was ich will.
Du packst alles was zu einer Jalousie gehört in einen DIV (Icon, Header, Status). Damit hast Du jetzt 2 Div Boxen mit dem jeweiligem Inhalt.
Um diese Boxen legst Du einen DIV in dem die beiden DIV's nebeneinander liegen sollen.
Jetzt kannst Du den beiden Jalousie DIV die Klasse Inline geben damit sie wissen das sie sich nebeneinander im großen DIV zeigen sollen.

Code Auswählen Erweitern


<div>
  <div jalousie 1 class="inline"> Alles zu Jalousie 1 hierein</>
  <div jalousie 2 class="inline"> Alles zu Jalousie 2 hierein</>
</div>


Also vorher genau überlegen wass ich will.