Meowsalot: Design umsetzung

Hallo,

es geht um diese Beispielseite: https://www.billbee.io/#funktionen

wie würdet ihr dieses umsetzten?

Bin ich auf dem richtigen Weg?

  • section mit einer id
  • H2 für die Hauptüberschrift
  • H3 für den darunterliegenden Text
  • den Strich, hmm gute Frage vielleicht mit einem DIV

Für die einzelne Bereiche habe ich noch überhaupt keine Idee. Vielleicht für jede Box ein DIV, welches dann float:left bekommt? Innerhalb dem Div dann wiederum zwei Divs? Im ersten das Bild, dieses bekommt wieder float:left, das andere für den Text neben dem Bild?

Bis bald!
Meowsalot (Bernd)

  1. Hallo

    es geht um diese Beispielseite: https://www.billbee.io/#funktionen

    Der sich drehende Kringel ist ja ganz schön, aber sonst ist da buchstäblich nichts.

    Aber mal so aus dem Gedächtnis.

    • section mit einer id
    • H2 für die Hauptüberschrift

    Liest sich schlüssig.

    • H3 für den darunterliegenden Text

    Handelt es sich um eine weitere, hierarchisch unterhalb der h2 anzusetzende Überschrift? Wenn ja, dann ja, ansonsten nicht.

    • den Strich, hmm gute Frage vielleicht mit einem DIV

    Wie wäre es mit einer <hr>, wenn damit Abschnitte logisch getrennt werden sollen (sehe ich ja nicht)? Wenn es nur um eine optische Trennung geht, gibt's da noch border-[top|bottom].

    Für die einzelne Bereiche habe ich noch überhaupt keine Idee. Vielleicht für jede Box ein DIV, welches dann float:left bekommt? Innerhalb dem Div dann wiederum zwei Divs? Im ersten das Bild, dieses bekommt wieder float:left, das andere für den Text neben dem Bild?

    Benutze float für das umfließen z.B. eines Bildes mit anderem Inhalt. Für das, was sich mir nach deinen Worten erschließt, ist display: flex oder grid geeignet.

    Tschö, Auge

    -- Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
    Kleine freie Männer von Terry Pratchett
    1. Hallo!

      Für das Umfliessen von Bildern in einem grid-container finde ich keine Lösung. float ist da ja wohl nicht richtig!!

      URL http://wentzell.eu/

      Schönen Sopnntag

      Karl-Heinz

      1. @@LAW-Web

        Für das Umfliessen von Bildern in einem grid-container finde ich keine Lösung. float ist da ja wohl nicht richtig!!

        Doch, für das Umfließen ist float genau richtig.

        URL http://wentzell.eu/

        Was soll da umflossen werden?

        LLAP 🖖

        -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Ein Bild innerhalb eines Grid-Items Karl-heinz

          1. @@LAW-Web

            Für das Umfliessen von Bildern in einem grid-container

            Was soll da umflossen werden?

            Ein Bild innerhalb eines Grid-Items

            Aha‽

            LLAP 🖖

            -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. @@Meowsalot

    Bin ich auf dem richtigen Weg?

    Nein.

    • H2 für die Hauptüberschrift

    Die Hauptüberschrift ist h1.

    • H3 für den darunterliegenden Text

    Die nächsten Überschriften wären dann h2.

    • den Strich, hmm gute Frage vielleicht mit einem DIV

    ?? Welcher Strich? Vermutlich border-top oder border-bottom einer Box.

    Für die einzelne Bereiche habe ich noch überhaupt keine Idee. Vielleicht für jede Box ein DIV, welches dann float:left bekommt?

    Nein. float ist kein Mittel zum Layouten. Dafür gibt es Grid und Flexbox.

    Innerhalb dem Div dann wiederum zwei Divs? Im ersten das Bild,

    Nein, du brauchst kein div um ein Bild.

    dieses bekommt wieder float:left

    Du willst nicht Text um das Bild fließen lassen, also ist float falsch. Siehe oben.

    LLAP 🖖

    -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  3. Hallo Meowsalot,

    es geht um diese Beispielseite: https://www.billbee.io/#funktionen

    Gutes Design. Ist das deine Seite? Wenn ja, würde mich interessieren wie das Animationsvideo erstellt wurde, manuell oder mit einer Software (welche?)?

    Gruss
    Henry

    -- Meine Meinung zu DSGVO & Co:
    „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“