Formatierungsprobleme mit der 2.6

moonsorrox · 14 Februar 2017, 15:34:49

also ich habe ja auf die 2.6 umgestellt und bekomme nun so einige Sachen nicht mehr gerade gerichtet.

Ich habe eine Temperaturanzeige auf jeder Seite die nun ein klein wenig verschoben ist, ich habe schon alles mögliche probiert und so sieht es bisher aus.

Code Auswählen

<header>Wetter - Temperaturen</header>

<div class="sheet">
<!-- ============= Row/Spalte 1 =========== -->	
	<div class="row">
        <div class="col">
			<div class="row">
                <div class="col-1-3">
					<div class="cell large" data-type="label">Heute</div>
					<div class="center" style="font-size:180%" data-type="weather"	data-device="MeinWetter" data-get="condition"></div>
					<div class="cell large" data-type="label" data-device="MeinWetter" data-get="condition"></div>
                </div>
				
 <!-- ============= Row/Spalte 2 =========== -->
				<div class="col-1-3">
					<div class="cell big center"
						data-type="label"
						data-device="Temperatur_Norden"
						data-get="temperature"
						data-limits="[-50,0,10,25,30,40]"
						data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
						data-unit=" %B0C%0A">
					</div>
					<div class="cell large center"
						data-type="label"
						data-device="Temperatur_Norden"
						data-get="humidity"
						data-limits="[0,40,60]"
						data-colors='["#9999ff","#aa6900","#ff6900"]'
						data-unit=" %">
					</div>
					<!--div class="cell larger center" style="color:#00FA9A" data-type="label" data-device="myTwilight" data-get="sr_civil"></div-->
					<div class="narrow medium" data-type="label">Norden - Eingang</div>
				</div>
				
<!-- ============= Row/Spalte 3 =========== -->	
				<div class="col-1-3">
					<div class="cell big center"
						data-type="label"
						data-device="Temperatur_Terrasse"
						data-get="temperature"
						data-limits="[-50,0,10,25,30,40]"
						data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
						data-unit=" %B0C%0A">
					</div>
					<div class="cell large center"
						data-type="label"
						data-device="Temperatur_Terrasse"
						data-get="humidity"
						data-limits="[0,40,60]"
						data-colors='["#9999ff","#aa6900","#ff6900"]'
						data-unit=" %">
					</div>
					<div class="narrow medium" data-type="label">Süden - Terrasse</div>
				</div>
			</div>
		</div>
	</div>
</div>

vorher war alles schön in der Reihe, obere, mittlere, untere Reihe jetzt leider etwas verschoben. Das ging auch trotz unterschiedlicher Größen der Schrift. Jetzt habe ich es so halbwegs angeglichen, aber es sah mal besser aus.

Kann ich das noch besser hinbekommen..?

Das zweite Problem ich habe mir die Menüleiste nach unten gelegt.
Was ich nicht hinbekomme, dass alle den gleichen Abstand haben, es kann auch links un drechts ein größerer Abstand sein Hautsache in der mitte sind sie alle.

Code Auswählen

<html>
<body>
    <!--header>Menü</header-->
