Text zu Bild verschoben und bekomme es einfach nicht hin.

Begonnen von Wasserwerk33, 29 Juli 2021, 11:18:41

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

Wasserwerk33

29 Juli 2021, 11:18:41
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

Code Auswählen
<!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
Code Auswählen
<!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>

Wasserwerk33

#1
29 Juli 2021, 12:00:29
Habe es hinbekommen. Mit viel probieren.
es fehlte mir ein vbox items-center.
Drucken
Nach oben Seiten1
Benutzer-Aktionen