Beiträge von Emess

Zitat von Sempervivum

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.

Hab das soweit hinbekommen. Habe sogar geschafft in einem Flex-Item mit .social  eine Flexbox zu integrieren. Langsam mache ich Fortschritte Hast du ein Beispiel wie ich die Öffnungszeiten von Tabelle zum Grid migriere?. Vielleicht gibts ja ein Tutorial. ich schau natürlich zwischenzeitlich auch selbst was mir helfen könnte

Bisher gemacht

Ich will das mal von meiner Sicht erklären. Ich bitte ja erst um Hilfe wenn ich nach stunden Recherche nicht mehr weiter komm.

Und fertige Lösungen sind auch nicht immer gut. Oft genug habe ich auch schon einfach nur nach einem Stoss in die Richtung gefragt.

Ich bin zb. In einem Linux Forum mit über 41000 Mitgliedern recht aktiv. Und linux kann man hier sehr gut vergleichen. Es ist alles möglich.

Nur wenn man über ein ganz normales System hinaus gehen will, ist man ohne Helfer und aufgeschmissen. Es gibt saubere Lösungen und Dirty Tricks.

Es ist ein Forum wo jeder jedem Hilft egal ob Linux-Nerds oder richtige IT-Administratoren. Besonders Anfänger werden von uns gerne gesehen,

weil es das Forum am Leben erhält und weil es so zu einer Anlaufstelle für Hilfesuchende wird.

Und das ist der Sinn eines Forums.

So und jetzt ist das passiert das leider in fast jedem Forum passiert. Der für mich interessante Thread ist zu einer Sinn- bzw- Unsinndiskusion geworden.

Von mir aus kann man das jetzt Gedankengänge verschieben.

Nix für ungut. Das Leben ist zu kurz für solche Gedanken.

Wir bleiben doch trotzdem weiter Freunde und Gleichgesinnte?

Zitat von Sempervivum

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

Code

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

Das war ja so einfach un dich habe Stundenlang tut über Flexbox gelesen und angeschaut. Aber jetzt, denke ich hab gerade was gelernt.

Flexbox ist auch nur normales HTML. Ich muss mir dieses Bootstrapdenken abgewöhnen Mal schauen wie ich weiter komme

Zitat von m.scatello

Wieso habe ich das Gefühl, dass du dir hier ständig helfen lässt und im Endeffekt selber damit Geld verdienst?

Dass dieser Eindruck entsteht ist aus deiner Sicht nachvollziehbar. doch kann ich dir versichern dass ich mit den drei Seiten die auch Teils mit Hilfe gemacht habe keine kommerziellen Ziele verfolgte, es ging hier nur um Projekte die meine reine Langeweile und neugier befriedigen.

Ich möchte allerdings auch nicht verhehlen, dass ich in zwei Restaurant hin und wieder umsonst essen darf und jetzt in meiner Stammkneipe werde ich bestimmt auch nicht absahnen. Ich bin schon lange nicht mehr im Arbeitsleben und freue mich über jeder Herausforderung und mit der damit verbundenen Unterhaltung mit Gleichgesinnten.

Eigentlich wollte ich dir das per PM mitteilen. Aber das können ruhig alle wissen. Also wenn du mir da, bzw. sonst niemand mehr helfen will(st). Dann ist das schade aber ich werde damit leben.

Nix für Ungut!

Die erste Frage kommt schon

Habe jetzt im Footer 3 item flex: auto; angeordnet . Hat auch gut geklappt. Doch wie bekomme ich ein weiteres Item unter die 3 Items,

welches die gesamte Breite einnehmen soll. Und was muss ich tun damit ich mit dem Inhalt der Items oben mittig anfangen kann.

Das dritte Item soll ja außerdem nunterhalb der Überschrift mit Grid verwirklicht werden soll.

Doch die Anordnunng der items und deren Inhalt hat vorang über den Grid kann ich ja noch etwas lesen.

Was ich bisher Footermäßig gemacht habe