<div class="sheet">
	<div class="row">
		<div class="cell top-align" id="content-sub1">
			<div class=""
				data-type="pagetab" 
				data-url="sub1.html" 
				data-background-icon="fa-square-o" data-off-background-color="#4169e1" data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C"
				data-icon="fa-home">
			</div>
			<div data-type="label" class="medium">HOME</div>
		</div>
		
		<div class="cell top-align" id="content-sub2"> 
			<div class=""
				data-type="pagetab" 
				data-url="sub2.html" 
				data-background-icon="fa-square-o" data-off-background-color="#4169e1" data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C"
				data-icon="oa-status_automatic">
			</div>
			<div data-type="label" class="medium">AUTOMATION</div>
		</div>
		
		<div class="cell top-align" id="content-sub3">
			<div class="" 
				data-type="pagetab" 
				data-url="sub3.html" 
				data-background-icon="fa-square-o" data-off-background-color="#4169e1" data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C"
				data-icon="oa-scene_livingroom">
			</div>
			<div data-type="label" class="medium">WOHNEN</div>
		</div>
		
		<div class="cell top-align" id="content-sub4">
			<div class="" 
				data-type="pagetab" 
				data-url="sub4.html" 
				data-background-icon="fa-square-o" data-off-background-color="#4169e1" data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C"
				data-icon="fa-bed">
			</div>
			<div data-type="label" class="medium">SCHALFEN</div>
		</div>
		
		<div class="cell top-align" id="content-sub5">
			<div class=""
				data-type="pagetab" 
				data-url="sub5.html" 
				data-background-icon="fa-square-o" data-off-background-color="#4169e1" data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C"
				data-icon="oa-light_outdoor">
			</div>
			<div data-type="label" class="medium">AUSSEN</div>
		</div>
		
		<div class="cell top-align" id="content-system">
			<div class=""
				data-type="pagetab" 
				data-url="#content_system.html" 
				data-background-icon="fa-square-o" data-off-background-color="#4169e1" data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C"
				data-icon="fa-server">
			</div>
			<div data-type="label" class="medium">SYSTEM</div>
		</div>
		
		<div class="cell top-align" id="content-information">
			<div class=""
				data-type="pagetab" 
				data-url="#content_information.html" 
				data-background-icon="fa-square-o" data-off-background-color="#4169e1" data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C"
				data-icon="oa-edit_paste" class=""></div>
			<div data-type="label" class="medium">INFORMATION</div>
		</div>
		
		<div class="cell top-align" id="content-kalender">
			<div class=""
				data-type="pagetab" 
				data-url="#content_kalender.html" 
				data-background-icon="fa-square-o" data-off-background-color="#4169e1" data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C"
				data-icon="oa-time_calendar">
			</div>
			<div data-type="label" class="medium">KALENDER</div>
		</div>
		
		<div class="cell top-align" id="content-wetter">
			<div class=""
				data-type="pagetab" 
				data-url="#content_wetter.html" 
				data-background-icon="fa-square-o" data-off-background-color="#4169e1" data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C"
				data-icon="oa-weather_sunrise">
			</div>
			<div data-type="label" class="medium">WETTER</div>
		</div>
		
	
	</div>	
</div>

</body>
</html>

tomster · 14 Februar 2017, 17:35:35

Ich würde die Menüleiste mit sheet->row->col und festen col-Breiten arbeiten. So in etwa:

Code Auswählen


<data class="sheet">
<data class="row top-align">
        <div class="col-10 center-align">
        <div data-type="pagetab" data-url="sub1.html" data-background-icon="fa-square-o" data-off-background-color="#4169e1"
        data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C" data-icon="fa-home"></div>
        <div data-type="label" class="medium">HOME</div>
</div>
        <div class="col-10 center-align">
        <div data-type="pagetab" data-url="sub2.html" data-background-icon="fa-square-o" data-off-background-color="#4169e1"
        data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C" data-icon="oa-status_automatic"></div>
        <div data-type="label" class="medium">AUTOMATION</div>
</div>
        <div class="col-10 center-align">
        <div data-type="pagetab" data-url="sub3.html" data-background-icon="fa-square-o" data-off-background-color="#4169e1"
        data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C" data-icon="oa-scene_livingroom"></div>
        <div data-type="label" class="medium">WOHNEN</div>
</div>
        <div class="col-10 center-align">
        <div data-type="pagetab" data-url="sub4.html" data-background-icon="fa-square-o" data-off-background-color="#4169e1"
        data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C" data-icon="fa-bed"></div>
        <div data-type="label" class="medium">SCHLAFEN</div>
</div>
        <div class="col-10 center-align">
        <div data-type="pagetab" data-url="sub5.html" data-background-icon="fa-square-o" data-off-background-color="#4169e1"
        data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C" data-icon="oa-light_outdoor"></div>
        <div data-type="label" class="medium">AUSSEN</div>
</div>
        <div class="col-10 center-align">
        <div data-type="pagetab" data-url="#content_system.html" data-background-icon="fa-square-o" data-off-background-color="#4169e1"
        data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C" data-icon="fa-server"></div>
        <div data-type="label" class="medium">SYSTEM</div>
