Rechtecke mit Inhalt anordnen

Cara94

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

MrMurphy

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-layou…purem-html-css/

Gruss

MrMurphy

Cara94

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/anonymous/6…4f-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

MrMurphy

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

Cara94

Weißt du einen guten? Dann würde ich es natürlich mit einem anderen machen und dann den neuen Link einstellen.

Cara94

Dann doch so, hier die Seite, es werden insgesamt 8 Rechtecke.
Bei einer gewissen Fenstergröße schiebt es mir auch das zweite Rechteck ein bisschen nach unten.

https://www.horse-log.net/login/

Bandit

Du hast da sehr viele Fehler im HTML-Code, die du erst einmal beseitigen solltest: https://validator.w3.org/nu/?doc=https%….net%2Flogin%2F

Cara94

Hallo,
der Code bis auf die Rechtecke ist nicht von mir... wirklich schlimm sind aber nur die Error Meldungen, oder?

Bandit

Auch Warnings sollte man vermeiden.

Cara94

Ich habe Angst jetzt etwas kaputt zu machen, wenn ich versuche die Fehler zu beseitigen...

Bandit

Ich habe mir die einzelnen Fehler nicht genauer angesehen, aber es kann dir durchaus passieren, dass durch einen Fehler dein Layout zerdroschen wird. Wer hat die Seite denn erstellt und wieso strickst du daran rum?

Cara94

Die Seite habe ich über upwork erstellen lassen. Die Loginseite wollte ich jetzt selber fertig erstellen.

Cara94

Sollte ich das versuchen auszubessern?

Hat jemand eine Idee zu den Rechtecken? Ich weiß nicht wo ich ansetzen soll... inside-Box, css grid,...?

Arne Drews

Du solltest definitiv die Fehle beseitigen.
Es macht keinen Sinn, etwas anpassen zu wollen, wenn Fehler von anderer Stelle evtl. für die Probleme sorgen.

Du sagst, dass Du Dir die Seite hast erstellen lassen?
Wenn Du dafür bezahlt hast, darfst Du dafür auch zumindest nährungsweise valides HTML verlangen.

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:

XML

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="pfad/name.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg 
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   baseProfile="full"
   width="600px"
   height="600px"
   viewBox="0 0 600 600"
   preserveAspectRatio="xMinyMin"
   >
   <circle cx="300" cy="300" r="300" fill="#81d742" />
</svg>

Alles anzeigen

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

Code

<section class="card">
            <figure>
               <object 
                  data="index85_img_01.svg" 
                  type="image/svg+xml"
               >
               </object>
            </figure>
            <div>
               <h2>Trainingsplan</h2>
               <p>Document and plan your training and common work with your horse.</p>
            </div>
         </section>

Alles anzeigen

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

Beispiel

Gruss

MrMurphy

Cara94

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

MrMurphy

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

Cara94

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

MrMurphy

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

<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

XML

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="pfad/name.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg 
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   baseProfile="full"
   width="600px"
   height="600px"
   viewBox="0 0 600 600"
   preserveAspectRatio="xMinyMin"
   >
   <circle cx="300" cy="300" r="300" fill="#81d742" />
   <image x="249" y="260" width="102" height="81" xlink:href="index85_img_04.png" />
</svg>

Alles anzeigen

Gruss

MrMurphy

Cara94

Hallo,

vielen Dank!
Bekomme ich das dann auch ohne den weißen Rand hin? Also quasi nur das schwarze Symbol auf dem grünen Hintergrund?

LG
Julia

Tags