Ankündigung

Einklappen
Keine Ankündigung bisher.

Flexbox: Navigation links

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; 30.01.2018, 00: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

                              homepage-forum.de - Hilfe für Webmaster! Statistiken

                              Einklappen

                              Themen: 56.340   Beiträge: 427.901   Mitglieder: 27.679   Aktive Mitglieder: 75
                              Willkommen an unser neuestes Mitglied, BVFFM.

                              Online-Benutzer

                              Einklappen

                              507 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 504.

                              Mit 1.625 Benutzern waren am 17.03.2018 um 19:52 die meisten Benutzer gleichzeitig online.

                              Die neuesten Themen

                              Einklappen

                              • arnego2
                                Antwort auf Erfolgsfaktoren Onlineshop
                                Ich tippe mal darauf das die Umfrageseite ordentlich Daten sucht um die dann "auszuwerten"
                                Heute, 19:45
                              • basti1012
                                Antwort auf Animation beim Wechsel der Seite
                                Wenn du einen normalen Seiten wechsel machst ( auch als unterseite ) wird die Seite ja ganz gewechselt sobald man auf einen Link klickt und man kann keine Animation mehr sehen die nach den klick kommt. Beim Seite betretten kann man natürlich die Container auf blinken ,fliegen oder sonst was lassen....
                                Heute, 18:56
                              • Localfu
                                Antwort auf Erfolgsfaktoren Onlineshop
                                Lieber Kipfstuhl,
                                welcher Nutzen würde die Community dieses Forums haben, wenn die User an deiner Umfrage teilnehmen. Gibt es eine Veröffentlichung der Daten zu der Umfrage oder werden die Umfragedaten rein kommerziell genutzt. Für eine kurze und Knappe Antwort für das Forum wäre toll....
                                Heute, 01:52
                              • admin
                                Antwort auf Erfolgsfaktoren Onlineshop
                                Hallo,

                                ich bin gerade mit der Umfrage angefangen, bin aber bei den Produktkategorien nicht mehr weiter gekommen. Wir versenden Pflanzen - keine Kategorie passt.... Ich kann ja nicht ernsthaft Tierfutter oder Haushaltsgeräte auswählen...
                                Eine Kategorie "Sonstiges" wäre...
                                Gestern, 22:53
                              • Kipfstuhl
                                Erfolgsfaktoren Onlineshop
                                Guten Tag Onlineshop-Betreiber,

                                im Rahmen meiner Bachelorarbeit an der Hochschule der Medien in Stuttgart untersuche ich Erfolgsfaktoren bei Onlineshop-Betreibern. Dabei beschäftige ich mich mit der Frage:

                                Was sind die entscheidenden Erfolgsfaktoren für Onlineshops?
                                ...
                                19.02.2019, 16:26

                              Kostenlose Homepage bei Jimdo!

                              Einklappen

                              Jimdo

                              Die neuesten Beiträge

                              Einklappen

                              • Kipfstuhl
                                Erfolgsfaktoren Onlineshop
                                Guten Tag Onlineshop-Betreiber,

                                im Rahmen meiner Bachelorarbeit an der Hochschule der Medien in Stuttgart untersuche ich Erfolgsfaktoren bei Onlineshop-Betreibern. Dabei beschäftige ich mich mit der Frage:

                                Was sind die entscheidenden Erfolgsfaktoren für Onlineshops?
                                ...
                                19.02.2019, 16:26
                              • arnego2
                                Antwort auf Erfolgsfaktoren Onlineshop
                                Ich tippe mal darauf das die Umfrageseite ordentlich Daten sucht um die dann "auszuwerten"
                                Heute, 19:45
                              • M4tr0s3
                                Animation beim Wechsel der Seite
                                Hallo miteinander.
                                Ich hätte ein Anliegen an diese erlauchte Runde. Ist es möglich mit JS oder CSS eine Animation auf Objekte zu hinterlegen, die eintreten, wenn man innerhalb der Webseite die Seite wechselt? Ich hatte mir das so gedacht, dass meine Elemente alle aufblenden oder 'rein fliegen'...
                                Scopri e acquista un'esperienza di benessere unica ed esclusiva nel mondo QC Terme
                                Gestern, 14:45
                              • basti1012
                                Antwort auf Animation beim Wechsel der Seite
                                Wenn du einen normalen Seiten wechsel machst ( auch als unterseite ) wird die Seite ja ganz gewechselt sobald man auf einen Link klickt und man kann keine Animation mehr sehen die nach den klick kommt. Beim Seite betretten kann man natürlich die Container auf blinken ,fliegen oder sonst was lassen....
                                Heute, 18:56
                              • Localfu
                                Antwort auf Erfolgsfaktoren Onlineshop
                                Lieber Kipfstuhl,
                                welcher Nutzen würde die Community dieses Forums haben, wenn die User an deiner Umfrage teilnehmen. Gibt es eine Veröffentlichung der Daten zu der Umfrage oder werden die Umfragedaten rein kommerziell genutzt. Für eine kurze und Knappe Antwort für das Forum wäre toll....
                                Heute, 01:52
                              • admin
                                Antwort auf Erfolgsfaktoren Onlineshop
                                Hallo,

                                ich bin gerade mit der Umfrage angefangen, bin aber bei den Produktkategorien nicht mehr weiter gekommen. Wir versenden Pflanzen - keine Kategorie passt.... Ich kann ja nicht ernsthaft Tierfutter oder Haushaltsgeräte auswählen...
                                Eine Kategorie "Sonstiges" wäre...
                                Gestern, 22:53
                              • TheFallenGuardian
                                Website www.myhifi24.com
                                Stelle euch die Website https://www.myhifi24.com/

                                vor.

                                Bin auf die Kritik gespannt.
                                19.02.2019, 08:13
                              • Localfu
                                Antwort auf Website www.myhifi24.com
                                Hi und willkommen hier im Forum,
                                ich habe mir mal deine Seite angeschaut und mir sowohl die Gestaltung, Konzeption und die Technik dahinter angeschaut.

                                Die Seite wirkt auf mich sehr clean und hat zu viel Weißraum für manche Elemente. Besonders der Header der Seite ist mir ins Auge...
                                19.02.2019, 15:23
                              • anireb270
                                Antwort auf Ranking
                                Hallo!
                                Also wie es schon die anderen gesagt haben- du musst Geduld haben! Was aber sehr wichtig ist für die Suchmaschinen ist, dass deine Website einen guten Content hat. Viele sagen, dass du dein Keyword so oft wie möglich im Text besitzen musst - falsch! Es ist viel wichtiger einen guten Content
                                ...
                                19.02.2019, 13:46
                              • envy90
                                Spezielle Umfrage erstellen
                                Hallo,
                                mein Kumpel möchte eine Webseite erstellen und auf einer der Unterseiten eine Umfrage haben. Diese soll unter anderen Fragen enthalten wie:
                                1. Welcher Wochentag/Monat ist heute: (Der Tag/Monat soll erkannt werden)
                                2. Wann sind sie Geboren und wie alt sind sie? (Soll aus dem eingegebenen Datum
                                ...
                                13.02.2019, 09:00
                              Lädt...
                              X