"Group" innerhalb einer Navbar

[SchlaubySchlu]

Hallo,

ich habe mir heute mal die Zeit genommen um in meine CV die aktuelle Uhrzeit einzubauen. Hat so weit, nach der Anleitung gut funktioniert.
Aber nun hätte ich die Uhrzeit, anstatt wie im Beispiel "swiss" in der linken Navbar lieber in der Top Nabar. Das habe ich auch soweit geschaft, nur das die Navbar bedingt druch die eingebaute group höher wird und ich nicht weiß warum das so ist.

TopNavbarMitUhr.JPG

Der Code der Navbar sieht wie folgt aus

<navbar position="top">
<line>
<layout colspan="0"/>
</line>
<pagejump target="Übersicht">
<layout colspan="0"/>
<label><icon name="control_all_on_off"/>Übersicht</label>
</pagejump>
<line>
<layout colspan="0"/>
</line>
<pagejump target="Küche">
<layout colspan="0"/>
<label><icon name="control_building_int_eg"/>Räume</label>
</pagejump>
<line>
<layout colspan="0"/>
</line>
<pagejump target="Fussbodenheizung">
<layout colspan="0"/>
<label><icon name="sani_floor_heating"/>FBH</label>
</pagejump>
<line>
<layout colspan="0"/>
</line>
<pagejump target="Heizung">
<layout colspan="0"/>
<label><icon name="sani_boiler_temp"/>Heizung</label>
</pagejump>
<line>
<layout colspan="0"/>
</line>
<pagejump target="Aussen">
<layout colspan="0"/>
<label><icon name="control_building_outside"/>Aussen</label>
</pagejump>
<line>
<layout colspan="0"/>
</line>
<pagejump target="Wetter">
<layout colspan="0"/>
<label><icon name="weather_station_generic"/>Wetter</label>
<widgetinfo>
<info format="%.1f °C">
<layout colspan="0" width="50px"/>
<address transform="DPT:9.001">9/4/0</address>
</info>
</widgetinfo>
</pagejump>
<line>
<layout colspan="0"/>
</line>
<pagejump target="FensterÜbersicht">
<layout colspan="0"/>
<label><icon name="fts_window_2w"/>Fenster/Türen</label>
</pagejump>
<line>
<layout colspan="0"/>
</line>
<pagejump target="KNX Bus">
<layout colspan="0"/>
<label><icon name="edit_settings"/>Technik</label>
</pagejump>
<line>
<layout colspan="0"/>
</line>
<group name="Aktuelle Zeit" nowidget="true">
<layout colspan="2"/>
<group nowidget="false" align="left">
<strftime lang="de" format="%H:%M" class="timebig">
<layout colspan="2"/>
</strftime>
<strftime lang="de" format="%a, %d. %B %Y" class="timedate">
<layout colspan="2"/>
</strftime>
</group>
</group>
<line>
<layout colspan="0"/>
</line>
</navbar>

Hat einer von euch vielleicht eine Ahnung woran das liegt?


Gruß
Ralf

[Tontechniker]

Könntest Du bitte mal deinen Code mit den entsprechenden Einrückungen veröffentlichen? Der Button "Quellmode" (links mit <>) im Editor wirkt Wunder, wenn Du ihn vor dem Pasten benutzt.
Die Vorgehensweise ist in diesem Beitrag beschrieben:
https://knx-user-forum.de/forum/supportforen/smarthome-py/1497890-hilfe-zu-smarthomeng-erhalten-python-code-und-yaml-konfig-richtig-einf%C3%BCgen .
Gruß
Hans

[SchlaubySchlu]

Hallo Hans,

