tooltip zum raumstatus dazu, kommentare entfernt

This commit is contained in:
+++ 2022-02-25 14:56:23 +01:00
parent 32ad805bc3
commit 19f305dd01
2 changed files with 28 additions and 13 deletions

View file

@ -37,15 +37,16 @@
<div class="center-content max-width"> <div class="center-content max-width">
<div id="headline" class="flex-box row"> <div id="headline" class="flex-box row">
<div id="header-left" class="flex-box row center"> <div id="header-left" class="flex-box row center">
<div id="status-icon" class="icon"> <div id="status-icon" class="icon tooltip">
<span class="tooltiptext">Befinden sich Leute im Raum?</span>
<?php <?php
try { try {
include_once '../src/getContent.php'; include_once '../src/getContent.php';
getKrautButton($status); getKrautButton($status);
} catch(Exception $ex) { } catch(Exception $ex) {
error_log("$ex", 0); error_log("$ex", 0);
} }
?> ?>
</div> </div>
<div id="banner-div" class="flex-box column"> <div id="banner-div" class="flex-box column">
<a id="banner" href="#" <a id="banner" href="#"

View file

@ -1,4 +1,4 @@
/* file: style3.css /* file: style.css
* date: 2022-02-06 * date: 2022-02-06
* user: bernd@nr18.space * user: bernd@nr18.space
*/ */
@ -129,6 +129,24 @@ h1, h2, h3, h4 {
padding: 0; padding: 0;
} }
.tooltip .tooltiptext {
visibility: hidden;
position: absolute;
left: 1.5em;
bottom: -1.5em;
color: #ffffff;
background-color: #000000;
text-align: center;
padding: 0.25em 1em;
border-radius: 0.25em;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/*** head with navigation menu ***/ /*** head with navigation menu ***/
header { header {
@ -166,10 +184,6 @@ a#banner:focus {
} }
nav#menu { nav#menu {
/* 'height: 100%' geht nur mit 'position: fixed'. mit 'position: absolute'
* wird nur der teil innerhalb der headline angezeigt. dann muß 'height:
* 100%' entfernt werden und das menu nimmt sich den platz, den es
* braucht. */
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;