Beiträge von Sempervivum

Hallo Emess,

schön, dass Du dieses Thema ansprichst und ich kann deine Aussagen zum großen Teil unterschreiben.

Insbesondere was die Netikette betrifft. Ich lese öftest Redewendungen wie "nicht dein Ernst!" "ist Schrott/Müll/kaputt" "dieses Gehampel". So etwas widerspricht nicht nur der Netikette sondern sicherlich auch den Forenregeln. Die Reaktionen darauf sind unterschiedlich: Manch einer hat da eine bemerkenswerte Leidensfähigkeit aber ich habe es mehr als ein Mal beobachtet, dass ein Fragesteller nach solchen unfreundlichen Postings von der Bildfläche verschwand - immer ein Schaden für das Forum. Und ich vermute eine hohe Dunkelziffer: Wer neu ist und eine Frage hat, wird sich vor der Registrierung ein wenig umsehen, und, wenn er einen Umgang wie oben beschrieben bemerkt, es gar nicht erst tun. Jedes Mal ein verlorenes Mitglied.

"Viele Wege führen nach Rom" - im Prinzip richtig aber es gibt Einschränkungen, ein Beispiel: Bei manchen Aufgaben kann auch ein Tabellenlayout oberflächlich betrachtet zum Ziel führen. Aber niemand, der sachkundig ist, wird eine Empfehlung dahin gehend gutheißen. Und bei manchen Mitgliedern gewinnt man den Eindruck, dass nicht die technische Fragestellung im Vordergrund steht und die Absicht, eine konstruktive Alternative vorzuschlagen sondern ein übersteigertes Interesse am Kritisieren und Besserwissen, wenn ein konstruktiver Beitrag reflexhaft mit Kritik gekontert wird. Hin und wieder beobachte ich, dass eine Frage mehr als einen Tag unbeantwortet herum liegt aber, wenn ich sie dann beantworte, postwendend ein Ja-Aber-Posting folgt.

Mitunter kann es nicht schaden, einen Erfolg und eine positiven Beitrag einfach mal stehen zu lassen und anzuerkennen.

Beste Grüße, Ulrich

Zitat

Warum du jetzt allerdings immer noch flex bevorzugst obwohl das ja ein Element mehr braucht, ist mir nicht so ganz klar.

Wie früher schon geschrieben, es nimmt sich nichts. Mit jedem Spanning entfernt man sich von der Semantik eines Grid und das Layout wird unübersichtlicher.

Dies bedarf auch noch der Kommentierung:

Zitat

Ehrlich gesagt finde ich es an dieser Stelle etwas unpassend.

Ich hätte nicht für die Tage und die Uhrzeiten alles einzelne Elemente genutzt und sie mit Grid ausgerichtet.

Beim dl, das tk1234 vorschlägt, ist das genau so vorgesehen:

HTML/Tutorials/Listen/Beschreibungslisten – SELFHTML-Wiki

Die Elemente werden aneinander gereiht ohne jedes Paar zu umschließen. Aber wahrscheinlich liegen die Leute, die hier den Standard definiert haben, ebenfalls falsch

Ich bin dann aber erst Mal raus hier bzw. heraus gedrängt. Unbefriedigend, wenn die Beiträge nicht von Sachverstand, sowohl technisch als auch didaktisch, geprägt sind sondern von Besserwisserei.

Das liegt daran, dass dieses Vorgehen mit Flex nichts zu tun hat, sondern veraltet ist. Es bringt dir wenig Nutzen wenn Du dort einsteigst um es zu verstehen. Profitieren würdest Du, wenn Du dich damit vertraut machen würdest, wie man so etwas mit Mitteln umsetzt, die Stand der Technik sind, siehe auch mein Posting #23 in deinem anderen Thread.

Ausgehend von meinem Posting in #8 hier mal wie ich mir das vorstelle.

Mit Flex:

        .flex-container {
            display: flex;
        }

        .flex-item {
            flex: 1;
        }

        #welcome h1,
        #welcome div {
            text-align: center;
        }

    <section id="welcome">
        <img src="images/logo.png">

        <h1>welcome</h1>
        <div class="flex-container">
            <div class="flex-item">1</div>
            <div class="flex-item">2</div>
        </div>
        <div>3</div>
    </section>

Und mit Grid:

        #welcome {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        #welcome img,
        #welcome h1,
        #welcome div.bottom {
            grid-column: 1/3;
        }

        #welcome h1,
        #welcome div {
            text-align: center;
        }

    <section id="welcome">
        <img src="images/logo.png">

        <h1>welcome</h1>
        <div>1</div>
        <div>2</div>
        <div class="bottom">3</div>
    </section>

Zitat

Doch das gibt mir immer noch Rätsel auf

Siehe den ersten Absatz in meinem Posting #34: Code sollte so gestaltet sein, dass er klar und selbst erklärend ist und keine Rätsel aufgibt.

Zitat von @tk1234

Nicht mit flex, versuch es mal mit grid: grid-template-areas ist dein Freund.

Hier wäre eine Begründung wünschenswert, warum Du an dieser Stelle Grid bevorzugst. Dadurch wird alles nur unnötig kompliziert und mit jedem Spanning entfernt man sich von der Semantik eines Grid.

footer>section:last-of-type
{
    flex-basis: calc(100% - 4rem);
    flex-shrink: 0;
}

Ich schätze ja dieses Vorgehen mit Wrapping und Rechnerei mit calc nicht so sehr. Dadurch, dass es Flex gibt, ist das überflüssig. flex: 1; und gut ist, das ist übersichtlich, klar und lesbar. Und man muss sich nicht mit padding, border etc. befassen. An den Fragen von Emess erkennt man ja, dass dieses Vorgehen unübersichtlich ist und das Verständnis erschwert.