danke für deinen Tip, das habe ich gesucht aber nicht gefunden.... Sorry noch mals!

 <navbar position="top">
      <line>
        <layout colspan="0"/>
      </line>
      <pagejump target="Übersicht">
        <layout colspan="0"/>
        <label><icon name="control_all_on_off"/>Übersicht</label>
      </pagejump>
      <line>
        <layout colspan="0"/>
      </line>
      <pagejump target="Küche">
        <layout colspan="0"/>
        <label><icon name="control_building_int_eg"/>Räume</label>
      </pagejump>
      <line>
        <layout colspan="0"/>
      </line>
      <pagejump target="Fussbodenheizung">
        <layout colspan="0"/>
        <label><icon name="sani_floor_heating"/>FBH</label>
      </pagejump>
      <line>
        <layout colspan="0"/>
      </line>
      <pagejump target="Heizung">
        <layout colspan="0"/>
        <label><icon name="sani_boiler_temp"/>Heizung</label>
      </pagejump>
      <line>
        <layout colspan="0"/>
      </line>
      <pagejump target="Aussen">
        <layout colspan="0"/>
        <label><icon name="control_building_outside"/>Aussen</label>
      </pagejump>
      <line>
        <layout colspan="0"/>
      </line>
      <pagejump target="Wetter">
        <layout colspan="0"/>
        <label><icon name="weather_station_generic"/>Wetter</label>
        <widgetinfo>
          <info format="%.1f °C">
            <layout colspan="0" width="50px"/>
            <address transform="DPT:9.001">9/4/0</address>
          </info>
        </widgetinfo>
      </pagejump>
      <line>
        <layout colspan="0"/>
      </line>
      <pagejump target="FensterÜbersicht">
        <layout colspan="0"/>
        <label><icon name="fts_window_2w"/>Fenster/Türen</label>
      </pagejump>
      <line>
        <layout colspan="0"/>
      </line>
      <pagejump target="KNX Bus">
        <layout colspan="0"/>
        <label><icon name="edit_settings"/>Technik</label>
      </pagejump>
      <line>
        <layout colspan="0"/>
      </line>
      <group name="Aktuelle Zeit" nowidget="true">
        <layout colspan="2"/>
        <group nowidget="false" align="left">
          <strftime lang="de" format="%H:%M" class="timebig">
            <layout colspan="2"/>
          </strftime>
          <strftime lang="de" format="%a, %d. %B %Y" class="timedate">
            <layout colspan="2"/>
          </strftime>
        </group>
      </group>
      <line>
        <layout colspan="0"/>
      </line>
    </navbar>

in meiner verlinkten css datei steht noch folgendes

.custom_timebig {
    padding: 0;
    margin: 0;
    color: #75d5ff;
    min-height: 0mm;
    line-height: 5mm;
    font: bold 6mm "Lucida Grande", Lucida, Verdana, sans-serif;
}

.custom_timebig > div.strftime_value {
    text-align: left;
    line-height: 5mm;
}

.custom_timedate {
    padding: 0;
    margin: 0;
    min-height: 0mm;
    line-height: 5mm;
    font: bold 3mm "Lucida Grande", Lucida, Verdana, sans-serif;
}

.custom_timedate > div.strftime_value {
    text-align: left;
line-height: 7mm;
}

Vielen Dank!

Gruß
Ralf

[peuter]

Dir fehlende da noch folgende CSS-Regeln:

#navbarTop .navbar .widget.custom_timebig { min-height: 0; }
#navbarTop .navbar .group { margin: 0; border: none; }

Und warum da 2 ineinander verschachtelte Groups sind, verstehe ich nicht. Ich würde das eher so machen

   <group name="Aktuelle Zeit" nowidget="true">
        <layout colspan="2"/>
        <strftime lang="de" format="%H:%M" class="timebig">
          <layout colspan="1"/>
        </strftime>
        <strftime lang="de" format="%a, %d. %B %Y" class="timedate">
          <layout colspan="1"/>
        </strftime>
   </group>

[SchlaubySchlu]

Hallo,

danke für den die Tipps.

Den Code packe ich in die CSS-Datei oder?
Auf jeden Fall scheint es dann zu funktionieren...

Wegen der Verschachtelung, die hat sich irgendwie beim vielen Herumspielen eingeschlichen, habe ich entfernt ;-)

Noch eine Frage, wenn ich den colspan auf 1 setzte dann steht Zeit und Datum übereinander, was ja klar ist.
Was müsste ich in der CSS-Datei angeben wenn ich gerne Zeit und Datum untereinander, zentriert haben möchte um den colspan auf 1 zu setzten?

Leider ist HTML und auch CSS für mich absolutes Neuland.

Danke!

Gruß