marctrix: Webseite mit HTML und CSS umsetzten

Beitrag lesen

Hej MrMurphy1,

Eher mit passenden Containern wie main und aside. Für den linken Container könnte ein div genommen werden.

diese nach links zu floaten oder lieber mit flexboxen zu arbeiten?

Besser geeignet ist Flexbox, da es speziell für solche Layouts entwickelt wurde.

Aber die Browser-Unterstützung ist noch immer mäßig. Mit Vendor-Präfixen und neuer und alter Schreibweise bekommt man zwar eine meiner Meinung nach ausreichende Abdeckung, aber das für mehrere breakpoints durchzuziehen ist meiner persönlichen Meinung nach nicht unbedingt für Anfänger geeignet, zumal hier das Zeitbudget eng zu sein scheint. Kommt noch IE9 und älter zu den zu unterstützenden Browsern hinzu, braucht man auch noch zusätzlich ein Fallback ohne flexbox.

Falls die Unterstützung älterer Browser bei diesem Projekt zu vernachlässigen ist - es geht ja offenbar nur um die Theorie - dann könnte man sich einigen, dass man ausschließlich die standardkonforme Schreibweise benutzt und alte Browser außen vorlässt. Unter diesen "Laborbedingungen" ist flexbox auch für Anfänger ok und dann auch wieder eine gute Wahl. Denn dann hat man Vorteile, wenn die Seite später mal responsiv werden soll.

Ich bin für jeden ernst gemeinten Hinweis dankbar. Das Mobile sollte irgendwann ein Thema werden, zum Start erstmal nicht, da ich hier im KA leider nur begrenze Möglichkeiten habe.

Mit einem sinnvollem HTML-Quelltext, speziell der Container, sind das später nur noch ein paar Zeilen CSS.

echt?

Vielleicht das Umstellen der Container, aber das ist ja nicht einmal die Spitze des Eisberges...

Beim Menü kommst du kaum um eine JavaScript-Lösung herum (wobei es schöne fertige Sachen gibt, wie flexnav).

Nur ein paar Zeilen CSS ist wohl die Untertreibung des Tages ;-)

Marc

0 130

Webseite mit HTML und CSS umsetzten

Evan
  • css
  • html
  • meinung
  1. 0
    da-vid
  2. 0
    MrMurphy1
    1. 0
      Evan
      1. 0
        Matthias Apsel
        1. 0
          Evan
          1. 0
            Matthias Apsel
            1. 0
              Evan
              1. 0
                Christian Kruse
                1. 0
                  Evan
      2. 0
        MrMurphy1
        1. 0
          Evan
          1. 0
            Der Martin
            1. 0
              Evan
              1. 0
                marctrix
              2. 0
                Matthias Apsel
                1. 0
                  Evan
                  1. 2
                    Julius
        2. 0
          marctrix
          1. 0
            Matthias Scharwies
            1. 0
              Gunnar Bittersmann
              • html
              1. 0
                marctrix
                1. 0
                  MrMurphy1
                  1. 0
                    marctrix
            2. 1
              marctrix
      3. 0
        Gunnar Bittersmann
        • html
        1. 0
          Evan
          1. 0
            Gunnar Bittersmann
            1. 0
              Matthias Apsel
              1. 0
                Gunnar Bittersmann
    2. 0
      marctrix
      1. 0
        Evan
        1. 0
          JürgenB
          1. 0
            Evan
          2. 0
            marctrix
            1. 0
              Camping_RIDER
              1. 1
                marctrix
        2. 0
          marctrix
      2. 0
        MrMurphy1
        1. 0
          marctrix
          1. 0
            Gunnar Bittersmann
            1. 1
              marctrix
      3. 0
        Gunnar Bittersmann
        1. 0
          marctrix
          1. 1
            Gunnar Bittersmann
            1. 0
              marctrix
        2. 0
          Evan
          1. 2
            Tabellenkalk
  3. 0
    Gunnar Bittersmann
    • design/layout
    • ux
    1. 0
      Evan
      1. 0
        Gunnar Bittersmann
  4. 0

    Seiten-Element gestaltet

    Evan
    1. 0
      Matthias Apsel
      1. 0
        Camping_RIDER
        1. 0
          Gunnar Bittersmann
          1. 0
            Camping_RIDER
            1. 0
              Auge
              • menschelei
    2. 0
      Auge
    3. 0
      MrMurphy1
      1. 0
        MrMurphy1
        1. 0
          Gunnar Bittersmann
          • html
          • rdf
          • semantik
        2. 1
          Tabellenkalk
          1. 0
            Gunnar Bittersmann
            • typografie
            1. 0
              Tabellenkalk
        3. 0
          Evan
          1. 0
            Evan
            1. 0
              Auge
              • css
              • html
          2. 0
            MrMurphy1
            1. 0
              Evan
              1. 0
                MrMurphy1
                1. 0
                  Evan
                  1. 0
                    Tabellenkalk
                    1. 0
                      Evan
                      1. 0
                        Tabellenkalk
                        1. 0
                          Evan
                          1. 0
                            Gunnar Bittersmann
                            • typografie
                            1. 0
                              Evan
                              1. 2
                                Gunnar Bittersmann
                                • meinung
                                1. 0
                                  Evan
                            2. 0
                              Tabellenkalk
                              1. 0
                                Gunnar Bittersmann
                                1. 0
                                  Tabellenkalk
                                  1. 0
                                    Der Martin
                                    1. 0
                                      Tabellenkalk
            2. 0
              Gunnar Bittersmann
              • css
              • svg
              1. 0
                Evan
                1. 0
                  Gunnar Bittersmann
                2. 0
                  Gunnar Bittersmann
    4. 0
      MudGuard
      1. 0
        Evan
    5. 0

      Seiten-Element gestaltet - Problem mit Border Radius

      Evan
      1. 0
        Tabellenkalk
        1. 0

          Seiten-Element gestaltet - Fertige Box

          Evan
          1. 0

            Seiten-Element gestaltet - Border Länge

            Evan
            1. 0
              Auge
              • css
              • html
              1. 0
                Evan
                1. 0

                  Seiten-Element gestaltet - Border Länge - Erledigt

                  Evan
                  1. 1
                    MrMurphy1
                    1. 0
                      Evan
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          Evan
                          1. 0
                            Gunnar Bittersmann
                            1. 0
                              Evan
                              1. 1
                                Gunnar Bittersmann
                                1. 0
                                  Der Martin
                                  1. 0
                                    Auge
                                  2. 0
                                    Gunnar Bittersmann
                                    • mobile
                          2. 0
                            marctrix
                      2. 0
                        Gunnar Bittersmann
                        1. 0
                          Evan
                  2. 0
                    Gunnar Bittersmann
                    • css
                    1. 0
                      Evan
                      1. 0
                        Gunnar Bittersmann
              2. 0
                Matthias Apsel
  5. 0

    Danke für die Hilfe

    Evan
    1. 0
      MrMurphy1
      1. -1
        Evan
        1. 0
          Gunnar Bittersmann
          1. 0
            Christian Kruse
          2. 0
            Evan
            1. 0
              Gunnar Bittersmann
              • meinung
      2. 0
        Matthias Apsel
        1. 0
          Evan
          1. 0
            Matthias Apsel
            1. 0
              JürgenB
              1. 0
                Camping_RIDER
                1. 0
                  JürgenB
                2. 0
                  Gunnar Bittersmann
                  • menschelei
                  1. 0
                    Camping_RIDER
                    1. 0
                      Tabellenkalk