Rechtecke mit Inhalt anordnen

  • Hallo,


    ich erstelle gerade eine Webseite und suche nach der besten Lösubg für folgende Situation:
    Ich möchte mehrere Rechtecke (Hochformat), mit jeweils einem Kreis und etwas Text. Der Kreis soll jeweils im oberen Bereich in der Mitte sein und ein Icon enthalten, der Text soll darunter sein (zentriert).
    Ich habe jetzt angefangen das ganze mithilfe von chrome Entwicklertool für den Laptop und fürs Handy zu bauen, allerdings habe ich jede Position einzeln festgelegt und bei verschiedenen Handygrößen verschieben sich natürlich die Abstände. Ich habe versucht mit Prozenten zu arbeiten, allerdings klappt das mit dem Kreis nicht.
    Wie kann ich das besser lösen und dann sich gleich für Tablet etc umbauen? Mit float (hatte ich kurz getestet, aber hatte wohl nen Fehler irgendwo, es ist nichts passiert) oder inline-Box?
    Auf dem Laptop sind zb 4 Rechtecke nebeneinander, auf dem Handy 2 und auf dem Handy im Querformat sollten es 3 sein usw...


    Vielen Dank und liebe Grüße
    Cara

  • Hallo


    Ohne deine Seite zu kennen können wir dir nicht konkret helfen.


    Die Kreise würde ich mit SVG erstellen.


    Mit HTML und CSS können Objekte nur einzeln auf einer Webseite verteilt werden. Bei unterschiedlichen Höhen ist float dabei besser als Flexbox oder Inline-Block.


    Wenn sich die Objekte mehr oder weniger selbsttätig anordnen sollen ist auch CSS-Columns einen Blick wert.


    Objekte automatisch anordnen ist auch unter dem Begriff "Masonry-Layout" bekannt. Danach kannst du ja mal suchen.


    Die üblichen Lösungen sind aber mit JavaScript, das haben viele Besucher zur Unterdrückung von unerwünschter Werbung häufig blockiert. Deshalb lasse ich von solchen Lösungen nach Möglichkeit die Finger.


    Da inzwischen die meisten Browser CSS-Grid beherrschen kannst du dich auch damit beschäftigen. Auch damit sollen sich Lösungen für dein Problem finden lassen. Siehe zum Beispiel


    https://www.drweb.de/css-grid-…sonry-aus-purem-html-css/


    Gruss


    MrMurphy

  • Hallo,


    vielen Dank für deine Antwort.
    Ich habe die ersten 2 Rechtecke mal hier gebaut, funktioniert das mit dem Link? https://thimble.mozilla.org/de…5c-436c-984f-f16d6435fa94 (mobil passt es noch nicht, da sollen 2 nebeneinander)


    SVG sagt mir jetzt erstmal nichts...


    Die Höhe der Rechtecke ist immer gleich, bzw sollte sich nur ändern, wenn sich die Bildschirmgröße ändert. Müsste ich jetzt einfach nur float left mit angeben bei meiner Seite oben?
    Am besten wäre es natürlich, wenn ich die Elemente für eine Bilschirmgröße anordne und sie sich dann je nach Gerät usw anpassen, ohne dass ich jede Position genau festlegen muss. Sollte das nicht klappen, wenn ich mit Prozenten und float arbeite? oder dann wirklich css Grid?
    Ich glaube ich habe irgendwo einen Verständnis/Denkfehler


    LG

  • Hallo


    Nein, der Link funktioniert nicht. Da muss man sich wohl anmelden, was ich aber nicht mache, da ich sonst bereits bei über tausend Anbietern angemeldet wäre, die mich Null interessieren und die auch nichts von mir wissen müssen.


    Es ist immer besser nur Dienste (auch Bilderdienste und ähnliche) zu benutzen, bei denen Dritte sich nicht anmelden müssen.


    Gruss


    MrMurphy

  • Hallo


    SVG ist ein Bildformat. SVG heißt übersetzt "Scalable Vector Graphics". Das ist ein bestimmtes Bildformat, bei dem die Bilder als Text gespeichert werden. Zudem ist es ohne Qualitätsverlust beliebig vergrößerbar (= skalierbar).


    SVG sollten (müssen?) mit der Endung .svg gespeichert werden.


    Für einen grünen Kreis kann der zugehörige Quelltext zum Beispiel folgendermaßen aussehen:



    Der Quelltext für ein Rechteck könnte zum Beispiel folgendermaßen aussehen:



    Ich habe mal ein Beispiel mit 4 Rechtecken erstellt. Größen und anderes können natürlich noch angepasst werden:


    Beispiel


    Gruss


    MrMurphy

  • Vielen Dank für deine Mühe und deine Hilfe! Da war ich ja scheinbar ganz weit weg von einer guten Lösung.


    Kann ich bei dem Kreis in SVG dann gleich auch jeweils ein Icon einfügen? Der Code für die SVG Datei kommt auch einfach oben in die html?


    Bei den Rechtecken, wofür genau brauche ich section, figure, object und article? Ich habe ja einfach mehrere divs genutzt.
    Du hast mit Prozent und rem gearbeitet, da muss ich mich dann wohl noch einlesen, genauso wie mit flex usw.


    Ich werde jetzt versuchen die Fehler zu beseitigen und dann mache ich mich wieder an die Rechtecke.


    LG Cara

  • Hallo


    Eine persönliche Einweisung sprengt den Rahmen des Forums.


    Zitat

    Bei den Rechtecken, wofür genau brauche ich section, figure, object und article?


    In HTML5 wurden neue Container für verschiedene Aufgaben neu eingeführt. Nach dem HTML5-Regeln sollen div-Container nur noch dann verwendet werden wenn es keine geeigneteren gibt. Nach dem Einsatz kannst du ja suchen, die Begriffe kennst du jetzt ja.


    Icons können auf verschiedene Art und Weise eingefügt werden, je nachdem, um welche es sich handelt. Allerdings wissen wir nicht welche du überhaupt verwenden willst.


    Gruss


    MrMurphy

  • Klar, ich lese mich natürlich selber ein. Dann meinst du das sollte klappen, wenn ich mit den verschiedenen containern und Prozenten arbeite? Ohne Css grid, flex box usw?



    Hier mal zwei Icons als Beispiele. Könnte ich auch einfach jeweils einen Kreis mit einem Icon zu einer Grafik verbinden? dann habe ich das Problem mit dem kreis nicht mehr und gleichzeitig passt die Position des Icons automatisch.


    LG Julia

  • Hallo


    Ich würde die Grafik einfach in die SVG einfügen. Ich habe mein Beispiel mal entsprechend erweitert.


    In der SVG muss nur nach der Kreis-Anweisung (circle) die Größe, die Position und der Pfad/Name des Bildes hinzugefügt wreden. Beim grünen Kreis zum Beipspiel


    Code
    1. <image x="249" y="260" width="102" height="81" xlink:href="index85_img_04.png" />


    Der gesamte Quelltext für den grünen Kreis mit der Grafik lautet also



    Gruss


    MrMurphy