Hallo Forum,
ich habe meine FTUI-Installation mit einem flexbox-Layout ausgestattet.
Dabei soll zwischen feststehenden Kopf- bzw Fußbereichen im Mittelteil ein scrollbarer Inhalt dargestellt werden. In einer Testumgebung funktioniert das mit "eigener" CSS problemlos (s. Screenshots 1078 und 1079).
Wenn ich aber FTUI-Widgets verwenden will, benötige ich auch die fhem-tablet-ui.css. Dann funktioniert aber das Scrolling im Mittelteil nicht mehr, und der Fußbereich ist nicht mehr sichtbar. (Screenshots 1080 und 1081)
Natürlich hat das nichts mit FHEM bzw FTUI zu tun. Trotzdem wäre ich sehr dankbar, wenn jemand mit besseren CSS-Kenntnissen mir einen Tipp geben könnte, woran das liegen kann. Ich bin seit zwei Wochen keinen Schritt weiter gekommen. :'(
Vielen Dank vorab!!
Hier noch der Code
my_fhem-tablet-ui.css
html,
body,
.flexpage {
height: 100%;
color: #222222;
}
body {
overflow: hidden;
}
header {
font-size: medium;
font-weight: normal;
font-variant: small-caps;
color: white;
background-color: #555555;
padding: 0.15em 0.3em 0.15em 0.3em;
}
.headline {
font-size: medium;
font-weight: normal;
font-variant: small-caps;
color: white;
background-color: #000000;
margin-bottom: 4px;
}
.headline.darkgray {
background-color: #333333;
}
.headline.mediumgray {
background-color: #666666;
}
.headline.lightgray {
background-color: #999999;
}
.flexpage {
display: flex;
flex-direction: column;
}
.flexpage-header {
flex: 0 0 auto;
}
.flexpage-title {
flex: 0 0 auto;
}
.flexpage-content {
flex: 1 1 auto;
position: relative;
overflow-y: auto;
margin-bottom: 4px;
}
.flexpage-footer {
flex: 0 0 auto;
margin-bottom: 15px;
}
.vertbox {
display: flex;
flex-direction: column;
justify-content: flex-start;
flex: 0 1 auto;
}
.horizbox {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
flex:0 1 auto;
}
.horizbox.top-left,
.vertbox.top-left {
justify-content: flex-start;
align-items: flex-start;
}
.horizbox.top-center,
.vertbox.middle-left {
justify-content: center;
align-items: flex-start;
}
.horizbox.top-right {
justify-content: flex-start;
align-items: flex-end;
}
.horizbox.middle-left,
.vertbox.top-center {
justify-content: flex-start;
align-items: center;
}
test-index.html
<html>
<head>
<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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->
<link rel="stylesheet" href="lib/font-awesome.min.css" />
<link rel="stylesheet" href="lib/jquery.toast.min.css" />
<link rel="stylesheet" href="lib/material-icons.min.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="myCSS/my_fhem-tablet-ui.css"/>
<script src="../pgm2/jquery.min.js"></script>
<script src="lib/jquery.toast.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
</head>
<body>
<div class="flexpage">
<div class="flexpage-header headline">
<div class="horizbox middle-left">
<div data-type="pagebutton"
data-background-icon = "fa-circle-thin"
data-icon = "fa-bars"
data-color="white"
data-on-color="white"
data-off-color="white"
data-url="#myFlexHTML/test_subpage.html"
data-load="#test_subpage"
class="default">
</div>
<div class="left-space-2x">
feststehender Bereich
</div>
</div>
</div>
<!-- Reservierter Bereich/Position für subpage -->
<div class="page" id="test_subpage"></div>
<div class="flexpage-footer headline">
<div class="vertbox">
<div>class="flexpage-footer"</div>
<div>(Statischer Bereich, nicht scrollbar)</div>
</div>
</div>
</div>
</body>
</html>
test_subpage.html (wird durch test-index.html geladen)
<html>
<body>
<div class="page" id="test_subpage">
<div class="flexpage-title headline mediumgray">
<header>
<div class="horizbox">
<div>Feststehender Subpage-Titel</div>
</div>
</header>
</div> <!-- Ende feststehender Unterseiten-Titel -->
<div class="flexpage-content white"> <!-- scrollbarer Inhalt -->
<div class="vertbox">
scrollbarer Inhaltsbereich --- class = "flexpage-content"
</div>
</div>
</div>
</body>
</html>
Du kannst nur in den Browser-Entwicklertools das CSS Fenster nutzen.
Dein HTML Element markieren und dann siehst du da, welche CSS Klassen angezogen werden und aus welchem File die kommen. Man kann dann auch jede beliebige Eigenschaft deaktivieren / aktivieren und die Werte adhoc ändern. Damit sieht man sofort die Unterschiede.
Hi Marco,
in den letzten Tagen habe ich nichts anderes versucht, als den Fehler mit den Browsertools zu finden.
Leider bin ich bis jetzt trotzdem nicht dahinter gekommen, woran es liegt, dass der Mittelteil nicht scrollbar ist.
Hatte gehofft, eine Info zu erhalten, die einen Aha-Achso-Effekt auslöst.
Ich kenne das. Es hat mich auch Tage gekostet, ehe ich ein vernünftiges Beispiel fertig hatte.
https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/mobil/index_nav_footer.html
Man findet auch viele Lösungsmöglichkeiten. Alte, die krampfhaft versuchen, auch auf dem IE < 10 lauffähig zu sein und aktuelle, wo man schauen muss, ob der benutzte Browser das überhaupt kann. Mein Tablet kann zum Beispiel kein Flexbox (aktuelle Spec)
Ich bin auch kein Experte/Profi, der auf einen Blick das Problem erkennt. Meist liegt es an einer lumpigen Eigenschaft.
Bitte seht ein, dass ich nicht jedes individuelle Problem lösen kann. Mich kostet sowas meist auch mehrere Stunden.
Wenn ich mich bei solchen Fragen ruhig verhalte, hoffe ich immer, dass andere vielleicht schneller helfen können
Natürlich erwarte ich nicht, dass jemand per Fingerschnipp meine Probleme lösen kann, an denen ich schon eine gefühlte Ewigkeit scheitere.
Aber oft kennen andere schon die richtige Antwort.
Nur diesmal scheinbar nicht. Schade.
Trotzdem danke!! Ich werde selbstverständlich auch selbst weiter forschen und berichten, wenn ich weitergekommen bin.
Ich hab mal ein wenig mit Deinem Layout herumgespielt - das ist echt zickig!
Wenn Du die Eigenschaft body {overflow: hidden;} entfernst, wird die Seite wieder scrollbar.
Zusätzlich benötigst Du folgendes im CSS, um den Header oben zu fixieren:
.flexpage-header{
position: fixed;
height: 64px;
margin-top: 0px;
width: 100%;
z-index: 2;
transition: transform
}
#test_subpage{
display: block;
position: absolute;
height: auto;
margin-top: 64px;
}
.flexpage-title{
position: fixed;
width: 100%;
height: 25px;
}
.flexpage-content{
margin-top: 25px;
}
Ich würde Dir nochmal diesen Beitrag Empfehlen: https://forum.fhem.de/index.php/topic,65855.msg571102.html#msg571102
Im Anhang dieses Beitrags findest Du ein funktionierendes Layout, bei dem Header und Footer fixiert sind.
Den Footer bekommst Du nun bestimmt alleine hin ;)
Wenn man ältere Browser außer acht lässt, ist ein Layout mit fixem Header und Footer eigentlich überraschend einfach.
header {
position: fixed;
top: 0;
}
footer {
position: fixed;
bottom: 0;
}
Beim scrollbaren Hauptinhalt musst du einfach nur an ein padding denken, damit der Inhalt soviel Abstand zum Seitenrand hat, wie Header+Navigation bzw. Footer brauchen.
Beispiel: https://home.jft.at/fixed.html (https://home.jft.at/fixed.html)
Guten Abend, Standarduser.
Zunächst vielen Dank für deine Anteilnahme und deinen Lösungsvorschlag.
Aber die vorgegebene Einschränkung der Höhe (height: 64px) ist hinderlich für den Fall, dass der flexpage-header größer wird als vorgegeben, weil dieser Bereich dynamisch geladen wird. Davon abgesehen bin ich mit deiner Lösung noch nicht so recht weitergekommen.
Ohne deine Änderung bewirkt das Abschalten von body {display: hidden; } tatsächlich, das wieder gescrollt werden kann - allerding rollt dann das gesamte Fenster.
Wenn ich deine Änderungen einbaue, bewirkt das Abschalten von body {display: hidden; } nichts. Aber so oder so rollt der Mittelbereich nach oben in den flexpage-titel hinein (siehe Screenshot 1082).
Interessant und irritierend finde ich, dass die Höhe des flex-content Bereich, also der zu scrollende Mittelbereich, von vornherein viel zu groß berechnet wird (siehe Screenshot 1085).
Das passiert aber nur, wenn test_subpage durch den Pagebutton automatisch geladen wird. Mittlerweile glaube ich, dass dieses (Nach)laden der Subpage <div class="page" id="test_subpage"></div> für die Probleme verantwortlich ist.
In meiner Testumgebung habe ich keine Subpage verwendet. In diesem Fall wird die Mittelbereichshöhe korrekt berechnet und alles wird richtig dargestellt. (siehe Screenshot 1084)
Zitat von: drhirn am 02 Februar 2017, 20:37:50
Beim scrollbaren Hauptinhalt musst du einfach nur an ein padding denken, damit der Inhalt soviel Abstand zum Seitenrand hat, wie Header+Navigation bzw. Footer brauchen.
Hallo drhirn,
Danke für deinen Input, aber ich fürchte, dass es in meinem Fall so leicht nicht geht.
Erstens möchte ich ein Flexbox-Layout, zweitens werden praktisch alle Teile des Layouts dynamisch geladen, so dass die Höhe nicht feststehen.
Davon abgesehen ist es ja nicht so, dass ich ein Layout mit festem Header und Footer noch nicht hinbekommen hätte - auch mit Flexbox (vgl Screenshot im ersten Post zu diesem Thema)
Aber ich glaube, dass - wie kurz zuvor beschrieben - dass das dynamische (Nach)laden der Seiten die Probleme verursacht, die ich bislang noch nicht lösen konnte.
EDIT:
@setstate: Falls du das liest... Könnte es evtl. sein, dass das dynamische Laden der Unterseite, welches vermutlich durch JS erledigt wird, keine "Rücksicht" auf die CSS-Regeln nimmt?
EDIT2: Vergiss die Frage bitte - ist Quatsch. JS hat nichts damit zu tun.
Aber ich bin der Lösung nähergekommen.
Zitat von: DocCyber am 02 Februar 2017, 21:01:12
Aber die vorgegebene Einschränkung der Höhe (height: 64px) ist hinderlich für den Fall, dass der flexpage-header größer wird als vorgegeben, weil dieser Bereich dynamisch geladen wird.
Wenn man das voll dynamisch machen möchte, gebe ich Dir recht, aber:
Ich persönlich finde, dass bestimmte Elemente, wie beispielsweise der Header, die Nutzererfahrung mindern, wenn diese sich ständig ändern. Insofern würde
ich den Header, und je na Verwendung auch den Footer, immer statisch aufbauen und eventuell nur den Inhalt bedarfsgerecht anpassen.
Zitat von: DocCyber am 02 Februar 2017, 21:01:12
Aber so oder so rollt der Mittelbereich nach oben in den flexpage-titel hinein (siehe Screenshot 1082).
Das konnte ich bei meinen Tests nicht feststellen. Getestet habe ich mit einem relativ kleinen Chrome-Fenster auf dem Mac.
Zitat von: DocCyber am 02 Februar 2017, 21:01:12
Interessant und irritierend finde ich, dass die Höhe des flex-content Bereich, also der zu scrollende Mittelbereich, von vornherein viel zu groß berechnet wird (siehe Screenshot 1085).
Mich irritiert dieses Verhalten nicht, denn dadurch, dass der Flexpage-Title fixiert wird, rutscht der Flexpage-Content dahinter. Eventuell müsste hier das CSS noch etwas erweitert werden, ähnlich wie beim Flexpage-Header. Im Prinzip ist es ja das gleiche Verhalten, das hier gewünscht wird.
Noch eine Idee (ungetestet mit Deinem Layout):
Vielleicht kannst Du ja den Flexpage-Title weglassen und stattdessen einen Linkname in den Header einbauen. So ist das auch in dem Layout eingebaut, welches ich verwende. Angezeigt wird der Titel der Seite, die über das Sandwich-Menü geladen wird. Wenn Du Dir das entsprechend zurecht formatierst, könnte das Ergebnis vielleicht Deinem Wunsch sehr Nahe kommen.
<div id="linkname" class="col-3-6 large bold center-align middle"></div>
<!-- Reservierter Bereich/Position für subpage -->
<div class="page" id="test_subpage"></div>
...braucht auf jeden Fall eine Flex-Definition:
<!-- Reservierter Bereich/Position für subpage -->
<div class="page" id="test_subpage" style="flex: 1 1 auto; overflow-y: auto;"></div>
Die dürfte dir irgendwie abhanden gekommen sein.
Zitat von: Standarduser am 03 Februar 2017, 07:51:57
...denn dadurch, dass der Flexpage-Title fixiert wird, rutscht der Flexpage-Content dahinter.
Dieses Argument wäre vielleicht eine Erklärung, wenn das Problem generell aufträte. Aber in meiner "Testumgebung" habe ich dieses Problem bei ansonstem analogen Aufbau nicht! (vgl. meinen ersten Post - screenshots 1078 und 1079).
Ich bin daher sicher, dass es eine Lösung gibt, die ohne jegliche Einschränkungen genau das macht, was ich will.
Nur ... ich habe sie nur noch nicht gefunden. ;)
Zitat von: drhirn am 03 Februar 2017, 11:05:14
...braucht auf jeden Fall eine Flex-Definition
Das stimmt vermutlich ... Durch die vielen Verschachtelungen ist mir das wohl tatsächlich durchgeflutscht.
Gestern Abend habe ich schon in diese Richtung experimentiert und es sieht recht gut aus.
Aber noch nicht ganz so, wie ich es haben will.
Im Detail werde ich jedenfalls deinen Hinweis ausprobieren und berichten. Danke schon mal...
Problem ist dann, dass der Subpage-Titel nicht mehr stehen bleibt. Da habe ich leider noch keine Lösung gefunden. Außer, in dem Fall wirklich mit position: fixed für den Titel zu arbeiten.
Aber vielleicht fällt dir ja was ein.
Zitat von: drhirn am 03 Februar 2017, 11:36:40
Problem ist dann, dass der Subpage-Titel nicht mehr stehen bleibt.
Stimmt, das ist das Problem, auf das ich gestern Abend auch gestoßen bin. ???
Jedenfalls danke für deinen Input. Ich sag Bescheid, wenn ich die Lösung habe. Ich bin sicher, dass es geht!
Ich hänge hier noch einen weiteren Sceenshot dran, der besser illustrieren soll, was ich möchte.
Ich hab's!! :) :)
Zunächst ist es mir ein Bedürfnis zu schreiben, dass meine hier beschriebenen Probleme absolut nichts mit der fhem-tablet-ui.css zu tun haben. Ich war zunächst irrtümlich davon ausgegangen, dass diese CSS die Ursache des Problems sein könnte - daher auch der Titel.
Aber die Arbeit von setstate ist m. E. auch in diesem Fall vorbildlich. Das kann ich gar nicht oft genug betonen!
Hier also der HTML-Code der Hauptseite, einer Unterseite und die zugehörige CSS (wie versprochen). Weiter unten noch die Screenshots.
Danke euch allen für euren Input - vielleicht ist meine Lösung für den einen oder anderen von euch auch hilfreich!
test_index-01.html
<html>
<head>
<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">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->
<link rel="stylesheet" href="lib/font-awesome.min.css" />
<link rel="stylesheet" href="lib/jquery.toast.min.css" />
<link rel="stylesheet" href="lib/material-icons.min.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="myCSS/test-01.css"/>
<script src="../pgm2/jquery.min.js"></script>
<script src="lib/jquery.toast.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
</head>
<body>
<div class="fcontainer">
<div class="fstatic headline lightgray">
<div class="horizbox middle-left white">
<div data-type="pagebutton"
data-background-icon = "fa-circle-thin"
data-icon = "fa-bars"
data-color="white"
data-on-color="white"
data-off-color="white"
data-url="#myFlexHTML/test_subpage-01.html"
data-load="#test_subpage-01"
class="default">
</div>
<div class="left-space">feststehender Bereich ("fstatic")</div>
</div>
</div>
<div class="fcontainer" id="test_subpage-01"></div>
<div class="fstatic headline mediumgray">
<div class="vertbox"><div>feststehender Bereich ("fstatic")</div></div>
</div>
</div>
</body>
</html>
test_subpage-01.html
<html>
<body>
<div class="fcontainer" id="test_subpage-01">
<div class="fstatic headline mediumgray">
<div class="horizbox"><div>Feststehender Subpage-Titel ("fstatic")</div></div>
</div>
<div class="fdynamic">
<div class="vertbox white">
scrollbarer Inhaltsbereich --- "fdynamic" --- scrollbarer Inhaltsbereich ---
</div>
</div>
</div>
</body>
</html>
test-01.css
Wahrscheinlich ist noch hier und da etwas überflüssig, aber es läuft. (Nur auf Firefox 51.0.1 getestet!)
html,
body,
{
height: 100%;
color: #222222;
}
body {
overflow: hidden;
}
.fcontainer {
display: flex;
flex-direction: column;
overflow-y: hidden;
height: 100%;
width: 100%;
}
.fstatic {
flex: 0 0 auto;
}
.fdynamic {
flex: 1 1 auto;
position: relative;
overflow-y: auto;
margin-bottom: 4px;
}
.vertbox {
display: flex;
flex-direction: column;
justify-content: flex-start;
flex: 0 1 auto;
}
.horizbox {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
flex:0 1 auto;
}
.horizbox.top-left,
.vertbox.top-left {
justify-content: flex-start;
align-items: flex-start;
}
.horizbox.top-center,
.vertbox.middle-left {
justify-content: center;
align-items: flex-start;
}
.horizbox.top-right {
justify-content: flex-start;
align-items: flex-end;
}
.horizbox.middle-left,
.vertbox.top-center {
justify-content: flex-start;
align-items: center;
}
.headline {
font-size: medium;
font-weight: normal;
font-variant: small-caps;
color: white;
background-color: #000000;
margin-bottom: 4px;
}
.headline.darkgray {
background-color: #333333;
}
.headline.mediumgray {
background-color: #666666;
}
.headline.lightgray {
background-color: #999999;
}
Sehr gut, freut mich zu hören!
Hallo,
bei mir steht ein Neuaufbau meines UI an und fand diesen Ansatz hier für mich äußerst interessant.
Ich habe versucht, diese Mechanik hier mit festem Header Footer testweise nachzubauen, aber scheinbar ohne Erfolg.
Könnt ihr mal drüber schauen ob ihr seht woran es bei mir scheitert. Im Anhang ist ein Screenshot, der Inhalt des Anzeigebereich bleibt leer und ändert sich auch nicht beim Klicken auf die zwei Menueinträge.
Ich habe es ebenfalls mit 3 Dateien probiert:
1. index.html:
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
* Version: 1.3.5
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 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 tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' 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="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->
<link rel="stylesheet" href="lib/font-awesome.min.css" />
<link rel="stylesheet" href="lib/jquery.toast.min.css" />
<link rel="stylesheet" href="lib/material-icons.min.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="myCSS/test-01.css"/>
<script src="../pgm2/jquery.min.js"></script>
<script src="lib/jquery.toast.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
</head>
<body class="vbox" style="flex-wrap: initial; height: 100%;">
<div class="hbox" style="height: auto;"><div data-template="menu.html"></div></div>
<div class="bg-red" style="flex: 1 1 auto; overflow-y: auto;">
<div class="fcontainer" id="test_subpage_01"></div>
<div class="fcontainer" id="test_subpage_02"></div>
</div>
<div class="hbox" style="height: auto;"><div class="bg-red" data-type="symbol"></div><div class="bg-green"data-type="symbol"></div></div>
</body>
</html>
2.Einer Datei für das "menu.thml" im Header:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="hbox bg-ligthblue">
<div class="card">
<header>Box 01</header>
<div data-type="pagetab" data-url="test_subpage_01.html" data-icon="fa-home" data-text="home" class="cell">
</div>
</div>
<div class="card">
<header>Box 02</header>
<div data-type="pagetab" data-url="test_subpage_02.html" data-icon="fa-home" data-text="home" class="cell">
</div>
</div>
</div>
</body>
</html>
und zu Guter letzt 2 Beispiel-Inhaltseiten für den (angedachten) dynamischen Inhalt "test_subpage_01.html" und "test_subpage_02.html"
<html>
<body>
<div class="fcontainer" id="test_subpage_01">
<div class="fstatic headline mediumgray">
<div class="horizbox green"><div>Feststehender Subpage-Titel ("fstatic")</div></div>
</div>
<div class="fdynamic">
<div class="vertbox red">
scrollbarer Inhaltsbereich --- "fdynamic" --- scrollbarer Inhaltsbereich ---
<div class="hbox bg-ligthblue">
<div class="card"><header>Box 01</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 02</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 03</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 04</header><div data-type="symbol"></div></div>
</div>
<div class="hbox bg-lightgray">
<div class="card"><header>Box 05</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 06</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 07</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 08</header><div data-type="symbol"></div></div>
</div>
<div class="hbox bg-mint">
<div class="card"><header>Box 09</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 10</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 11</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 12</header><div data-type="symbol"></div></div>
</div>
<div class="hbox bg-orange">
<div class="card"><header>Box 13</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 14</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 15</header><div data-type="symbol"></div></div>
<div class="card"><header>Box 16</header><div data-type="symbol"></div></div>
</div>
</div>
</div>
</div>
</body>
</html>
<html>
<body>
<div class="fcontainer" id="test_subpage_02">
<div class="fstatic headline mediumgray">
<div class="horizbox"><div>Feststehender Subpage-Titel 2("fstatic")</div></div>
</div>
<div class="fdynamic">
<div class="vertbox white">
scrollbarer Inhaltsbereich --- "fdynamic" --- scrollbarer Inhaltsbereich ---
</div>
</div>
</div>
</body>
</html>
Wie man vermutlich erkennt ist alles irgendwie copy&paste zusammen geschraubt - hat dank dem tollen Forum schon an vielen Stellen für mich hinreichend gut funktioniert - aber hier stecke ich für meine Kenntnisse / Fähigkeiten seit einiger Zeit in der Sackgasse... :o