</div>
<div class="col-10 center-align">
        <div data-type="pagetab" data-url="#content_information.html" data-background-icon="fa-square-o" data-off-background-color="#4169e1"
        data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C" data-icon="oa-edit_paste" class=""></div>
        <div data-type="label" class="medium">INFORMATION</div>
</div>
        <div class="col-10 center-align">
        <div data-type="pagetab" data-url="#content_kalender.html" data-background-icon="fa-square-o" data-off-background-color="#4169e1"
        data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C" data-icon="oa-time_calendar"></div>
        <div data-type="label" class="medium">KALENDER</div>
</div>
        <div class="col-10 center-align">
        <div data-type="pagetab" data-url="#content_wetter.html" data-background-icon="fa-square-o" data-off-background-color="#4169e1"
        data-off-color="#C0C0C0" data-on-background-color="#DC143C" data-on-color="#DC143C" data-icon="oa-weather_sunrise"></div>
        <div data-type="label" class="medium">WETTER</div>
</div>
</div>
</div>

Den Schalfen-Typo hab ich auch bereinigt

Ooops, hab gar nicht geschaut, ob es die Klasse col-10 überhaupt gibt. Falls nicht, einfach ein

Code Auswählen


.col-10 {
width: 10%;
}

in die *-user.css

moonsorrox · 14 Februar 2017, 17:52:49

OK ich werde das mal testen...!
col-10 gibs nicht nur col-1-8

tomster · 14 Februar 2017, 17:56:36

Hab grad gesehen, dass ich die id-Tags aus Deinem Beispiel unterschlagen habe. Aber die pfriemelst Du schon wieder rein, gell?!

moonsorrox · 14 Februar 2017, 23:37:30

ja kein Problem, die waren ohnehin noch nicht aktiv...!

Ist das ganz oben richtig..?

Code Auswählen

<data class="sheet">
<data class="row top-align">

sollte wohl div sein

moonsorrox · 15 Februar 2017, 03:26:29

@setstate

ich habe mir jetzt mal versucht die neuen Formatierungstechniken zu verinnerlichen..!
Aber es gelingt mir nicht...

Folgendes habe ich mal probiert nach dem Schema "sheet > row > cell"-Layout
Da ich gern wie in meinem obigen Temperaturfenster zu sehen etwas aufbauen will.

Aber sobald ich auch nur in einer Zeile das Icon etwas größer mache verschiebt es das gesamte Fenster nach unten.
ich habe probiert mit den 33% zu arbeiten wie es im Github angegeben ist, dann sollte er doch alle Fenster gleich groß machen egal wie groß der Inhalt ist, oder täusche ich mich da. Denn noch ist ja Platz und die Symbole sind noch nicht am Rand un dsicher ist das mit Text genau das selbe.

Ich möchte eben die Temperatur etwas größer darstellen und das Icon dazu auch, aber es verschiebt das gesamte Teil.
Hier mal der Code und ein Screenshot bei dem ich die Reihen eingefärbt habe um die Dinge zu sehen die passieren.

hier ist nur ein Icon in "large" (screenshot 1)

Code Auswählen

<!-- "sheet > row > cell"-Layout -->
<div class="sheet">
        <div class="row" style="background-color:blue">
            <div class="cell-1-3 large" data-type="symbol" data-device="dummy1"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy2"></div>
			<div class="cell-1-3 medium" data-type="symbol" data-device="dummy3"></div>
        </div>
        <div class="row" style="background-color:red">
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy4"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy4"></div>
			<div class="cell-1-3 medium" data-type="symbol" data-device="dummy6"></div>
        </div>
		<div class="row" style="background-color:yellow">
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy7"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy8"></div>
			<div class="cell-1-3 medium" data-type="symbol" data-device="dummy9"></div>
        </div>
 </div>

hier alle in "medium" trotzdem reicht der Platz nicht, ich habe wie aus dem Github die cell-1-3 (33%) Variante genommen
eigentlich ist doch noch genug Platz so das er die row angleichen könnte (Screenshot 2)