Zur Info das ist der Bootstrap Code

  <footer>
        <div class="container-fluid">
            <div class="row text-center">
                <div class="col-md-4"> 
                    <hr class="fuss1">
                    <h5>Kontakt</h5>
                    <hr class="fuss1">
                    <p>06162-919721
                        <a href="tel:+06162919791"><i class="fas fa-phone"></i></a>
                    </p>
                    <p>info@walachei-spachbrücken.de
                        <a href="mailto:mail@walachei-spachbrücken.de"><i class="far fa-envelope"></i></a>
                    </p>
                    <p>Erbacher Straße 7</p>
                    <p>64354 Spachbrückn</p>
                </div>
                <div class="col-md-4">
                    <div>
                        <hr class="fuss1">
                        <h5>Folge uns!</h5>
                            <hr class="fuss1">
                    </div>
                    
                    <div class="col-12 social">
                        <a href="https://www.facebook.com/people/Die-Walachei-Spachbr%C3%BCcken/100068511121407/">
                            <span class="fa-stack fa-2x">
                                <i class="fas fa-square fa-stack-2x"></i>
                                <i class="fab fa-facebook fa-stack-1x fa-inverse"></i>
                            </span></a>
                        <a href="https://www.instagram.com/explore/locations/1383314021780719/walachei-spachbrucken/"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="col-md-4">
                    <hr class="fuss1">
                    <h5>offene Tränke</h5>
                    <hr class="fuss1">
                    <table id="aerea">
                        </div>
                        <tr>
                            <td>Montag</td>
                            <td>17:00-22:00</td>
                        </tr>
                        <tr>
                            <td>Dienstag</td>
                            <td>geschlossen</td>
                        </tr>
                        <tr>
                            <td>Mittwoche</td>
                            <td>17:00-22:00</td>
                        </tr>
                        <tr>
                            <td>Donnerstag</td>
                            <td>17:00-22:00</td>
                        </tr>
                        <tr>
                            <td>Freitag</td>
                            <td>17:00-22:00</td>
                        </tr>
                        <tr>
                            <td>Saturday</td>
                            <td>17:00-22:00</td>
                        </tr>
                        <tr>
                            <td>Sonntag</td>
                            <td>17:00-22:00</td>
                        </tr>
                    </table>
                
            </div>
                <div class="col-12">
                    <hr class="fuss2">
                    Am 3. Samstag eines jeden Monat bleibt die Walachei geschlossen
                    <br>
                    Wir bitten um Euer Verständnis!
                    <hr class="fuss2">
                    <h5>&copy; walachei-spachbrücken.de</h5>
                </div>
            </div>
        </div>
    </footer>

Habe hier einen footer der mit Flexbox neu erstellt werden soll

foot.jpeg

Meine Idee wäre ein Flexcontainer und 3 items und ein weitere Flexcontainer darunter.?

Wäre das richtig? Und vor allem wäre das auch sinnvoll?

Eure Meinung würde mich interessieren.

Vielen Dank

Werde mir das alles mal Morgen genauer ansehen um alle zusammenhänge zu verstehen.

BTW ( ) mir ist da noch was an deinem tollen Script aufgefallen. Nämlich wenn ich das burgemenue einen Link anklicke bleibt das menue offen und collabiert nicht zurück. kannst das ja mal testen wenn du willst?

Hier noch mal das script

<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');
        });
    </script>

Oh man! Wie peinlich

wäre es nicht besser den Bierdeckel in ein eigenes Flexbox- Div zustecken um die Große und die position auch in der Mobilansicht zu fixieren?

Un wie bekomme ich den Hintergrund für die Welcome-section auch in der Mobill Ansicht passend

Habe alles nochmal hochgeladen

Miflo.de

schenke.jpeg

Damit du meine Idee besser verstehst stell ich mal den Murx hoch den ich bisher Bootstrap abgerungen habe online.

Also so soll die Startseite aussehen bevor man scrollt oder einen Linkt betätigt.

Was ich deiner bisherigen hilfe entnehme ist; dass entweder der Header in der Höhe begrenzt werden oder die welcom-section?

Schau die mal meine Vorstellung an. Das Logo Bierdeckel aber ich schon als Flexbox integriert

also Schau mal. Die Idee

Habe es je wie du. Und es scrollt auch so wie es soll. Aber jetzt scrollt auch die Navbar nach oben.

