Autor Thema: Text zu Bild verschoben und bekomme es einfach nicht hin.  (Gelesen 502 mal)

Offline Wasserwerk33

  • Full Member
  • ***
  • Beiträge: 496
Hallo Leute,

Bin in sachen Tablet Ui nicht sehr gut.

Aber ich bekomme es einfach nicht hin. Wo ist meine Fehler. Auf dem PC sieht es normal aus und auf dem Tablet Ipad verschoben.

könnte mir einer sagen was ich noch ändern kann?

Danke schon mal im vorraus

Index

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <!-- Mobile-Web-Config -->
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="mobile-web-app-capable" content="yes" />
 <!-- Favicon-Icon -->
 <link rel="shortcut icon" type="image/x-icon" href="images/home.ico" />
 <!-- Cache -->
    <!--<meta http-equiv="Cache-Control" content="no-store" />-->
 <!-- FTUI-Settings -->
 <meta name="debug" content="0">
 <meta name="longpoll_type" content="websocket" />
 <meta name="toast" content="1">
 <meta name="gridster_cols" content="60">
 <meta name="gridster_rows" content="30">
 <!-- 1,2,3...= n Toast-Messages, 0: No Toast-Messages -->
 <!-- Scripts -->
    <script type="text/javascript" src="js/fhem-tablet-ui.min.js" defer></script>
 <!-- Icon Fonts -->
 <link rel="stylesheet" href="fonts/roman/style.css" />
 <link rel="icon" href="favicon.ico" type="image/x-icon" />
 <!-- Custom CSS -->
    <link rel="stylesheet" href="css/fhem-blue-ui.css " />
    <link rel="stylesheet" href="css/animate.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />
</head>
<body>

    <title>FTUI Middendorf</title>
</head>

</head>
<body>
<div class="gridster">
<ul>
<!-- Menu oben-->
<li data-row="1" data-col="1" data-sizex="60" data-sizey="4" class="semitransparent">
<div class="hbox items-center">
<div class="vbox">
      <div data-type="pagebutton"
      data-url="#garten.html"
      data-load="#garten"
      data-fade-duration="0"
                data-background-icon="fa-square"
      data-icon="fa-coffee"
      data-color="white"
                data-background-colors='["orange","blue"]'
      class="menusize">
      </div>
      <div class="big robotothin centered narrow">Garten</div>
               </div>
            <div class="vbox">
<div data-type="pagebutton"
data-url="#licht.html"
data-load="#licht"
data-fade-duration="0"
            data-background-icon="fa-square"
data-icon="mi-lightbulb_outline"
data-color="#eee"
class="menusize">
</div>
<div class="big robotothin centered narrow">Licht</div>
          </div>
          <div class="vbox">
        <div data-type="pagebutton"
          data-url="#telefon.html"
          data-load="#telefon"
          data-icon="fa-phone"
          data-background-icon="fa-square"
          data-fade-duration="0"
          data-device="VerpassteAnrufe"
          data-get-off="0"
          data-states='["0",".*"]'
          data-icons='["fa-phone","fa-phone"]'
          data-colors='["white","white"]'
          data-background-colors='["gray","black"]'
          class="menusize">
        </div>
        <div class="big robotothin centered narrow">Anrufe</div>
        </div>
        <div class="vbox">
      <div data-type="pagebutton"
        data-url="#wetter.html"
        data-load="#wetter"
        data-fade-duration="0"
        data-background-icon="fa-square"
        data-icon="fa-umbrella"
        data-color="#eee"
        class="menusize">
      </div>
      <div class="big robotothin centered narrow">Wetter</div>
      </div>
        <div class="vbox">
        <div data-type="pagebutton"
          data-url="#wetter.html"
          data-load="#wetter"
        data-icon="fa-umbrella"
          data-background-icon="fa-square"
          data-fade-duration="0"
          data-device="Unwetter"
          data-get="WarnUWZLevel"
          data-states='["0","1","2","3","4",".*"]'
          data-icons='["fa-bolt","fa-bolt","fa-bolt","fa-bolt","fa-bolt fa-blink","fa-bolt fa-blink"]'
          data-colors='["white","white","white","white","white","white"]'
          data-background-colors='["green","mint","#ebf600","#f69c00","firebrick,"#620690"]'
          class="menusize warn">
        </div>
        <div class="big robotothin centered narrow">Unwetter</div>
</div>
      </div>
</li>

      <!-- container links -->
    <li data-row="5" data-col="1" data-sizex="23" data-sizey="20" class="">
      <div class="page" id="garten"></div>
      <div class="page" id="licht"></div>
      <div class="page" id=""></div>
      <div class="page" id=""></div>
      <div class="page" id=""></div>
      <div class="page" id=""></div>
      <div class="page" id=""></div>
    </li>


      <!-- Uhr-->
      <li data-row="5" data-col="19" data-sizex="14" data-sizey="12" class="semitransparent">
        <div class="vbox">
          <div class="normal" data-type="clock" data-format="H:i"></div>
          <div class="normal" data-type="clock" data-format="l j. F"></div>
        <div class="hbox">
                <div data-type="symbol" data-device="Wetter" data-get="condition"
                  data-background-icon=""
                  data-icons='["wi wi-day-sunny",
                    "wi wi-day-sunny-overcast",
                    "wi wi-day-cloudy",
                    "wi wi-cloudy",
                    "wi wi-day-fog",
                    "wi wi-day-fog",
                    "wi wi-day-thunderstorm",
                    "wi wi-day-showers",
                    "wi wi-day-hail",
                    "wi wi-day-haze",
                    "wi wi-day-rain",
                    "wi wi-day-sleet",
                    "wi wi-day-sprinkle",
                    "wi wi-day-sprinkle",
                    "wi wi-day-snow",
                    "fa-snowflake-o",
                    "fa-snowflake-o",
                    "wi wi-cloud",
                    "wi wi-day-windy",
                    "fa-question"]'
                  data-states='["Clear",
                    "Partly Cloudy",
                    "Mostly Cloudy",
                    "Overcast",
                    ".*Fog",
                    ".*Mist",
                    ".*Thunderstorm.*",
                    ".*Rain Showers",
                    ".*Hail",
                    ".*Haze",
                    ".*Rain",
                    ".*Sleet",
                    ".*Drizzle",
                    ".*Spray",
                    ".*Snow",
                    ".*Ice.*",
                    ".*Freezing.*",
                    ".*Cloud.*",
                    "Squalls",
                    ".*"]'
                  data-color="white"
                  class="big compressed inline" style="position:relative; top:10px">
                </div>
            <div data-type="label" data-device="LaCrosse_16"
              data-get="temperature" data-unit="%B0C%0A"
              class="bigger left-space" data-limits='[-50,0]' data-fix="0"
              data-colors='["lightblue","white"]'>
            </div>
        </div>
        </div>
      </li>