Code Auswählen

<div class="sheet">
        <div class="row" style="background-color:blue">
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy1"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy2"></div>
			<div class="cell-1-3 medium" data-type="symbol" data-device="dummy3"></div>
        </div>
        <div class="row" style="background-color:red">
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy4"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy4"></div>
			<div class="cell-1-3 medium" data-type="symbol" data-device="dummy6"></div>
        </div>
		<div class="row" style="background-color:yellow">
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy7"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy8"></div>
			<div class="cell-1-3 medium" data-type="symbol" data-device="dummy9"></div>
        </div>
 </div>

erst wenn alle Icons ohne Größenangabe sind passt das Layout in mein Fenster.

Ich habe aber gedacht das ich mit dem cell-1-3 33% für alle Felder habe und somit eben keine 100% und alles wird komplett angezeigt und auf die Felder gleichmäßig aufgeteilt.
Habe ich jetzt einen Denkfehler oder warum bekomme ich das nicht hin..?

setstate · 15 Februar 2017, 06:59:20

Die FARBEN !!!! NEIN!!!! Ich weiß, nur Test ...

Leider klappt das bei mir. Nimm mal nur die Standard CSS. Ist es da auch verschoben? Wie sieht der Rest bei dir aus? Hast du Gradster li? Wie sehen die Gridster-Header aus?

Code Auswählen


<li data-row="1" data-col="3" data-sizey="3" data-sizex="3" style=" border: solid 4px green">
    <header>STATE</header>
    <!-- "sheet > row > cell"-Layout -->
    <div class="sheet">
        <div class="row bg-blue">
            <div class="cell-1-3 large" data-type="symbol" data-device="dummy1"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy2"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy3"></div>
        </div>
        <div class="row bg-red">
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy4"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy4"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy6"></div>
        </div>
        <div class="row bg-yellow">
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy7"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy8"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy9"></div>
        </div>
    </div>
</li>

moonsorrox · 15 Februar 2017, 13:06:38

ich habe nun mal meine css raus genommen und dein Code eingegeben, dabei habe ich nur in jeder row ein large Icon drin, aber es ist wieder nach unten verschoben..!
~~Muss ich evtl. ein Update machen, das habe ich vor ca. 2 Tagen gemacht~~

Update gemacht, aber keine Änderung wird immer verschoben nach unten, im Firefox schon und auf dem Tablet ist es noch schlimmer da sieht man die gelbe Reihe gar nicht mehr.

Wo kann ich noch suchen..?

Code Auswählen

<li data-row="1" data-col="3" data-sizey="2" data-sizex="3" style=" border: solid 4px green">
    <header>STATE</header>
    <div class="sheet">
        <div class="row bg-blue">
            <div class="cell-1-3 large" data-type="symbol" data-device="dummy1"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy2"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy3"></div>
        </div>
        <div class="row bg-red">
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy4"></div>
            <div class="cell-1-3 large" data-type="symbol" data-device="dummy4"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy6"></div>
        </div>
        <div class="row bg-yellow">
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy7"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy8"></div>
            <div class="cell-1-3 large" data-type="symbol" data-device="dummy9"></div>
        </div>
    </div>
</li>

moonsorrox · 17 Februar 2017, 13:30:04

@setstate
was kann ich noch machen oder wo sollte ich noch suchen, wenn es selbst mit der minimal Konfiguration nicht geht.
Ich suche schon wie doof, aber ich finde keine Stelle wo es dran liegen könnte.

Ich arbeite grad mit Tabellen, mal schauen ob ich da mit klar kommen...! Was komisch ist, der Firefox zeigt es auch immer noch etwas anders an als das Tablet

tomster · 17 Februar 2017, 13:59:18

Wie sieht denn diese Datei bei Dir aus:

Code Auswählen


<!DOCTYPE html>
<html>

<head>
    <meta name="widget_base_width" content="100">
    <meta name="widget_base_height" content="40">
    <script src="js/fhem-tablet-ui.js" defer></script>
    <title>FHEM-Tablet-UI</title>
