Beiträge von Sempervivum

Für mich ist es erst Mal spät genug für heute, ich sehe mir das morgen an.

Gute Nacht!

Das hätte ich auch erwartet. Der Grund, dass das nicht passiert ist, dass text-align: center; von main>section geerbt wird. Warum sich das durchsetzt ist zunächst unerwartet. Meine Vermutung: Der Text ist ein eigener Knoten im DOM und die Flex-Anweisungen wirken auf diesen Knoten ohne den Text darin zu beeinflussen, das text-align jedoch auf den Text innerhalb des Knotens.

Beheben kannst Du das indem Du zusätzlich text-align-left; dem Flexitem zuweist.

Zitat

Verrätst Du uns auch was Du auf w3schools gefunden hast?

Die Frage hat sich geklärt, es ist das was Du jetzt online hast.

Verrätst Du uns auch was Du auf w3schools gefunden hast?

IMO ist die Entscheidung "Tabelle oder nicht" unabhängig davon ob sie sich in einem Modal oder direkt in der Seite befindet. Warum meinst Du denn, dass dein Werk misslungen ist? Vermutlich weil die einzelnen Zellen direkt aneinander hängen so dass man nicht erkennt, was wozu gehört? Das liegt aber am Styling und mit ein wenig Rändern oder Padding oder Margin kann man das sicher wesentlich verbessern.

Unabhängig davon hat ein Gridlayout aber gewisse Vorteile, ich glaube, ich habe schon Mal darauf hin gewiesen.

Ich habe mal deine Tabelle umgestellt:

    <div class="modal-body">
        <div class="grid-container">
            <div class="nr">Nr. 1</div>
            <div class="name">Michael Schlegel</div>
            <div class="desscription">Der Obermotz aus dem Odenwald Der Kasper, aus Streichholzhausen
                Im allgemeinen Sprachgebrauch haben sich die Begriffe Angler oder Angelfischer durchgesetzt
            </div>
            <div class="phone">08154711</div>
            <div class="nr">Nr. 22</div>
            <div class="name">Franz Kowalsky</div>
            <div class="desscription">Der Obermotz aus dem Odenwald Der Kasper, aus Streichholzhausen</div>
            <div class="phone">08154711</div>
            <div class="nr">Nr. 333</div>
            <div class="name">Klaus-Dieter Germann</div>
            <div class="desscription">Der Obermotz aus dem Odenwald Der Kasper, aus Streichholzhausen</div>
            <div class="phone">08154711</div>
        </div>
    </div>

Und mit diesem CSS kannst Du die Elemente vierspaltig anordnen:

        .grid-container {
            display: grid;
            /* 4 Spalten mit dem gewünschten Verhältnis 
            der Breite anlegen */
            grid-template-columns: 1fr 3fr 8fr 3fr;
            /* Damit es übersichtliche wird, einen kleinen
            Zwischenraum zwischen den Zellen erzeugen */
            gap: 1em;
        }

        /* Bei schmalem Browserfenster auf einspaltige 
        Anordnung umschalten */
        @media (max-width: 800px) {
            .grid-container {
                grid-template-columns: 1fr;
            }
        }

Du siehst, es wird dadurch sehr kompakt. Auch auf die Klassen könntest Du verzichten wenn Du nth-of-type verwenden würdest. Allerdings ist es mit Klassen ein wenig klarer, was gestylt wird.

PS: Ich habe das noch ein wenig weiter untersucht: Öffne ich das Dialog-Element durch das Attribut "open" scrollt es mit dem übrigen Inhalt mit, so wie der Verfasser es beschreibt. Aber nur dann.

Interessante Fragen. Ich habe das mal mit dem Dialog-Element von HTML ausgetestet.

Zitat

ein Dialog scrollt mit der Seite mit.

Kann ich nicht bestätigen. Verhält sich wie ein mit position: fixed; positioniertes Element, d. h. bezogen auf das Browserfenster bleibt die Position fest und der übrige Inhalt scrollt darunter hindurch.

Zitat

when the dialog is open you can still interact with the page just like normal.

Kann ich ebenfalls nicht bestätigen. Wenn mein dialog-Element offen ist, kann ich mit der übrigen Seite nicht mehr interagieren.

Kommt mir so vor als hätte der Verfasser eine private Vorstellung von dem Begriff "Dialog", die mit dem Verhalten des Dialog-Elementes von HTML nicht übereinstimmt.

Teste es am besten mal selbst aus, ob das Dialog-Element sich so verhält, wie Du es wünschst.

Ja, die Beschreibung scheint auch ziemlich gut zu sein, eben so wie einiges anderes auf kulturbanause.de.

Modale werden jetzt auch von HTML unterstützt, dort nennt es sich "Dialog":

<dialog>: The Dialog element - HTML: HyperText Markup Language | MDN

The <dialog> HTML element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.

developer.mozilla.org

Wenn dort von Returnvalues und Forms die Rede ist, ist das für dich zunächst nicht relevant und Du kannst es zurück stellen.

