Beiträge von Sempervivum

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.

Dir fehlt noch ein wichtiges Meta-Tag:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Sonst macht der Browser auf dem Handy aus deinem Layout was er will.

Mit Logo sieht es dann so aus:

pasted-from-clipboard.png

Wie Du jetzt miflo.de hast, ist genau so wie ich es verstanden hatte und wie ich es auch auf dieser Musterseite gesehen hatte, die Du ganz am Anfang gepostet hattest: #welcome überdeckt das Bild beim Scrollen aber verschwindet hinter der Navigation mit dem Logo links. Da fehlt jetzt nur noch das Logo über #welcome. Es sei denn, das Verhalten beim Scrollen, das Du dir vorstellt, ist ein anderes.

Ich vergaß zu erwähnen, dass position:sticky nur greift, wenn man auch top angibt:

header {
    position: sticky;
    top: 0;
}

PS: Jetzt dem Bild ein position:fixed geben und einen negativen z-index, damit es beim Scrollen vom Container #welcome überdeckt wird:

.bild {
    z-index: -1;
    position: fixed;
}

Aber damit das Bild vor dem Scrollen sichtbar ist, musst Du dem #welcome noch ein margin-top geben:

#welcome {
    height: 100vh;
    background-color: #b1d4e0;
    margin-top: 360px;
}

Dann funktioniert das schon in etwa. Fehlt nur noch das position:sticky für den Header.

Was das Scrollen betrifft, hatte ich in #4 geschrieben, dass es an dem overflow:hidden; liegt:

html {
    height: 100vh;
    /* overflow-y: hidden; */
}

Wenn ich das auskommentiere ist die Scrollbar sofort da.

Die gängigen Kandidaten:

CSS Layout - The position Property

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript,…

www.w3schools.com

An dem Beispiel für "sticky" kannst Du sehr gut erkennen, wie es funktioniert.

position: sticky; | CSS-Tricks

Better position: sticky; support is on the horizon. WebKit dropped in 2013, Firefox in 2014, and now Blink in (probably) 2016.

css-tricks.com

Ich habe aber auf die Schnelle keine Quelle gefunden, die einen ganz wichtigen Aspekt heraus stellt: Durch "sticky" Positionierung wird ein Element nicht aus dem Fluss genommen, d. h. die Elemente danach verschwinden nicht wie bei "fixed" darunter. Sondern erst beim Scrollen.

Ich meinte, dass Du das Bild aus dem Header löschst und außerhalb darunter anordnest, also so:

<body>
    <header>
        <nav class="navigation">

            <!-- Logo -->
            <div class="logo">
                <!-- <h1>LOGO</h1> -->
                <img class="navigation-logo" src="images/logo.png" alt="Logo" width="50" height="auto">
            </div>
            
            <!-- Navigation -->
            <ul class="menu-list">
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
                <li><a href="#">Link5</a></li>
            </ul>

            <div class="humbarger">
                <div class="bar"></div>
                <div class="bar2 bar"></div>
                <div class="bar"></div>
            </div>
        </nav>
    </header>
    <div class="bild">
        <img src="images/theke2.jpg">
    </div>



    <section id="welcome">

Und jetzt den Header sticky und das Bild fixed positionieren.

Die Seite lässt sich nicht scrollen weil für html overflow: hidden; gesetzt ist. Ein Überbleibsel aus einem Onepager?

BTW, es fehlt das öffnende <html>.

position: fixed; verwendest Du ja schon für die Nav. Mach dich auch mit postition: sticky; vertraut. Den Header sticky machen und das Bild heraus ziehen und darunter anordnen. Dann das Bild fixed positionieren. Für den Content darunter wirst Du ein margin-top brauchen, damit er sich nicht mit dem Bild überlappt. Und dann das Bild mit einem negativen z-index versehen, so dass es vom Content überdeckt wird.

Zitat

Verstehe also, dass "auf-zoomen" an anderer Stelle - mit meinem Ansatz - nicht möglich ist.

Meinst Du mit Hover? Das ist allerdings problematisch. Wenn Du etwas anderes meinst, könnte gelten "geht nicht, gibt's nicht" und ich würde gern gucken ob es so auch möglich ist.