<!--  container rechts -->
<li data-row="5" data-col="32" data-sizex="23" data-sizey="20" class="shiny">
<div class="page" id="page-hauptseite"></div>
<div class="page" id="page-phone"></div>
<div class="page" id="page-traffic-sabine"></div>
<div class="page" id="page-traffic-holger"></div>
<div class="page" id="page-weather"></div>
<div class="page" id="page-network"></div>
<div class="page" id="page-security"></div>
<div class="page" id="page-network-advanced"></div>
<div class="page" id="page-traffic-holger-history"></div>
<div class="page" id="page-traffic-sabine-history"></div>
<div class="page" id="page-weather-details"></div>
</li>

</div>
</li>
</ul>
</div>
</body>
</html>

Licht
<!DOCTYPE html>
<html>
<head>
   </head>
<body>
<div class="page" id="licht">
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="23" data-sizey="20" class="darktransparent">
<div class="vbox items-center">
<div class="cell-100 left-align top-space-2x left-space">
<div data-type="symbol"
data-background-icon="fa-square" data-off-color="white" class="big inline top-narrow"
data-states='["on","off", "unknown"]'
data-icons='["mi-lightbulb_outline","mi-lightbulb_outline", "mi-border_clear"]'
data-colors='["white","black", "white"]' data-background-colors='["yellow","gray", "yellow"]'>
</div>
<div class="big inline compressed thin" style="position:relative; top:10px">Weitere Lampen</div>
</div>
<div class="hbox items-center">
<div class="vbox">
<!-- Esszimmer Steckdose -->
<div data-type="switch"
data-device="HUEDevice3"
data-set-states='["off","on"]'
data-states='["on","off"]'
data-colors='["white","black"]'
data-background-colors='["yellow","gray"]'
data-icons='["mi-lightbulb_outline","mi-lightbulb_outline"]'
data-background-icon="fa-square"
class="big wider narrow">
</div>
<div class="normal top-narrow-2x">Esszimmer</div>
</div>
<div class="vbox">
<!-- Wohnzimmer Steckdose -->
<div data-type="switch" class="big"
data-device="HUEDevice6"
data-set-states='["off","on"]'
data-states='["on","off"]'
data-colors='["white","black"]'
data-background-colors='["yellow","gray"]'
data-icons='["mi-lightbulb_outline","mi-lightbulb_outline"]'
data-background-icon="fa-square">
</div>
<div class="normal">Wohnzimmer</div>
</div>
<div class="vbox">
<!-- Salzlampe Steckdose -->
<div data-type="switch" class="big"
data-device="HUEDevice5"
data-set-states='["off","on"]'
data-states='["on","off"]'
data-colors='["white","black"]'
data-background-colors='["yellow","gray"]'
data-icons='["mi-lightbulb_outline","mi-lightbulb_outline"]'
data-background-icon="fa-square">
</div>
<div class="normal">Salzlampe</div>
</div>
</div>
<div class="hbox items-center">
<div class="vbox">
<!-- Ole Steckdose -->
<div data-type="switch" class="big"
data-device="Ole_Steckdose"
data-set-states='["off","on"]'
data-states='["on","off"]'
data-colors='["white","black"]'
data-background-colors='["yellow","gray"]'
data-icons='["mi-lightbulb_outline","mi-lightbulb_outline"]'
data-background-icon="fa-square">
</div>
<div class="normal">Ole Licht</div>
</div>
<div class="vbox">
<!-- Til Steckdose -->
<div data-type="switch" class="big"
data-device="Til_Steckdose"
data-set-states='["off","on"]'
data-states='["on","off"]'
data-colors='["white","black"]'
data-background-colors='["yellow","gray"]'
data-icons='["mi-lightbulb_outline","mi-lightbulb_outline"]'
data-background-icon="fa-square">
</div>
<div class="normal">Til Licht</div>
</div>
<div class="vbox">
<!-- Garten Licht -->
<div data-type="switch" class="big"
data-device="HUEDevice4"
data-set-states='["off","on"]'
data-states='["on","off"]'
data-colors='["white","black"]'
data-background-colors='["yellow","gray"]'
data-icons='["mi-lightbulb_outline","mi-lightbulb_outline"]'
data-background-icon="fa-square">
</div>
<div class="normal">Pfeiler Licht</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>

Offline Wasserwerk33

  • Full Member
  • ***
  • Beiträge: 496
Antw:Text zu Bild verschoben und bekomme es einfach nicht hin.
« Antwort #1 am: 29 Juli 2021, 12:00:29 »
Habe es hinbekommen. Mit viel probieren.
es fehlte mir ein vbox items-center.

 

decade-submarginal