Wie Du siehst, braucht man für das Öffnen und Schließen ein wenig Javascript. Hier muss man einräumen, dass auch Bootstrap gewisse Vorteile hat, indem es einem das abnimmt und verbirgt.

Was Grid betrifft, ist die Doku auf css-tricks immer noch sehr gut:

A Complete Guide to CSS Grid | CSS-Tricks

Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.

css-tricks.com

Versuch mal ob Du damit und meinem Beispiel aus deinem vorigen Thread zum Ziel kommst.

Bei so etwas offenbaren sich die Vorteile von Gridlayout: Kein zusätzlichen Container und Klassen, nur die Elemente aneinander gereiht und dann dieses CSS:

        div.modal-body div.grid-container {
            display: grid;
            grid-template-columns: 1fr 2fr 6fr 1fr;
        }

Und das Umschalten auf vertikale Anordnung ist kinderleicht:

            div.modal-body div.grid-container {
                grid-template-columns: 1fr;
            }

Aber auch bei der jetzigen Lösung mit Tabellen könntest Du es vereinfachen und auf die Klassen verzichten, wenn Du nth-of-type verwendest:

:nth-of-type | CSS-Tricks

The :nth-of-type selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level

css-tricks.com

AFAIK ist Axel der Admin. Ich kann schon so viel sagen, dass dieses Forum arg zu gespammt wurde durch Posten eines scheinbar harmlosen Beitrages und Hineineditieren von Links ein paar Tage später. Ich vermute stark, dass das Editieren deshalb gesperrt wurde.

Vermutlich ein Schreibfehler: @media (max-width: 7700px)

Auch hier hilft es weiter, konsequent auf Flex zu setzen: Statt in der Mediaquery auf Wrapping umzuschalten, die Richtung auf column setzen:

@media (max-width: 770px) {
    .flex-container {
        /* flex-wrap: wrap; */
        margin-bottom: 25px;
        flex-direction: column;
    }
}

Dann gibt es noch eine Spezialität bei Flex: Der Default für min-width und min-height ist auto, d. h. Bilder können nicht unter ihre natürliche Größe schrumpfen. Also diese auf einen sehr kleinen Wert setzen:

.flex-item-right img {
    min-width: 1px;
    min-height: 1px;
}

Zitat

Wie würdest du das das Machen 2 Boxen mit 2/3 und 1/3 Aufteilung. Also so ungefähr.

Das ist sehr einfach zu machen: Linke Box flex: 2; und rechte Box flex: 1;.

Worin besteht denn das Problem genau? Wenn ich die Breite des Browserfensters ändere sieht es auch unter 700px ganz ordentlich aus, nur am Übergang zuckt es ein wenig.

Du benutzt für flex Prozentwerte, das war mir neu weil ich bisher nur dimensionslose Werte genommen hatte. Aber Browser und VS-Code akzeptieren es und ich musste erst nachlesen, wie sie es interpretieren. Bin dann hier fündig geworden:

CSS Reference Guide: flex - LogRocket Blog

The CSS flex property is a shorthand for setting how flexible items will grow or shrink to fill their parent container.

blog.logrocket.com

Demnach wird ein Prozentwert als flex-basis interpretiert. flex: 1000%; macht aber IMO keinen Sinn, was willst Du denn damit erreichen?

flex-item-left>h1 finde ich aber ich weiß nicht genau, was Du erreichen willst? Soll diese Überschrift über dem Text stehen? Dann musst Du entweder flex-direction: column; hinzu fügen oder einfach das display: flex; weg lassen, dann bauen sich die Elemente ohnehin übereinander auf.

Dass es da schon einen Block gibt, hatte ich gar nicht gesehen. Dann brauchst Du nur das flex-wrap: wrap; in den unteren zu übernehmen und kannst auf den ersten verzichten.

#filter>ul bedeutet, dass das ul ein direktes Kind ist während ein Leerzeichen bedeutet, dass es irgend ein Nachfahre sein kann, also auch Enkel, Urenkel etc.

Das ist hier ganz gut beschrieben:

CSS/Tutorials/Selektoren/Kombinator – SELFHTML-Wiki

Das einfachste dürfte sein, die Buttons mit flex anzuordnen und den Zeilenumbruch frei zu geben:

#filter ul {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.5em;
}

Versuche es, mir gefällt es mit center am besten, weil dann die großen Zwischenräume in der Mitte nicht auftreten.

Das liegt an diesem CSS:

Zitat

justify-content: space-between;

Wie der Begriff schon sagt, wird der leere Raum zwischen die Elemente gelegt und in diesem Fall ist ziemlich viel leerer Raum: 2 Elemente + gab. Versuch mal center statt dessen.

Nichts ist so einfach, dass es nicht getestet werden muss. Da fehlt noch ein toLowerCase:

Fancybox.bind('[data-filter="' + value.toLowerCase() + '"] a');