Menü Spalte Höhenunterschied zur Seite

hanswerner1 · 30 Januar 2019, 11:42:53

Hallo,
ich habe wie im Wiki FTUI Widget Pagetab eine Menü Spalte eingebaut. Die Menü Spalte wird aber etwas tiefer gesetzt als der Rest der Seite.
Wo habe ich hier noch einen Fehler?

Menu.html

Code Auswählen


<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="sheet">
	<div class="raw">
	   <header><font size="+1">Menü</font></header>
                <div class="top-space">
                 <div data-type="pagetab" data-url="haupt.html" data-icon="fa-home" data-return-time="120"></div>
                 <div data-type="label" class="">Status</div>
                </div>
                <div class="">
                 <div data-type="pagetab" data-url="Heizung2.html" data-icon="fa-thermometer-full"></div>
                 <div data-type="label" class="">Heizung</div>                   
                </div>
                <div class="">
                 <div data-type="pagetab" data-url="Rollos2.html" data-icon="fa-bars"></div>
                 <div data-type="label" class="">Rollos</div>                 
                </div>  
                <div class="">
                 <div data-type="pagetab" data-url="Batterien2.html" data-icon="fa-battery-quarter"></div>
                 <div data-type="label" class="">Batterien</div>                 
                </div>  
                <div class="">
                 <div data-type="pagetab" data-url="Fritzbox2.html" data-icon="fa-phone"></div>
                 <div data-type="label" class="">Fritz Box</div>                 
                </div> 
                <div class="">
                 <div data-type="pagetab" data-url="Runeaudio2.html" data-icon="fa-music"></div>
                 <div data-type="label" class="">Rune Audio</div>                 
                </div>  
                <div class="">
                 <div data-type="pagetab" data-url="vaillant2.html" data-icon="fa-fire"></div>
                 <div data-type="label" class="">Vaillant</div>                 
                </div>  
                <div class="">
                <div data-type="push" data-device="Bring" data-set-on="on" data-icon="fa-shopping-cart"
                      data-on-color="#2A2A2A" data-off-background-color="#2A2A2A" ></div>
                 <div data-type="label" class="">Eink.Liste</div>     
                </div>                         
                <div class="">
                 <div data-type="pagetab" data-url="Test.html" data-icon=""></div>
                 <div data-type="label" class=""></div>                 
                </div>  
                <div class="">
                 <div data-type="pagetab" data-url="Test.html" data-icon=""></div>
                 <div data-type="label" class=""></div>                 
                </div> 
                <div class="">
                 <div data-type="pagetab" data-url="Test.html" data-icon=""></div>
                 <div data-type="label" class=""></div>                 
                </div> 
                <div class="top-space-2x">
                <div data-type="clock" data-format="H:i" class="big"></div>
                <div data-type="clock" data-format="d-m-Y" class="small cell thin narrow"></div>
                </div> 
</div>
</body>
</html>

index.html

Code Auswählen


<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="75">
    <meta name="widget_base_height" content="70">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="1">
	<meta name="toast" content="2">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 15sec -->
    <meta name="debug" content="0"> <!-- verbose level 1-6 = output to console;0 = not output -->
    <meta name="longpoll_filter" content=".*">
    <meta name="longpoll_type" content="websocket">
    <meta name="longpoll_maxage" content="240">
    <meta name="shortpoll_interval" content="30">
   
    <link rel="stylesheet" href="lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="lib/font-awesome.min.css" />
    <link rel="stylesheet" href="lib/jquery.toast.min.css" />
    <link rel="stylesheet" href="lib/openautomation.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

    <script src="../pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>


    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="../pgm2/cordova-2.3.0.js" defer></script>
    <script src="../pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->


    <title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="gridster">
	<ul>
		<li data-row="1" data-col="1" data-sizex="1" data-sizey="10" data-template="menu.html"></li>
		<li data-row="1" data-col="2" data-sizex="14" data-sizey="10"></li>
	</ul>
</div>
</body>
</html>

Haupt.html

Code Auswählen


<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div class="gridster">
<ul>

   <!-- Menue  -->

<li data-row="1" data-col="1" data-sizex="1" data-sizey="10" data-template="menu.html"></li>
                
   <!-- Home Status  -->

<li data-row="1" data-col="2" data-sizex="3" data-sizey="3" class="top-narrow">
   <header><font size="+1">HOME STATUS</font></header>
 
        
    <div data-type="homestatus" data-device='Anwesenheit_Manuel'
         data-get-on='["Auto","Anwesend","Urlaub","Abwesend"]'
         data-alias='["Auto","Anw.","Urlaub","Abw."]'
         data-icons='["fa-home","fa-users","fa-suitcase","fa-car"]'
   </div>   
 
   
  </li>

   <!-- Anwesend Status  -->

<li data-row="1" data-col="5" data-sizex="1" data-sizey="3" class="top-narrow">
   <header><font size="+1">Anw.</font></header>
 
                <div class="top-space">        
                <div data-type="symbol" 
                     data-states='["present","absent"]' 
                     data-colors='["green","#505050"]' 
                     data-device="Katja_Anwesend" 
                     data-icons='["fa-female","fa-female"]' 
                     class="large"></div>
                     "
                     "
                     "
                     usw.

FHEM Forum

Menü Spalte Höhenunterschied zur Seite

hanswerner1