Gestaltung Navigationsleiste

uwirt · 10 Februar 2019, 21:34:58

Ich möchte in meiner vertikalen Navigationsleiste am untersten Rand Uhrzeit und Datum einblenden.

Kann ich das mit Class erreichen?

Das Menue sieht folgendermassen aus:

Code Auswählen


<html>
<body>
     <div class="sheet">
        <div class="row">
            <div class="cell top-align">
                <div data-type="pagetab" data-url="home.html" data-icon="fa-home" data-on-background-color="#aa6900" class="cell big top-space-3x"></div>
                <div data-type="pagetab" data-url="outside.html"  data-icon="fa-tree" data-on-background-color="#aa6900" class="cell big top-space-3x"></di$
                <div data-type="pagetab" data-url="lan.html"  data-icon="fa-cloud" data-on-background-color="#aa6900" class="cell big top-space-3x"></div>
                <div data-type="pagetab" data-url="sensors.html"  data-icon="ftui-door" data-on-background-color="#aa6900" class="cell big top-space-3x"></$
                <div data-type="pagetab" data-url="webcam.html"  data-icon="fa-video-camera" data-on-background-color="#aa6900" class="cell big top-space-3$
                <div data-type="pagetab" data-url="system.html"  data-icon="fa-server" data-on-background-color="#aa6900" class="cell big top-space-3x"></d$
            </div>
        </div>
    </div>


<div data-type="clock" data-format="l" class="items-bottom"></div>


<div data-type="clock"
     data-format="d-m-Y"></div>

<div data-type="analogclock">
</div>

<div data-type="clock"
     data-format="H:i:s"></div>

</body>
</html

class="items-bottom" bringt offenbar nichts.

drhirn · 11 Februar 2019, 13:26:47

Einfach eine neue Reihe wäre keine Option?

uwirt · 11 Februar 2019, 14:29:03

...werde das wohl so tun

Zitat von: drhirn am 11 Februar 2019, 13:26:47
Einfach eine neue Reihe wäre keine Option?

... ich dachte halt es ginge einfacher ...

drhirn · 11 Februar 2019, 14:32:20

Es gäbe schon andere Möglichkeiten auch. Aber einfacher sind die nicht

uwirt · 11 Februar 2019, 15:06:13

Jetzt muss ich doch nochmals nachfragen weil ich nicht unbedingt von pagetab auf pagebutton umsteigen möchte.

Offenbar wird bei pagetab automatisch der ganze linke Rand mit der Navigationsleiste gefüllt.

Wie kann ich dann noch unten eine weitere Reihe einfügen?

roman1528 · 11 Februar 2019, 15:33:56

Moin.

Code Auswählen

.unten {
	position: absolute;
	top: calc(100% - 70px) !important;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	white-space: nowrap;
}

So zeige ich bei mir das Datum ganz unten an.
In die fhem-tablet-ui-user.css eintragen und biisl mit den Werten bei top: und left: rumspielen.

Und natürlich:

Code Auswählen

<div data-type="clock" ........ class="unten"></div>

Grüße^^

FHEM Forum

Gestaltung Navigationsleiste

uwirt

drhirn

uwirt

drhirn

uwirt

roman1528