header{
  position: sticky;
}

header .navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* position: sticky; */
  min-height: 12vh;
  min-width: 100%;
  z-index: 10;
  background-image: url(/images/bg_wood.jpg);
  /* background: #0f1423; */
  border-bottom: 2px solid #0c2d48;
}

also vielleicht sprechen wir auch aneinander vorbei?

Habe mal die position geädert das geht auch. Aber weil es seltsamerweise noch nichts zu scrollen gab habe ich mal "Gude" (welcome) verlinkt.

aber das läuft grundsätzlich was schief. Das hat mich wirklich überrascht und ich steh vor einem Rätsel?

miflo.de

Erstmal vielen Dank. Das seh ich mir Morgen genauer an.

Zitat von Sempervivum

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>.

Hätte nichts gegen einen Onepager in diesem Stadium ist doch noch alles möglich. Oder?

Zitat

Mach dich auch mit postition: sticky; vertraut. Den Header sticky machen und das Bild heraus ziehen und darunter anordnen. Dann das Bild fixed positionieren.

hast du da eine Seite wie ich den Header sticky mache und meinem Speziellen Problem das Bild unter den Nav herausziehen kann?

In meinem neuen Studienprojekt geht es eine Bootstrapseite mit Flexbox zu gestalten.

Da finde ich bei dieser Seite speziell die Startseite sehr interessant. Doch nach dem Bild im Header habe ich das Problem des unteren Teil des Header (also das bisschen Weiss) sollte ja die Seite füllen und soll dann über das Bild scrollbar sein, Das Logo kann man vorerst vernachlässigen dai ch die schon in eine Flexbox integrieren konnte.

Doch ich diesen Srolleffect im Header bekomme ich einfach nicht hin trotz intensivem googeln und Youtuben.

Da würde ein Keiner Hinweis oder Anfang nicht schaden.

Soweit bin ich bis jetzt.

Das hat geholfen

Danke an alle Beide. Vielen Dank.

Hab mir das mal komplett abgespeichert

   @media only screen and (min-width: 768px) and (max-width: 991px) {
        header .navigation .menu-list {
            width: 60%;
            /* Hier erzwingen wir mit !important, dass die Höhe auf auto
            gesetzt wird und das Menü sichtbar ist: */
            height: auto !important;
        }

        header .navigation .menu-list li a {
            font-size: 1rem;
        }

    }

    /* Large Mobile :480px. */

    @media only screen and (max-width: 767px) {

        header .navigation .menu-list {
            position: absolute;
            top: 80px;
            min-width: 100%;
            background: rgba(15, 20, 35, 0.99);
            text-align: center;
            /* Statt durc "display: none;" verbergen wir
            das Menü durch eine Höhe von 0: */
            /* display: none; */
            height: 0;
            overflow: hidden;
            /* Die Animation erledigen wir durch CSS: */
            transition: 1s height linear;
        }

        header .navigation .menu-list li {
            display: block;
        }

        header .navigation .menu-list li a {
            display: block;
            padding: 20px;
            transition: color 1s ease, padding 1s ease, background-color 1s ease;

        }

        header .navigation .menu-list li a:hover {
            color: #b1d4e0;
            padding-left: 30px;
            background: rgba(177, 212, 224, 0.2);
        }


        header .navigation .humbarger {
            display: block;
        }

        .intro-section .intro-content h1 {
            font-size: 2.8rem;
        }

        .intro-section .intro-content h6 {
            font-size: 1.4rem;
        }

        .intro-section .intro-content .changing {
            font-size: 1.5rem;
        }

        .intro-section .intro-content .header-btn a {
            font-size: 1.25rem;
        }

    }


    /* small mobile :320px. */

    @media only screen and (max-width: 479px) {

        .intro-inner .intro-content h1 {
            font-size: 2rem;
            letter-spacing: 1px;
        }

        .intro-inner .intro-content p {
            margin-top: 10px;
        }

    }

Ist doch "display:block:

Das mit dem Body habe ich jetzt kapieraber auf codepen klappt es nicht

re1.jpg

geht also hier nicht

aber wenn ich zurück gehe sind die Links da