Positionierung von Texten auf einem Bild aber mit FLEX Design

[Stumpf]

Hallo zusammen,

ich habe ein neue Tablet bekommen, und wie man hier schon des öfteren gelesen hat passt natürlich das Grid Design nicht mehr.
Daher dachte ich mir mach es doch gleich mit Flex, wollte ich schon immer mal probieren.

Soweit so gut.
Die Seite sieht nach viel arbeit auch wieder sehr ähnlich aus, aber ich habe Probleme bei der Positionierung der Zimmertemperaturen.

Ich habe ein Bild des Hausgrundrisses als Hintergrund und positioniere die aktuellen Daten der Zimmer in den zugehörigen Raum.
Da aber das Flex Design die Größe an passt, verschieben sich immer die Texte (Lable).
Aus der Referenz habe ich die display class verwendet um die Positionierung zu machen.
Gibt es hier einen besseren Weg um die Daten immer im Bild an der gleichen Position zu haben?

Hier noch der Code-Schnipsel um den es geht.

Danke

Code Auswählen Erweitern


   <div class="display">
            <!-- Darstellunh Erdgeschoss    -->
            <div data-type="image" data-url="../images/ErdgeschossFhem.png" data-size="80%"></div>

            <div class="ontop bigger" data-color="#00cc66" style="left: 415px; top: 475px;" data-url="#RaumklimaErdgeschoss-GaesteKlo.html" data-type="link">
               <table style="font-size:11px">
                  <tr>
                     <td>
                        <table>
                           <tr>
                              <td>
                                 <div data-type="label" data-colors='["#B28F00"]'>Soll:</div>
                              </td>
                              <td>
                                 <div data-type="label" data-colors='["#B28F00"]' data-device="GK.Sensor" data-get="SollTemperatur" data-unit="%B0C%0A"></div>
                              </td>
                              <td>
                                 <div data-type="label" data-colors='["#B28F00"]'> / Ist:</div>
                              </td>
                              <td>
                                 <div data-type="label" data-colors='["#B28F00"]' data-device="GK.Sensor" data-get="Temperatur" data-unit="%B0C%0A"></div>
                              </td>
                           </tr>
                        </table>
                        <div data-type="label" data-colors='["#B28F00"]' data-device="GK.Sensor" data-get="Feuchtigkeit" data-unit="%"></div>
                     </td>
                     <td>
                        <div data-type="symbol" data-device="GK.Sensor" data-get="Heizkreis" data-icon="oa-sani_heating_automatic" data-get-on='Ein|On'
                             data-get-off='Aus|Off' data-off-background-color='#aa6900' class="cell normal"></div>
                     </td>
                  </tr>
               </table>
            </div>
         </div>
      </div>


[hsepm]

Ich kenne mich mit CSS auch nicht 100% aus, aber die Positionierungsanweisungen "left" und "top" verstehen meiner Meinung nach auch relative Angaben / Prozentwerte.

[yersinia]

Schau dir mal das CSS Box Model (oder hier) an.
Für eine saubere Positionierung solltest du alle Container ausdefinieren - die Positionierung bezieht sich dabei immer auf das Eltern-Element. Dies kann auch relativ geschehen.

[Stumpf]

Auch wenn ich etwas spät dran bin.

Danke erstmal für die Info.

Ich habe mich schon etwas daran versucht, aber das Bild scheint sich nicht "linear" zu verhalten. Damit verschiebt es mit trotzdem das Design immer wieder.

Irgendwas mache ich noch falsch.

[yersinia]

Wird das png dynamisch erzeugt oder warum nimmst du das image-widget hier?

Code Auswählen Erweitern

<div data-type="image" data-url="../images/ErdgeschossFhem.png" data-size="80%"></div>
Sollte das png statisch sein, kannst du wesentlich ressourcen-schonender einfach es via img-tag einbinden (CSS3 Optionen):

Code Auswählen Erweitern

<img src="../images/ErdgeschossFhem.png" style="max-width: 80%; height: auto;" />
Hier kannst du dann mit style etc. dann das Bild konfigurieren

Analog ressourcen-schonend solltest du  auch keine ladel-widgets verwenden, wenn du keine Readings ausliest. Anstelle von

Code Auswählen Erweitern

<div data-type="label" data-colors='["#B28F00"]'> / Ist:</div>
nimm

Code Auswählen Erweitern

<div style="color: #B28F00;"> / Ist:</div>

[Stumpf]

Hallo versinia,

ja das warum ist leicht zu erklären..... ich weiß es nicht besser. 
Komme aus der c/c++ Welt und die Themen mit Webdesign erschließt sich mir nur sehr schwer!

Daher bin ich für jeden Hinweiß dankbar.

Ich habe die Anmerkungen von dir eingebaut und es sieht schon viel besser aus.
Vielen Dank für die Info!!!!

[yersinia]

