Moin
Ich beschäftige mich seit ein paar Wochen mit FHEM und bin zurzeit dabei mir eine TabletUI Oberfläche zusammen zustellen.
Bis jetzt habe ich mir die Oberflächen von den anderen Usern angeschaut und durch ausprobieren heraus gefunden wie ich was zusammenstellen muss.
Doch jetzt komme ich so langsam eine meine Grenzen.
Deshalb suche ich eine einfache HTML Doku die sich mit dem Aufbau der einzeln Felder beschäftigt.
http://uploads.tapatalk-cdn.com/20160626/616ce69ef1514560251d16737e71bba8.jpg (http://uploads.tapatalk-cdn.com/20160626/616ce69ef1514560251d16737e71bba8.jpg)
Bei diesem Beispiel hätte ich gerne die Werte Regen/Sonne weiter nach links.
http://uploads.tapatalk-cdn.com/20160626/620925aa65c5cd0a075aa17e71e3d4e7.jpg (http://uploads.tapatalk-cdn.com/20160626/620925aa65c5cd0a075aa17e71e3d4e7.jpg)
Bei diesem Feld bekomme ich es nicht hin das die Werte neben Icon steht.
Am schönsten wäre es mit Beispielbilder um sich daran zu orientieren.
Gruß Peter
http://lmgtfy.com/?q=Html+doku ;)
Edit:
Ohne Quellcode ist mehr Hilfe nicht möglch. Sry
Moin
Code zu Bild 1
<li class="halbTransparent border-left" data-row="5" data-col="3" data-sizex="5" data-sizey="1">
<header class="headerTransparent">WETTER</header>
<table class="calls" width="100%">
<tr>
</tr>
<tr>
<td>
<table>
<tr>
<td><div data-type="label"
data-device="Mywetter"
data-get="temperature"
data-unit="%B0C%0A"
class="cell bigger"></div></td>
</tr>
<tr>
</table>
</td>
<td>
<div class="">
<div data-type="weather"
data-device="Mywetter"
data-get="fc0_weatherDayIcon"
data-imageset="kleinklima"
class="cell large" style="width:40%"></div>
<div data-type="label"
data-device="Mywetter"
data-get="weather"
class="narrow newline left"></div>
</div>
</td>
<td>
<div class="inline left-space">
<div class="">
<div class="medium inline">Regen:
</div>
<div data-type="label"
data-device="Mywetter"
data-get="fc0_chOfRainDay"
data-unit="%"
data-limits='[0,40,80]'
data-colors='["green","#aa6900","firebrick"]'
class="big inline">
</div>
</div>
<div class="">
<div class="medium top-space-2 inline">Sonne:
</div>
<div data-type="label"
data-device="Mywetter"
data-get="fc0_sun"
data-limits='[0,40,80]'
data-colors='["firebrick","#aa6900","green"]'
data-unit="%"
class="big top-space-2 inline">
</div>
</td>
<td>
<div class="B2"><center><div data-type="label" class="inline medium"><big>↑</big><small> Sonne:</small><br></div>
<div data-type="label"
data-device="myTwilight"
data-get="sr_civil"
class="big">
</div>
</div>
<div class="C2"><center><div data-type="label" class="inline medium"><big>↓</big><small> Sonne:</small><br></div>
<div data-type="label"
data-device="myTwilight"
data-get="ss_civil"
class="big">
</div>
</div>
</td>
</tr>
</li>
Code zu Bild 2
<li class="halbTransparent border-left" data-row="5" data-col="8" data-sizex="2" data-sizey="1">
<header class="headerTransparent">MONDPHASEN</header>
<div class="">
<div data-type="image"
data-device="Mond"
data-get="ftui"
class="cell large" style="width:50%"></div>
<div data-type="label"
data-device="Mond"
data-get="STATE"
class="narrow newline left">
</div>
</td>
<div class="B2"><center><div data-type="label" class="inline medium"><big>↑</big><small> Sonne:</small><br></div>
<div data-type="label"
data-device="myTwilight"
data-get="sr_civil"
class="">
</div>
</div>
<div class="C2"><center><div data-type="label" class="inline medium"><big>↓</big><small> Sonne:</small><br></div>
<div data-type="label"
data-device="myTwilight"
data-get="ss_civil"
class="">
</div>
</tr>
</li>
Gruß Peter
Zitat von: Octopus180 am 27 Juni 2016, 11:37:29
Code zu Bild 1
...
Code zu Bild 2
Ich kann leider keine Bilder sehen: https://forum.fhem.de/index.php/topic,53773.0.html
Im ersten Beitrag sind Links zu den Bildern. Ich habe es leider nicht anders hinbekommen.
Die beste Doku zu HTML ist immer noch https://wiki.selfhtml.org/
LG
pah
Zu 1 solltest du wohl mit width im <td> Tag arbeiten.
Bei 2 musst du glaube mit colspan oder rowspan arbeiten, wenn ich es auf die Schnelle richtig sehe.
Edit:
Arbeite mal mit Rand anzeigen, dann siehst du wo was wirklch ist. Und schau dir die Doku zu Table nochmal an, da scheint einiges nicht zu stimmen. Du scheinst <td> <tr> Tags zu haben wo sie nix suchen haben und teilweise verweist sind.
Für solche trivialen Fehler gibt es tidy als offizielles Tool des W3C
https://www.w3.org/People/Raggett/tidy/
LG
pah