Baustelle: Seite zur prof. Vereinsführung

[stobi_de]

Das ist aktuell
https://www.die-vereinsbuddies.de/

So meine erste Idee, zu der ich natürlich ein paar Meinungen will
http://afripix-entwicklung.de/vereinsbuddies

[Tommy Herrmann]

Moin,

also wenn man nachdem man Deine tolle Seite gesehen hat die alte "Strato" Seite aufmacht bekommt man schon einen gewaltigen Schreck wie furchtbar diese gegen Deine Seite erscheint

Große Klasse vom ersten Eindruck habe noch nicht in irgendein Detail geguckt.


P.S.:

Der Block "Öffentliche Gelder" mit dem Text links und dem Geld rechts gefällt mir nicht - warum weiß ich aber auch nicht. Vielleicht passen die Farben vom Foto nicht richtig zum Textblock.

[stobi_de]

Das kann ich Dir erklären, warum Dir der Block nicht gefällt: das Bild ist Kacke und das Grün zu dominant.
Da bin ich gerade dran.

Ich muss mal irgendwo einen KI-Bildgenerator kaufen.
Das ist absolut klasse, was man schon mit den kostenlosen Versionen machen kann, aber so 100% perfekt ist das nicht.
Das Bild in dem Block ist somit ersetzt

[Tommy Herrmann]

Ja - sehr gut Hast ja den ganz Block neu gemacht.

[stobi_de]

Und nun sind die Leute sogar ähnlich zu dem Auftraggebern

[stobi_de]

Ich habe einen sehr sonderbaren Effekt.
Wenn ich im Block "öffentliche Gelder" den Satz "oder die Vereinsbuddies" fett mache (b oder strong), dann habe ich plötzlich eine zweite Spalte in dem Textblock. Sowohl aus der Oberfläche als auch im Codeedi.

schrott.jpg

Welchen Sinn macht ein "display: inline-flex;" in einem Textblock?

[Tommy Herrmann]

vielleicht reicht der Platz eben nicht wenn fett.

Die CSS-Anweisung display: inline-flex; kombiniert die Eigenschaften von inline und flex.
Sie wird auf ein HTML-Element angewendet und bedeutet Folgendes:

1. Flexbox-Verhalten

Das Element verhält sich wie ein Flex-Container.

Alle direkten Kindelemente werden nach den Regeln des Flexbox-Modells angeordnet.

Du kannst also Eigenschaften wie justify-content, align-items oder flex-direction verwenden.


2. Inline-Verhalten

Im Gegensatz zu display: flex; wird das Element selbst wie ein Inline-Element behandelt.

Das bedeutet:

Es nimmt nur so viel Platz ein wie nötig.

Es bricht nicht automatisch in eine neue Zeile (anders als bei display: flex;).

Es kann neben anderen Inline- oder Inline-Block-Elementen in einer Zeile stehen.


Beispiel:

Code: Alles auswählen

<div style="display: inline-flex; gap: 10px; border: 1px solid black;">
  <span>Element 1</span>
  <span>Element 2</span>
</div>
<span>Direkt daneben</span>

Ergebnis:

Die beiden <span>-Elemente im Container werden per Flexbox nebeneinander angeordnet.

Der gesamte Container bleibt jedoch inline und steht direkt neben „Direkt daneben“.

[stobi_de]

Code: Alles auswählen

<div class="text-wrapper">
                            <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showText" data-app-selector=".mbr-text, .text-wrapper">Anträge sind oft bürokratisch, Fristen und Förderrichtlinien müssen genau eingehalten werden.<br>Viele Mittel sind projektbezogen, nicht für die laufenden Kosten gedacht (Ausnahme: manche Sport- und Jugendförderungen).<br>Erste Anlaufstelle: zuständiges Rathaus, Landessportbund oder Ehrenamtsbüro oder <b>die Vereinsbuddies</b>.</p>
                        </div>
                        
.text-wrapper {
      .mbr-text {
        display: inline-flex;
        width: 80%;
        margin-bottom: 30px;
        @media (max-width: 992px) {
          width: 100%;
        }
      }
    }
                        

[Tommy Herrmann]

Das kommt weil Du den "wrapper" auf 80% gestellt hast. Durch die Fettschrift werden diese 80% überschritten und durch das "inline-flex" fliegt der angeschnittene Teil nach oben. Daher fehlt da noch ein <p> Tag für einen neuen Paragraph:

