Ankündigung

Einklappen
Keine Ankündigung bisher.

Flexbox: Navigation links

Einklappen

Google Anzeige oben

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Flexbox: Navigation links

    Hallo zusammen

    Ich hoffe, hier kann mir jemand helfen. Bin seit Tagen am verzweifeln. Bin am Videos schauen, Anleitungen ausprobieren, aber es klappt nicht.

    Es geht um folgendes:

    Ich bin an einer Homepage dran, die die Navigation links hat und der Content befindet sich rechts. Im Bild, dass ich hochgeladen habe, sollte die
    Darstellung ersichtlich sein.
    Das ganze will ich mit der Flexbox Technik realisieren.

    Dabei sollten folgende Punkte eingehalten werden:

    1. Die Navigation sollte immer eine feste Breite haben
    2. Der Content Bereich (Main) passt sich der Grösse des Fensters an
    3. Wenn das Fenster verkleinert wird, sollte jeweils das rechte Bild nach links unten rutschen
    4. Aber einer Breite von ca. 750 Pixel wird ein MediaQuery eingefügt, dass die Navigation dann nach oben verschiebt

    Das Problem, wo ich habe, ist, dass entweder die Bilder nicht nach unten verschoben werden oder alles fix bleibt. Oder der gelbe Bereich rutscht
    irgendwie unter den gelben Bereich (Navi) und zwar ab dem Punkt, wo die LI Elemente aufhören.
    Ich vermute, ich mache da mit der Verschachtelung was falsch, aber ich finde den Fehler nicht. Das Problem beginnt beim Hinzufügen der 4 Bilder
    und den darunterliegenden Texten.

    Ich habe bisher nur statisch entwickelt und bin momentan mich am einarbeiten bei der responsiven Technik. Aber leider noch ohne Erfolg.
    Wahrscheinlich für einen Profi ein Klacks, aber für mich zum Haare ausreissen (habe bald keine mehr).

    Für jeden Tipp bin ich sehr dankbar.

    Gruss Day-Walker

  • #2
    Mit dem Einsatz von Flexbox bist Du ja schon auf dem richtigen Weg. Um dir bei der Problemlösung zu helfen, müsste man den Code sehen. Am besten ein Link wenn die Seite online ist.
    Wo hast Du dich denn mit Flexbox vertraut gemacht? Ich benutze gern dieses:
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    Dort ist ein Beispiel für ein 3-Spalten-Layout, dass sich sicherlich leicht für deinen Fall reduzieren lässt.
    Oder dieses:
    https://wiki.selfhtml.org/wiki/CSS/E...haften/Flexbox
    Zuletzt geändert von Sempervivum; 29.01.2018, 23:05.

    Kommentar


    • #3
      Hallo

      Ich habe mal eine Beispielseite erstellt. Du kannst ja mal schauen ob die deinen Vorstellungen entspricht:

      http://boratb.bplaced.net/index002.html

      Ganz so einfach wie du es dir vorstellst funktioniert Flexbox allerdings nicht.

      Gruss

      MrMurphy

      Kommentar


      • #4
        Vielen Dank für Eure Antworten.

        @Sempervivum: Zum Lernen benutzte ich häufig Video2Brain Videos, wo es auch für FlexBox (von Peter Müller) entsprechende Videos gibt. Aber auch allgemeine Videos, über
        responsive Themen habe ich auch schon durchgeschaut. Des Weiteren habe ich auch noch Bücher über HTML/CSS bei mir, die dieses Thema anschneiden.

        @MrMurphy: Vielen Dank für das Beispiel. Werde es mal für mich genauer unter die Lupe nehmen und analysieren.

        Ich bin mir bewusst, dass Flexbox nicht ganz ohne ist. Ich habe mir schon zwei, drei Frameworks angeschaut, mich mit dem 960Grid System befasst und mir viele Gedanken gemacht,
        mit welchem System ich meine erste responsive Homepage erstelle. Wenn man nur statisch gearbeitet hat, ist es doch nicht ganz einfach, das neue System zu verstehen. Besonders
        weil man jetzt doch sehr penibel auf die Kompatibilität der Browser achten muss. Früher HTML 4 und jetzt HTML 5.

        Brauche einfach noch eine Portion Geduld und Ausdauer. Aber jedenfalls vielen Dank für Eure Hilfe.

        Gruss Day-Walker

        Kommentar


        • #5
          Ein sehr hilfreiches Framework ist hier zu nennen, nämlich Bootstrap. Die neue Version Bootrap 4 verwendet sehr viel Flexbox. Mit einem Grid lässt sich sehr gut arbeiten und zukünftig wird CSS die Möglichkeit bieten das eigene Grid-System zu verwenden. Leider unterstützen noch nicht alle Browser die neue Grid-Technik und deswegen muss man noch mit Frameworks arbeiten, die diese Aufgabe erfüllen.

          PS: Wer richtig Hardcor ist, sollte mal versuchen für Outlook ein Layout zu erstellen, was rsponsive ist(Outlook unterstützt bis heute nur HTML4 und nur wenig CSS2). B-)

          Gruß

          Localfu
          Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.
          Albert Einstein

          Kommentar


          • #6
            Bootstrap finde ich persönlich viel zu überladen, nur um responsive sein zu wollen.
            Wenn man die GUI-Elemente nutzt, ok. Aber nur um responsive zu sein, halte ich das für keine gute Idee, da ist Flexbox basic die bessere Wahl.
            PHProcks! » Tutorials

            Kommentar


            • #7
              Ich finde, dass es in Ordnung ist mit der Performance von Bootstrap und seid der Version 4, die vor kurzem heraus gekommen ist, sind die Dateien kleiner geworden. Ich kann nur Bootrap empfehlen, da ich es beruflich nutze, habe ich viele positive Erfahrungen damit gesammelt. Bootstrap 4 verwendet Flexbox, was den Aufbau der Inhalte wesentlich verbessert.

              Wenn ich mithilfe von MediaQueries und Flexbox direkt arbeiten würde, müsste viel mehr Zeit einrechnen, die ich brauche um eine Seite in Responsive Design umzusetzen. Das bezahlen leider die Kunden meiner Agentur nicht, deswegen spielt die Wahl von Bs eine wesentliche Rolle. Wenn das Grid Layout Module als Standard erklärt wird, wird sich natürlich nochmals die Frage stellen, ob ich weiterhin Bootstrap nutzen würde, aber jetzt ist es im meinem Arbeitsalltag nicht weg zu denken.

              Gruß Localfu
              Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.
              Albert Einstein

              Kommentar


              • #8
                Ich habe mir Bootstrap mal angeschaut. Ist bestimmt eine mächtige Lösung, aber ich denke für das Projekt, wo ich dran bin, einfach zu gross. Die Homepage ist relativ einfach aufgebaut.
                Und bevor ich mich in ein solches Framework einarbeite, möchte ich mal zuerst mein Wissen ohne eines solchen Frameworks aufbauen. Das kann bestimmt nicht schaden.

                Nochmals vielen Dank für Eure hilfreichen Antworten und Bemerkungen.

                Gruss Day-Walker

                Kommentar


                • #9
                  Zitat von Day-Walker Beitrag anzeigen
                  Ich habe mir Bootstrap mal angeschaut. Ist bestimmt eine mächtige Lösung, aber ich denke für das Projekt, wo ich dran bin, einfach zu gross. Die Homepage ist relativ einfach aufgebaut.
                  Und bevor ich mich in ein solches Framework einarbeite, möchte ich mal zuerst mein Wissen ohne eines solchen Frameworks aufbauen. Das kann bestimmt nicht schaden.
                  Finde ich ein gute Einstellung!


                  PHProcks! » Tutorials

                  Kommentar


                  • #10
                    Hallo Day-Walker,

                    ich nutze entsprechende Lösungsansätze von Projectseven.com.

                    Harmony Grid für die Umsetzung des Flexbox-Layouts: http://projectseven.com/products/tools/hmy/index.htm

                    Dann kann ich für ein funktionierendes, responsives Menü das Adaptive Menu Magic empfehlen: http://projectseven.com/products/men.../amm/index.htm

                    Und dann noch die Art Gallery Magic: http://projectseven.com/products/gal.../agm/index.htm

                    Mit den 3 Elementen zusammen hat man eine responsive Flexbox-Seite, ein responsives Menü und eine brauchbare vollresponsive Bildergalerie.

                    Man benötigt aber Dreamweaver für die Erweiterungen - die Layouts sind dann in wenigen Minuten fertig und voll einsatzbereit.

                    Wer sich etwas mit CSS auskennt kann auch die Farben komplett anpassen.

                    Auf diesen Webseiten verwende ich die Module im Praxiseinsatz:

                    https://helmers.de/ (Harmony Grid und Art Gallery Magic)

                    https://www.babyflohmaerkte.com/ (Harmony Grid und Adaptive Menu Magic)

                    MfG Karl






                    Kommentar


                    • #11
                      @admin: Vielen Dank

                      Kommentar


                      • #12
                        Hi,
                        Zitat von admin Beitrag anzeigen
                        Auf diesen Webseiten verwende ich die Module im Praxiseinsatz:

                        https://helmers.de/ (Harmony Grid und Art Gallery Magic)

                        https://www.babyflohmaerkte.com/ (Harmony Grid und Adaptive Menu Magic)
                        nur schade, dass hier ohne Javascript die Boxen untereinander stehen und das Menü im ersten Fall erst am Seitenende sichtbar wird und im zweiten Fall garnicht verfügbar ist, sowie im ersten Fall das B2B Shop-Login in zu schmalen Fenstern nicht mehr verfügbar ist.

                        Gruß
                        Ingo
                        Ingo Webdesign

                        Kommentar


                        • #13
                          Hallo Ingo,
                          JavaScript wird heut' zu Tage, auf fast allen Seiten verwendet und es ist ein fester Bestandteil der meisten Internetseiten. Wer JavaScript deaktiviert kann nicht immer erwarten, dass der Seitenbetreiber auf JavaScript verzichtet.
                          Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.
                          Albert Einstein

                          Kommentar


                          • #14
                            Das sehe ich anders. Eine Seite muss aufgrund von etlichen Blockern zumindest uneingeschränkt auch ohne JS bedienbar sein, auch heute noch!
                            Der Entwickler, der dafür nicht Sorge trägt, hat aus meiner Sicht das Ziel aus den Augen verloren.

                            JavaScript ist fein und allgegenwärtig, aber ein Entwickler ist verantwortlich dafür, dass seine Seite von möglichst allen Clients bedienbar ist!
                            Die Komfortablität kann mit JavaScript natürlich verbessert werden, ganz immens sogar in manchen Fällen. Aber bedienbar muss die Seite auch ohne JS sein, ansonsten hat der Entwickler aus meiner Sicht etwas grundlegendes nicht verstanden.
                            PHProcks! » Tutorials

                            Kommentar


                            • #15
                              JavaScript ist ein fester Bestandteil von vielen Seiten und ohne JavaScript funktionieren viele Seite heute garnicht mehr, da diese immer komplexer werden und Aufgaben erfüllen müssen. Einen JavaScript-Blocker kann manchmal von Vorteil sein. Es ist aber nicht immer möglich gleichzeitig die Flexibilität einer Internetseite zu bieten und anderseits auf JavaScript zu verzichten. Zwar bietet HTML5 und CSS3 viele möglichkeiten Seiten auszugestalten und das mehr denje, aber um bestimmte Aufgaben auf der Seite zu erfüllen oder bestimmte Dienste anzubieten, ist dies nur mithilfe von JavaScript möglich. Dazu gehört unter anderem die Auswertung von Formularen, ohne die Seite neu laden zu müssen. Dafür ist JavaScript von Anfang ausgelegt, um auf Benutzerereignisse reagieren zu können. Man sollte auch nicht versuchen um jeden Preis allen es recht zu machen und auf eine wesentliche Webtechnologie verzichten, weil vereinzelt Benutzer JavaScript komplett abstellen. Zudem können JavaScript-Blocker angepasst und für bestimmte Seiten ausgeschaltet werden.

                              Gruß Localfu
                              Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.
                              Albert Einstein

                              Kommentar

                              Lädt...
                              X