Und, Bemerkung am Rande: Auch an dieser Stelle frage ich mich, wo die Mitglieder sind, die sonst das Posten von fertigem Code reflexhaft beanstanden.

Zitat

Das dritte div muss ebenfalls mit eigener Klasse angesprochen werden.

Für die Anordnung, die Du haben willst, erst Mal nicht denn der Browser stapelt die Elemente übereinander. Sondern nur, wenn Du z. B. eine Höhe angeben willst, eine Farbe und/oder.

Da sieht man dann sofort, wo es hakt: Du willst ja die Items 1 und 2 nebeneinander anordnen. Dafür brauchst Du, wenn Du es mit Flex erledigen willst, einen Container drum herum, also so:

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
</div>
<div class="flex-items">3</div>

Die Klasse "flex-items" für einen Flex-Container ist zwar nicht falsch, lädt aber zu Missverständnissen ein weil man meistens "flex-item" eben für ein Item verwendet. Daher war ich so frei, die Klassen anders zu definieren.

Mit diesem:

/* #welcome .flex-items{ */
#welcome .flex-container {
  background-color: dimgray;
  padding-top: 0.3vw;
  width: 50vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
 
}

und dem "flex-direction:row" darin warst Du schon auf dem richtigen Wege.

Natürlich kann man diese Anordnung auch mit Grid machen aber es nimmt sich nicht viel. Außerdem entfernt man sich mit jedem Spanning von der Semantik eines Grid.

Poste doch auch mal das HTML dazu oder lade den aktuellen Stand wieder auf miflo.de hoch.

Das ist genau die gleiche Situation wie in deinem vorigen Thread mit dem Footer, nur dass Du oben nicht drei sondern nur zwei Items hast. Versuche es mit dem Muster. Alles wird unter dem h1 angeordnet und ich erwarte keine Probleme mit dem Bierdeckel.

Was den Bierdeckel betrifft, beobachte ich, dass sich dieser unschön verschiebt, wenn das Browserfenster schmaler wird. Mein Vorschlag: Alles was damit zusammen hängt, von der Breite des Browserfensters abhängig machen, d. h. vw-Einheiten verwenden bei Größe, Position und margin-top des Elementes darunter. Und ab einer bestimmten Breite die Breite des Bierdeckels konstant lassen, damit er nicht riesengroß wird.

Das scroll-padding-top gibt an, wie viel Platz der Browser beim Scrollen oben frei lässt. Damit das genau passt, muss dieser Wert gleich der Höhe des sticky-Elementes sein, also in deinem Fall der Nav im Header.

Wenn es das ist, findest Du die Lösung in dem Posting von tk1234 , ganz am Schluss. Diese Insel mit einem nützlichen Hinweis hatte ich zunächst in dem Ozean von unproduktiver Nörgelei übersehen.

In solchen Situationen fällt mit immer ein Zitat von Albert Einstein ein:

Zitat

Stay away from negative people - they have a problem for every solution.

Zitat

Aber mehr sorgen macht mir der link Inhalt. Mir will sich nicht erschließen wieso der nich direkt zum Ziel Inhalt springt.

Du meinst den Link "INHALTE" in der Navigation? Der springt bei mir schon zum Ziel aber die Überschrift verschwindet hinter der Navigation. Ist es das, was Du meinst?

Guten Morgen,

das sieht ja schon alles sehr gut aus jetzt. Und das mit gleicher Breite für die Flexitems hast Du auch hin bekommen durch flex:1.

Was ist denn jetzt noch offen?

Zitat

das die Inhalte bündig aber trotzdem insgesamt mittig bleiben

Verstehe ich nicht richtig.

Was fertige Lösungen betrifft, ein Tipp von meiner Seite: Wenn hier die Aktivitäten einzelner Forenmitglieder als anstößig empfunden werden, einfach den Melden-Button benutzen. Möglicher Weise steigen die Betreffenden dann gern in eine Diskussion mit der Moderation ein.

Du brauchst bloß das div.bottom eine Stufe höher anzuordnen, dann bekommst Du automatisch was Du wünschst:

    <footer>
        <div class="flex-items">
            <div>kontakt</div>
            <div>social</div>
            <div>hours</div>
        </div>
        <div class="bottom">unterer Teil</div>
    </footer>

Finde ich vollkommen OK, wie Du das vor hast. Statt der Tabelle mit den Öffnungszeiten kannst Du auch ein Grid verwenden, dann würde das HTML wesentlich schlanker.

Das Skript macht nur das was hinein programmiert ist und an diesen Fall hatte ich nicht gedacht. Lässt sich aber sehr leicht hinzu fügen:

    <script>
        const
            menu = document.querySelector('ul.menu-list'),
            hamburger = document.querySelector('div.humbarger');
        hamburger.addEventListener('click', event => {
            // Ist das Menü offen? Das zeigt
            // die Klasse "open" an:
            if (menu.classList.contains('open')) {
                /* Menü verbergen indem wir
                die Höhe auf 0 setzen: */
                menu.style.height = '0';
            } else {
                /* Menü öffnen indem wir die Höhe
                entsprechend Inhalt setzen;
                scrollHeight liefert uns diese
                auch wenn das Menü geschlossen ist: */
                menu.style.height = menu.scrollHeight + 'px';
            }
            menu.classList.toggle('open');
        });
        menu.addEventListener('click', event => {
            menu.style.height = '0';
            menu.classList.remove('open');
        });
    </script>

In der Console getestet auf miflo.de und hat dort funktioniert.