</head>
<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizey="2" data-sizex="3">
                <header>EXAMPLE1</header>
        <div class="sheet">
        <div class="row" style="background-color:blue">
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy1"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy2"></div>
                        <div class="cell-1-3 medium" data-type="symbol" data-device="dummy3"></div>
        </div>
        <div class="row" style="background-color:red">
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy4"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy4"></div>
                        <div class="cell-1-3 medium" data-type="symbol" data-device="dummy6"></div>
        </div>
                <div class="row" style="background-color:yellow">
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy7"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy8"></div>
                        <div class="cell-1-3 medium" data-type="symbol" data-device="dummy9"></div>
        </div>
 </div>
            </li>
        </ul>
    </div>
</body>
</html>

@setstate:
Ich hab nur der Einfachheit halber den Text im Header entfernt. Wenn Dich das stört, gib Bescheid, dann pack ich das Copyright gleich wieder rein.

moonsorrox · 17 Februar 2017, 14:30:43

das ist ja die index.html, diese sieht bei mir so aus, ich habe oben die row und col ausdokumentiert...!

Code Auswählen

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	
	<!-- Vorgabe der Anzahl der Spalten und Zeilen -> automatisch auf Bildschirm verteilt -->
	<!--meta name="gridster_cols" content="14">
	<meta name="gridster_rows" content="10">
	
	<!-- Vorgabe der Basis Spalten/Zeilengrösse -> Grid hat eine feste Größe unabhängig der Bildschirmgröße -->
    <!--meta name="widget_base_width" content="74">
    <meta name="widget_base_height" content="71"-->
	
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="Cache-Control" content="no-store" />
    <meta name="longpoll_type" content="websocket">
    <meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
    <!--meta name='gridster_disable' content='1'>
    <meta name='gridster_resize' content='0'>
	<!-- Wo FHEM erreicht werden kann, setzt man hiermit -->
	<!--meta name='fhemweb_url' content='http://fhemserver.local:8083/fhem/'-->
    
	<link rel="icon" href="favicon.ico" type="image/x-icon" />
    <!--link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" /-->
	
	<!-- nur für den Kalender  -->
	<!--script type="text/javascript" src="/fhem/tablet/ical/ical.js" defer></script>
	<script type="text/javascript" src="/fhem/tablet/ical/ical_events.js" defer></script>
	<script type="text/javascript" src="/fhem/tablet/ical/ical_fullcalendar.js" defer></script-->
   	
    <!--script src="/fhem/pgm2/jquery.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
    <script src="/fhem/tablet/js/fhem-tablet-ui.min.js" defer></script-->
	<script src="js/fhem-tablet-ui.js" defer></script>
	
    <!-- meine Style - Datei -->
    <link rel="stylesheet" href="css/fhem-tablet-rene-ui.css" />
	<!--link rel="stylesheet" href="customfonts/icon/style.css"-->
	
    <title>Smart Home</title>
</head>
<body>
     <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="9" data-template="menu.html"></li>
        </ul>
    </div>
</body>
</html>

und diese hier ist die besagte Datei unverändert von setstate genutzt, da geht es eben nur um die Zeilen und Spalten, wo später meine Dinge drin stehen.
Aber eben diese schiebt alles nach unten, mit der minimal Konfiguration, also kein css von mir drin nur mit der tablet-ui.css

Code Auswählen

    <header>STATE</header>
    <div class="sheet">
        <div class="row bg-blue">
            <div class="cell-1-3 large" data-type="symbol" data-device="dummy1"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy2"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy3"></div>
        </div>
        <div class="row bg-red">
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy4"></div>
            <div class="cell-1-3 large" data-type="symbol" data-device="dummy4"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy6"></div>
        </div>
        <div class="row bg-yellow">
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy7"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy8"></div>
            <div class="cell-1-3 medium" data-type="symbol" data-device="dummy9"></div>
        </div>
    </div>

tomster · 17 Februar 2017, 15:10:07

Ja, sieht so ähnlich aus...
Bitte leg aber trotzdem Mal eine test.html mit genau meinem Inhalt an.