[erledigt] f18 - vertikaler Abstand zwischen groups wie ändern?

[Sany]

Hallo zusammen, ein Frage an die css-Spezialisten (ich bin da leider noch in einem sehr frühen Stadium)

Auf einer Seite zeige ich verschiedene Devices in Gruppen sortiert an. Der Gruppenname steht quasi als Überschrift darüber (Header row). Darüber wird (zwischen 2 Gruppen) noch eine leere Zeile eingefügt. Diese möchte ich etwas schmaler haben, um nicht so viel Platz zu verschwenden.
Wenn ich das Element im Browser untersuche steht da:

Code Auswählen Erweitern

<div class="devType col_header pinHeader Room_CASA_steff_grp_T_r_Fenster_Rollo_Markise" data-name="Room_CASA_steff_grp_T_r_Fenster_Rollo_Markise" style="margin-top: 20px;"> etc
Ich kann nun den margin-top=20px ändern auf z.B. 4px, dann wird die Zeile schmaler angezeigt.
Wie muss ich das jetzt in additional CSS eintragen? brauchts da ein !important am Ende?

Vielen Dank  schon mal und ja, CSS Grundlagen stehen auf der Agenda

Sany

[rudolfkoenig]

Eine Zeile der Sorte:

dev.devType.col_header.pinHeader { margin-top:4px; }

CSS Grundlage: dev.devType.col_header.pinHeader ist der Selektor, je mehr Komponenten es hat, desto "relevanter" wird die Anweisung. !important ist gar nicht so maechtig, wie man denkt, typischerweise hat man was falsch gemacht, wenn man es braucht.

[Sany]

Hallo Rudi,

vielen Dank für Deine Antwort. Es tut sich zwar etwas, aber noch nicht das gewünschte.
Ich hab die Zeile mal eingetragen (mit div...), allerdings wird nur oberhalb der ersten Gruppe die Margin eingefügt (dort will ich sie eigentlich gar nicht, weil oberer Rand. Ich hab mir das in den Entwicklertools nochmals angeschaut, aber sieh selbst:

bei 1. sieht man die 4px margin
bei 2. ist der 20px margin orange eingefärbt (um diesen geht es)
bei 3. wenn ich hier auf den Eintrag klicke kann ich den 20px margin aus und einschalten.
bei 4. dieser Eintrag entsteht durch die Zeile in additional CSS und ist an dieser Stelle durchgestrichen. Wenn ich die erste Überschrift (CasaInfo) markiere ist der Eintrag nicht durchgestrichen und ein/ausschaltbar.

Wie komme ich nun an das element.stye { margin-top: 20px; }
Wenn ich die Zeile direkt so ins additional packe klappt es nicht.

Viele Grüße

[rudolfkoenig]

Soweit ich weiss, hat Inline-Style die hoechste "Spezifizitaet", und kann nicht per CSS ueberschrieben werden.
Siehe auch https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

D.h. Du musst denjenigen, der den inline Style eingebaut hat, ueberzeugen, es zu entfernen

[Sany]

ok, interessante Lektüre.
Fürs Problem selbst hätte ich angenommen, das ist so bei fhemWEB. Wenn ich die Seite über eine andere Web-instanz mit darktouchpad als style öffne haben die Gruppen einen Rahmen und der Gruppenname steht genau dazwischen. Bei f18 siehts so aus wie eingangs beschrieben.
Dann muss ich mal weitersuchen.

Trotzdem vielen Dank!

[Sany]

ich hab des Thema auf erledigt gesetzt. Es ist zwar nicht gelöst, hat sich aber für mich erst mal erledigt, da die Darstellung mit fully genug Platz hat, um alles wie gewünscht anzeigen zu lassen.
Falls doch jemand rausfindet, wie man den Abstand verkleinern kann, dann kann das ja für später mal hilfreich sein.