Frage zum Aufbau des Layouts

Begonnen von aramis, 18 Januar 2022, 21:26:15

Vorheriges Thema - Nächstes Thema

aramis

Hallo zusammen,

ich habe mal eine Rückfrage zum Layout. Das letzte Mal dass ich mich mit html beschäftigt habe war css noch nicht mal bekannt  ;D

Aber jetzt mal zu meiner Herausforderung:
Ich möchte ein drei zeiliges Layout haben.
Erste Zeile soll eine höhe von 12,5% haben, die zweite 75% und die dritte Zeile wieder 12,5%.
Alle Zeilen sollen halbtransparent sein, da ich ein Hintergrund Bild verwende.
Ich habe es über das Gridster Layout probiert. Das funktioniert auch soweit.

Jetzt kommt aber die Herausforderung bei der ich hoffe von euch Hilfe zu bekommen.
Sobald ich eine Zeile auf halbtransparent stelle, werden auch die Widget darin als halbtransparent dargestellt.
Das ist ganz gut in der oberen Zeile erkennbar. Dort sind die beiden Widgets Label und Clock hellgrau dargestellt.
Sobald ich die Transparenz der index.html für die head.html herausnehme ist der Hintergrund schwarz und die Schrift weiß.
So wie ich mir die Schrift vorstelle.

Mein Ziel ist es dass die Widget vor allem in mittleren Zeile jedoch nicht halbtransparent sind sondern "normal" dargestellt werden.

Da ein Bild mehr als 1.000 Bilder sagt habe ich euch einen ganz primitiven Bild / Entwurf angehängt.
Ebenso mal den Code zur index.html

Könnt Ihr mir da helfen?
Wäre spitze.

Vielen Dank euch


<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-dominik.css" />
    <meta name="gridster_disable" content="1">
    <meta name="gridster_cols" content="1">
    <meta name="gridster_rows" content="10">
    <script src="js/fhem-tablet-ui.js" defer></script>
  <title>SMARTHOME</title>
</head>
<body background="pic/back.jpeg">
<div class="gridster ">
        <ul>
        <li data-row="1" data-col="1" data-sizey="1" data-sizex="1" class="half-transparent" data-template="head.html">
        </li>
        <li data-row="2" data-col="1" data-sizey="8" data-sizex="1" class="half-transparent" data-template="menu.html">
        </li>
        <li data-row="8" data-col="1" data-sizey="1" data-sizex="1" class="half-transparent" data-template="bottom.html">
        </li>
        </ul>
</div>
</body>
</html>

####################
=> ganz viele verrückte Ideen
####################