Zur Navigation

CSS zur Positionierung - Mein Fehlschlag?

1 MarkusWi

Hallo alle zusammen,
auf meiner Webseite https://naturalstone.ch/ habe ich für die 8 Tätigkeitsfelder 8 Boxen mit Kurzbeschreibungen gemacht.

Eigentlich wäre meine Idee, dass die 8 Boxen alle fortlaufend erscheinen. Aber aus einem mir noch nicht verständlichen Grund ist die Box "Brunnen" separat auf einer Zeile.

Warum rutscht die Brunnen nicht nach links und die Mauersteine und Bodenplatten kommen eine Zeile höher hinter die Brunnen?
Und die Zäune und Kastanienholz bilden dann die letzte Zeile?

Was habe ich falsch gemacht?
Danke für jeden Hinweis, welcher zur Eliminierung meines Fehlers führen.

Viele liebe Grüsse

11.09.2022 09:57

2 Jörg

Das liegt wohl daran, dass die Boxen mit float aneinandergereiht werden und die Boxen unterschiedlich hoch sind. float ist eigentlich nur für das Umfließen von Inline-Elementen gut geeignet, für die Aneinanderreihung von Blockelementen empfiehlt sich eine Flexbox.

11.09.2022 10:21

3 MarkusWi

Wow, Super vielen mega Dank. Das war genau der Hinweis welcher zur perfekten Darstellung geführt hat. Und das an einem Sonntag. Wow, ich bin begeistert. Danke vielmals.

11.09.2022 14:23

... 1 Monat später ...

4 MarkusWi

Guten Morgen,
ich war ja total begeister von Deiner Lösung auf meiner Seite https://NatruralStone.ch . Sie hatte genau gemacht, was ich beabsichtigt hatte. Somit legte ich mich beruhigt schlafen...

Doch dann war ich auf einem Anderen Computer, und was muss ich da sehen? Die Boxen sind jetzt ALLE untereinander. Nicht mal die ersten beiden sind nebeneinander.
Hyperfentilierend rannte ich zu dem Computer an welchem ich das getestet hatte. Und da sind alle sauber NEBENEINANDER.
Ok, ein Reboot tut immer goot... Cash leeren, ein Tag warten...
Aber noch immer, je nach Computer unterschiedliche Darstellung...

Hier die falsche / ungewünschte Darstellung


Und hier die gewünschte Darstellung


Was mache ich falsch? Warum ist das auf zwei unterschiedlichen Computer anders?

Vielen lieben Dank für Nervenberuhigende Antworten.
Gruss Markus

14.10.2022 10:10

5 Jörg

Sie hatte genau gemacht, was ich beabsichtigt hatte.

In welchem Browser, Internet Explorer?

Eine Zusammenfassung "display: wrap" gibt es im Standard-CSS nicht. So sollte es funktionieren:

div.mnuProdukte {
  display: flex;
  flex-wrap: wrap;
  max-width: 850px;
}

14.10.2022 10:19

1 Forenmitglied fand diesen Beitrag gut

6 MarkusWi

Hui, aber Hallo, "Jörg der Zurückbringer der Glücksgefühle!"
Sag, Du bist ja extrem schnell, hast Du keine Angst vor einem BurnOut? Wenn Du einen Platz zur Entspannung brauchst, bist Du bei mir im Tessin herzlichst eingeladen zu einem DeTox Aufenthalt...

Vielen lieben Dank
Gruss Markus

14.10.2022 10:26

7 Jörg

Du hast das Posting zum richtigem Zeitpunkt abgesetzt :) Ich erhalte bei neuen Beiträgen eine Benachrichtigung. Da ich in dem Moment nicht mit etwas wichtigerem beschäftigt war und es sich um eine einfachere Frage gehandelt hat, habe ich diese gleich beantwortet.

14.10.2022 11:20

1 Forenmitglied fand diesen Beitrag gut

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]