Code: Alles auswählen

                <div class="text-wrapper">
                    <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".mbr-text, .text-wrapper">Anträge sind oft bürokratisch, Fristen und Förderrichtlinien müssen genau eingehalten werden.<br>Viele Mittel sind projektbezogen, nicht für die laufenden Kosten gedacht (Ausnahme: manche Sport- und Jugendförderungen).</p><p>
                </p><p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".mbr-text, .text-wrapper"> 
                    Erste Anlaufstelle: zuständiges Rathaus, Landessportbund oder Ehrenamtsbüro <b>&nbsp;oder die Vereinsbuddies</b>.</p>
                </div>

CSS - 80% entfernt:

Code: Alles auswählen

.text-wrapper {
  .mbr-text {
    display: inline-flex;
    margin-bottom: 30px;
    @media (max-width: 992px) {
      width: 100%;
    }
  }
}

Mit den 80%:

Screenshot 2025-09-10 113249.jpg

Ohne die 80%:

Screenshot-ohne die 80 Prozent.jpg

[stobi_de]

Oh, wie blöd.
Dank Dir!

====
Nee, es ändert nichts, wenn ich die Zeile lösche.
Wäre auch nicht logisch. Die 80% geben die Breite des Textfeldes an.
Es gibt ja keine fix-Breite oder höhe.
Sobald "display: inline-flex;" drin ist, gibt es eine zweite Spalte.

[Tommy Herrmann]

Vergleich

Eigenschaft display: flex; display: inline-flex; Flexbox aktiv Ja Ja Block- oder Inline-Verhalten Blockelement Inlineelement Bricht in neue Zeile Ja Nein Nebeneinander möglich Eher nein Ja

Flex- und Inline-Flex.jpg

[stobi_de]

Verstehen tut der Stober datt nich!
Warum wird durch inline-flex ein Text in verschiedene Spalten aufgeteilt allein durch Formatierung eines Wortes mit Bolt oder Strong? Übrigens an jeder Stelle in dem Text.
Mache ich das mit einem Wort in der Mitte, habe ich 3 Spalten.

[Tommy Herrmann]

Habe gerade keine Zeit das ausführlich zu testen (stehe in der Küche). Bei Dir kommt mir das auch irgendwie komisch vor mit der Fettschrift. Das ganze Wort Ehrenamtsbüro bricht um - hast Du da die Trennung von Worten irgendwo ausgehebelt?

[stobi_de]

Nö, der Block ist ziemlich Standard.
Und Silbentrennung sowie der ganze Header-Kram ist noch nicht drin.
Das Projekt ist noch nicht in trockenen Tüchern.

[Volker]

Ich will ja nicht meckern

Aber das Impressum bei denen auf der original Seite als PDF

Nicht deren Ernst oder ? DSVGO ??

[stobi_de]

Daher macht der Herr Stober ja alles neu.
Aber ist schon...mutig

Noch ne Frage zum Design, ich habe unten zu unserem Problem-Block eine Alternative mit Video eingebaut.
Was gefällt besser?

Video ist von Sora, daher nicht wirklich dolle.

[Tommy Herrmann]

Moin,

also ich finde das Video schrecklich, sieht komplett unnatürlich aus.

[stobi_de]

Sora macht nix Gutes mehr. Sehr sonderbar. Das war das einzige Video, was ansatzweise sinn ergab.
Habe nun mal DeeVid ausprobiert. Sehr gut, aber Wasserzeichen.

Oh, nun bekommt der Mann 3 Arme

[Tommy Herrmann]

ja - das ist besser - aber auch nicht wirklich gut

Die bewegen sich alles zu schnell. Gib mal der KI die Anweisung, dass die Menschen sich nur wenig bewegen sollen.

Hast Du schon die KI "Hailuo AI" versucht. Da muss man wahrscheinlich zahlen um das Wasserzeichen los zu werden. Irgendwie sind diese Videos auch alle viel zu kurz, daher sieht das komisch aus. Denke Du bist da mit einem Foto besser dabei.

[Tommy Herrmann]

ChatGPT sagt, hier gibt es Videos bis zu 5 Minuten Länge:

https://www.zebracat.ai/de

Keine Ahnung - ich weiß weder ob die gut sind oder was die kosten.