Seite 1 von 1

Ändern von Akkordeon Blöcken

Verfasst: Fr 11. Feb 2022, 14:47
von scherenschlag
Moin.
Ich bin auf der Suche nach einem passenden Block für unsere Sponsoren.
Dabei habe ich auch Akkordeon Blöcke in Erwägung gezogen.
Schaut Euch bitte mal mein Test Akkordeon an. Direkt unter dem Menü.
Was mich stört ist, dass die Sponsoren zu weit auseinander gezogen sind.
Dementsprechend ist auch die Adresse etc. für mich zu weit vom Namen entfernt.
Kann man die einzelnen Reihen enger zusammen ziehen? Oder sollte man da lieber nicht dran rumbasteln?
Habe mir das CSS angeschaut. Komme aber mal wieder nicht weiter..... :confused:

https://tsad17.de/BSV2022/unterstuetzung.html#Sponsoren

Re: Ändern von Akkordeon Blöcken

Verfasst: Fr 11. Feb 2022, 15:34
von Tommy Herrmann
Moin,

meinst Du den Panel-Titel eines jeden Tabs? Der hat jetzt ein padding (Innenabstand) von 2rem, so sieht das aus, wenn ich den auf 0rem stelle:


.panel-title {
border-radius: 0px;
padding: 0rem 0;
}


panel-title.JPG


... oder vielleicht so auf 10px (oder wie Du magst):

.panel-title {
border-radius: 0px;
padding: 10px 0;
}


panel-title-10-px.JPG

Re: Ändern von Akkordeon Blöcken

Verfasst: Fr 11. Feb 2022, 16:49
von scherenschlag
Was soll ich sagen? :tu: :tu: :tu:
Genau dass war es. Ich habe mir das immer wieder angeschaut.
Bin nicht drauf gekommen.
Danke Tommy

Re: Ändern von Akkordeon Blöcken

Verfasst: Fr 11. Feb 2022, 17:20
von Tommy Herrmann
Gucke mal - das geht ähnlich mit jedem Browser - ich mache es meist mit dem Firefox:

> Menü > Extras > Browser-Werkzeuge > Werkzeuge für Web-Entwickler

... dann öffnen sich unten diese Werkzeuge:


Werkzeuge Browser.JPG


Damit kannst Du ganz viel machen, z.B. unter "Web-Speicher" die Cookies sehen oder löschen (auch einzeln) oder ganz links an dem Symbol mit dem Pfeil "Elemente auswählen":


Debugging.jpg


Klicke da drauf und fahre anschließend mit der Maus oben über Deine Webseite. Dann werden die überfahrenen Elemente markiert.

In den Werkzeugen kannst Du nun ganz genau den HTML-Code dazu sehen und auch die CSS im Fenster rechts daneben.

So kann man ganz schnell die CSS-Klassen erkennen und sehen was diese bewirken. Man kann auch direkt dort Änderungen eintragen und ausprobieren was passiert.