Der Martin: Boxen gestalten

Beitrag lesen

Hi,

Alternativ-Text

6 <article> in jedem Article gibt es eine <h2> für den Titel und ein <p> für den Inhalt. Das Bild (später Font Icon) und dem Kreis hmm gute Frage, vielleicht in ein eigenes <div>?

wieso ein extra div für das Bild? Ich würde es in der jeweiligen Überschrift als Hintergrundbild setzen. Die Ausrichtung der Überschrift (h2) und des Textes (p) mit etwas margin und/oder padding im jeweiligen Container abstimmen.
Ob article hier das richtige Element ist, kann ich nicht sagen, da sich mir die Semantik von HTML 5 in weiten Bereichen noch nicht erschließt.

Im responsiven soll es später so sein, dass je nachdem wie groß der Platz ist, die Blöcke sich umbrechen bis später irgendwann nur einer pro Zeile steht. Vielleicht kann ich hier auch Flex-Box verwenden?

Es könnte auch viel einfacher gehen: Die einzelnen Blöcke als inline-Block formatieren. Dann ergibt sich das mit dem Umbruch je nach verfügbarer Breite von selbst. Eventuell für das übergeordnete Element ein max-width setzen.

So long,
 Martin

--
Logik ist die Theorie, Chaos die Praxis.
0 111

Design nachbauen

Carmen
  • css
  • html
  1. 1
    MrMurphy1
  2. 1
    Gunnar Bittersmann
    1. 0
      Christian Kruse
      • menschelei
      1. 0
        Felix Riesterer
        1. 0
          Christian Kruse
          1. 0
            Felix Riesterer
  3. 0

    Versuch - Nummer 1

    Carmen
    1. 0
      Carmen
      1. 0
        Gunnar Bittersmann
        1. 0
          Carmen
          1. 0
            Gunnar Bittersmann
            • css
            1. 0
              Carmen
              1. 0
                Gunnar Bittersmann
            2. 0
              Carmen
              1. 0
                MrMurphy1
                1. 0
                  Carmen
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Carmen
                      1. 0
                        Christian Kruse
                        1. 0
                          Carmen
                      2. 1
                        Gunnar Bittersmann
                2. 0
                  Christian Kruse
              2. 1
                Matthias Apsel
      2. 0
        MrMurphy1
        1. 0
          Carmen
          1. 0

            Versuch - Keine OnePage

            Carmen
    2. 0
      Gunnar Bittersmann
      • html
  4. 0

    Neuer Versuch

    Carmen
  5. 0
    Carmen
    1. 0
      Der Martin
      1. 0
        Carmen
        1. 0
          MrMurphy1
          1. 0
            Carmen
          2. 0
            Felix Riesterer
          3. 0
            Gunnar Bittersmann
            • html
        2. 0
          Gunnar Bittersmann
          1. 0
            Carmen
            1. 0
              Gunnar Bittersmann
  6. 0

    Boxen gestalten

    Carmen
    1. 0
      Carmen
    2. 0
      Der Martin
      1. 0
        Carmen
        1. 0
          Gunnar Bittersmann
          • html
          1. 0
            Carmen
            1. 0
              Gunnar Bittersmann
    3. 0
      Gunnar Bittersmann
      1. 0
        Carmen
        1. 0
          Gunnar Bittersmann
          • html
          1. 0
            Carmen
            1. 0
              Der Martin
              1. 0
                Carmen
                1. 0
                  Matthias Apsel
                  1. 1

                    Lorem brimborium

                    Auge
                    • html
                    • meinung
                    1. 0
                      Christian Kruse
                      1. 0
                        Der Martin
                        1. 0
                          Christian Kruse
                          1. 0
                            dedlfix
                            1. 0
                              Christian Kruse
                        2. 0
                          Auge
                    2. 3
                      Gunnar Bittersmann
                      1. 0
                        Matthias Apsel
                        1. 0
                          Thomas
                          • meinung
                          1. 1
                            Gunnar Bittersmann
                          2. 0
                            Tabellenkalk
                            1. 0
                              Thomas
                              1. 0
                                Auge
                              2. 0
                                Julius
                              3. 0
                                Gunnar Bittersmann
                                1. 0
                                  Auge
                                2. 0
                                  Thomas
                                  1. 0
                                    Christian Kruse
                      2. 0
                        Auge
                        1. 0
                          Matthias Apsel
                          1. 0
                            Auge
                            1. 1
                              Matthias Apsel
                              1. 0
                                Auge
                              2. 0
                                Julius
                                1. 1

                                  Copyright für UN-Material

                                  Matthias Apsel
                                  • sonstiges
                                  1. 0
                                    Julius
                                    • recht
                                    • sonstiges
                                    1. 1
                                      Auge
                                    2. 1
                                      Matthias Apsel
                                  2. 0
                                    Matthias Apsel
                        2. 0
                          Der Martin
                          1. 0
                            Auge
                            1. 0
                              Matthias Apsel
                            2. 0
                              Der Martin
                    3. 0
                      Julius
                      1. 0
                        Auge
                        • meinung
                        1. 0
                          Julius
                    4. 0
                      Gunnar Bittersmann
                      • meinung
                      • typografie
                      1. 1
                        dedlfix
                        1. 0
                          Der Martin
                          1. 0
                            Auge
                          2. 0
                            dedlfix
                            1. 0
                              Der Martin
                            2. 0
                              Christian Kruse
                              1. 0
                                dedlfix
                                1. 0
                                  Christian Kruse
                                2. 0
                                  Der Martin
                                  1. 0
                                    Gunnar Bittersmann
                      2. 0
                        Auge
                        1. 0
                          Gunnar Bittersmann
                          1. 0
                            Auge
                            1. 0
                              Gunnar Bittersmann
                              1. 0
                                Matthias Apsel
                                1. 0
                                  Gunnar Bittersmann
                          2. 0
                            Tabellenkalk
                            1. 0
                              Gunnar Bittersmann
                              1. 0
                                Tabellenkalk
              2. 0
                Gunnar Bittersmann