ja das warum ist leicht zu erklären..... ich weiß es nicht besser. 

Ja, so hab ich auch angefangen, man iteriert sich da einfach rein und lernt und lernt und lernt.
Mein warum galt eher der Förderung meines Verständnis.
Super, wenns passt.

[Stumpf]

Allerdings orientiert sich die Schrift immer noch nicht am Bild sondern am Display.
Somit verschiebt es sich immer noch.

Aber Bilder sagen mehr als tausend Worte.

Code Auswählen Erweitern


      <div class="hbox card semitransparent">
         <header>
            <font>Erdgeschoss</font>
         </header>

         <div class="display">
            <!-- Darstellunh Erdgeschoss    -->
            <img src="../images/ErdgeschossFhem.png" style="max-width: 60%; height: auto;" >

            <div class="ontop bigger" data-color="#00cc66" style="left: 58%; top: 83%;" data-url="#RaumklimaErdgeschoss-GaesteKlo.html" data-type="link">
               <table style="font-size:8px">
                  <tr>
                     <td>
                        <table>
                           <tr>
                              <td>
                                 <div style="color: #B28F00;">Soll:</div>
                              </td>
                              <td>
                                 <div data-type="label" data-colors='["#B28F00"]' data-device="GK.Sensor" data-get="SollTemperatur" data-unit="%B0C%0A"></div>
                              </td>
                              <td>
                                 <div style="color: #B28F00;"> / Ist:</div>
                              </td>
                              <td>
                                 <div data-type="label" data-colors='["#B28F00"]' data-device="GK.Sensor" data-get="Temperatur" data-unit="%B0C%0A"></div>
                              </td>
                           </tr>
                        </table>
                        <div data-type="label" data-colors='["#B28F00"]' data-device="GK.Sensor" data-get="Feuchtigkeit" data-unit="%"></div>
                     </td>
                     <td>
                        <div data-type="symbol" data-device="GK.Sensor" data-get="Heizkreis" data-icon="oa-sani_heating_automatic" data-get-on='Ein|On'·
                             data-get-off='Aus|Off' data-off-background-color='#aa6900' class="cell normal"></div>
                     </td>
                  </tr>
               </table>
            </div>
            </img>
         </div>
      </div>



[yersinia]

Ok, das ist etwas tricky - jdfs auch für mich. Also die Skalierung des Bildes hier bezieht sich immer auf das Bild selbst (im img-Tag) - es sei denn, der Bildschirm ist kleiner. Daher auch die max-width.

Für eine saubere Skalierung musst du dich mit dem oben erwähnten BorderBox-Modell (wegen Rahmen und Abständen)aber auch mit dem positioning befassen.

Das via img eingebette Bild skaliert frei in dem <div class="display">. Du kannst diesem <div> allerdings das Bild auch als background mitgeben:

Code Auswählen Erweitern

<div class="display" style="background-image: url('../images/ErdgeschossFhem.png');">
(das img kannst du erstmal auskommentieren)

Und nun kannst du den Tabellen-Code (die <table>, <tr>, <td> usw) eigentlich weg lassen und nur mit <div>-Container positionieren, ungefähr so (ungetestet; mach vorher ein Backup deines Codes):

Code Auswählen Erweitern

<div class="display" style="position: absolute; left: 0%; top: 0%; background-image: url('../images/ErdgeschossFhem.png');">
            <!-- Darstellung Erdgeschoss    -->
            <!-- <img src="../images/ErdgeschossFhem.png" style="max-width: 60%; height: auto;" /> -->

            <div class="ontop bigger" data-color="#00cc66" style="position: absolute; left: 58%; top: 83%;" data-url="#RaumklimaErdgeschoss-GaesteKlo.html" data-type="link">
            </div>
            <div style="color: #B28F00; position: absolute; left: 58%; top: 83%;">Soll:</div>

            <div data-type="label" data-colors='["#B28F00"]' data-device="GK.Sensor" data-get="SollTemperatur" data-unit="%B0C%0A"
                style="position: absolute; left: 64%; top: 83%;"></div>

            <div style="color: #B28F00; position: absolute; left: 68%; top: 83%;"> / Ist:</div>

            <div data-type="label" data-colors='["#B28F00"]' data-device="GK.Sensor" data-get="Temperatur" data-unit="%B0C%0A"
                style="position: absolute; left: 74%; top: 83%;"></div>

            <div data-type="label" data-colors='["#B28F00"]' data-device="GK.Sensor" data-get="Feuchtigkeit" data-unit="%"
                style="position: absolute; left: 66%; top: 90%;"></div>

            <div data-type="symbol" data-device="GK.Sensor" data-get="Heizkreis" data-icon="oa-sani_heating_automatic" data-get-on='Ein|On'
                 data-get-off='Aus|Off' data-off-background-color='#aa6900'
                class="normal"
                style="position: absolute; left: 80%; top: 83%;"></div>
</div>