Anfänger sucht einfache HTML Doku

[Octopus180]

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

Bei diesem Beispiel hätte ich gerne die Werte Regen/Sonne weiter nach links.

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

[Amenophis86]

http://lmgtfy.com/?q=Html+doku

Edit:
Ohne Quellcode ist mehr Hilfe nicht möglch. Sry

[Octopus180]

Moin

Code zu Bild 1

Code Auswählen Erweitern

<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

Code Auswählen Erweitern

<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

[Benni]

Code zu Bild 1

...

Code zu Bild 2

Ich kann leider keine Bilder sehen: https://forum.fhem.de/index.php/topic,53773.0.html

[Octopus180]

Im ersten Beitrag sind Links zu den Bildern. Ich habe es leider nicht anders hinbekommen.

[Prof. Dr. Peter Henning]

Die beste Doku zu HTML ist immer noch https://wiki.selfhtml.org/

LG

pah

[Amenophis86]

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.

[Prof. Dr. Peter Henning]

Für solche trivialen Fehler gibt es tidy als offizielles Tool des W3C

https://www.w3.org/People/Raggett/tidy/

LG

pah