Elemente positionieren: Welche Methode?

Hallo

Du bist leider teilweise falsch und leider teilweise veraltet informiert.

Der IE10 und alle noch älteren Browser werden in der Praxis nicht mehr verwendet. Daran ändert auch das ominöse Unternehmen nichts, dass regelmäßig auftaucht und noch ganz viele, wirklich und ernsthaft ganz viele, alte Rechner verwendet, die je nach Geschichte nicht ersetzt werden dürfen oder aus technischen Gründen nicht ersetzt werden können.

Geschichte wiederholt sich: Die Geschichte haben auch schon der IE6 und der IE8 mit der Einführung von neuen CSS-Techniken erlebt. Allen ist gleich: Erlogen von Webseitenerstellern, die mit den neuen CSS-Möglichkeiten überfordert sind. Darauf solltest du nicht reinfallen. Neutrale Statistiken wie die von Can I Use sind seriöser.

Alle drei von dir beschriebenen Methoden haben schlicht unterschiedliche Aufgaben. Deshalb können sie auch überhaupt nicht verglichen werden. Deshalb ist auch sachlich korrekt die CSS-Möglichkeiten jeweils gemäß ihrer Aufgabe einzusetzen.

Float ist und war nur dafür gedacht Text andere Elementen, in der Regel Bilder, umfließen zu lassen. Es wurde jahrelang für Layouts mißbraucht, da es keine besseren oder gar speziell für das Layout entwickelte CSS-Anweisungen gab. Mit der Einführung von Flexbox ist die Verwendung von Float zum Layouten deshalb sachlich falsch, der Mißbrauch von Float ist nicht mehr notwendig.

Flexbox kann schon seit zwei Jahren problemlos ohne Präfixe verwendet werden. Flexbox hat das Hauptproblem von vielen Webseitenerstellern nicht verstanden zu werden, die es deshalb mit den üblichen, aber falschen, Ausreden, ablehnen und verteufeln. Selbstverständlich können mit Flexbox auch komplizierte Grids erstellt werden. Wer etwas anderes behauptet hat Flexbox und seine Möglichkeiten nicht verstanden. Wobei komplizierte Grids den Zugang zu Webseiten erschweren und deshalb vermieden werden sollten.

CSS-Grid wird inzwischen (seit März letzten Jahres) von allen gängigen Browsern unterstützt. Leider nicht vom noch relevanten IE11 und älteren Edge-Versionen. Für die gibt es auch keine Abhilfen mit Präfixen. CSS-Grid wird sich trotzdem schneller als seinerzeit Flexbox durchsetzen, da es überforderte Webseitenersteller sehr an deren geliebte Tabellen erinnert. Allerdings lassen sich meist problemlos Fallbacks erstellen, so dass CSS-Grid auch heute schon eingesetzt werden kann.

Keine der drei genannten CSS-Anweisungen ist veraltet. Sie haben alle ihre Aufgaben und sollten auch entsprechend verwendet werden.

Wenn du mit Flexbox und CSS-Grid überfordert bist ist das dein Problem. Du kannst deine Webseiten gerne mit deinen Möglichkeiten erstellen.

Kritisch wird es aber, wenn überforderte Webseitenerstellern dritten Personen, die sich mit HTML und CSS noch nicht gut auskennen, Flexbox, CSS-Grid oder andere aktuelle CSS-Möglichkeiten unsachlich madig machen wollen, nur weil sie damit überfordert sind.

Gruss

MrMurphy

Hallo

Zitat

Auch dieses Grid, welches im Anhang skizziert ist, sodass es vom IE11 Browser unterstützt wird?

Ja. Die Frage zeigt dass du Flexbox überhaupt nicht kennst.

Aber du kannst natürlich das Layout mit Inhalt (jeweils unterschiedlich langen Sätzen) mit Float erstellen und vorzeigen, wenn du meinst, dass es mit Float einfacher zu erstellen ist. Einfach sachlich falsche Behauptungen aufzustellen bringt nichts.

Zitat

Wenn man Websiten erstellen muss, die auch im IE11 laufen sollen, dann muss man auf Grid ganz verzichten. Was soll man in diesem Fall tun? Also muss man doch, auf Float umsteigen?

Nein, auf Flexbox. Float wäre in diesem Fall sachlich falsch.

Zitat

Fakt ist aber wenn man ein CMS verwendet, dann ist CSS Grid schwerer wartbar als float.

Nein, genau umgekehrt. CSS-Grid und Flexbox erleichtern das Erstellen, Anpassen und Warten von Layouts.

Zitat

Amliebsten, würde ich auch lieber Grid und Flexbox verwenden.

Nichts hindert dich daran so auch loszulegen.

Für dein Layout schlage ich den folgenden HTML-Quelltext vor, erforderliche zusätzliche Container können natürlich noch hinzugefügt werden:

<body>
   <header class="pageheader">
      <h1>Wunschlayout</h1>
   </header>
   <main class="content">
      <section class="cards">
         <article>
            <p>1. Schwebe wie ein Schmetterling, steche wie eine Biene.</p>
         </article>
         <article>
            <p>2. Ich habe George Foreman beim Schattenboxen gesehen, und der Schatten hat gewonnen.</p>
         </article>
         <article>
            <p>3. Ich bin der König der Welt! Ich habe die Welt erschüttert.</p>
         </article>
         <article>
            <p>4. Ich werde das Kämpfen nicht vermissen, das Kämpfen wird mich vermissen.</p>
         </article>
         <article>
            <p>5. Zuhause bin ich ein netter Kerl, ich möchte aber nicht, dass die Welt das erfährt. Anständige Menschen, so habe ich herausgefunden, kommen nicht sehr weit.</p>
         </article>
         <article>
            <p>6. Ich bin so schnell, dass ich letzte Nacht, als ich das Licht im Hotelzimmer ausschaltete, schon im Bett lag bevor das Zimmer dunkel war.</p>
         </article>
         <article>
            <p>7. Boxen ist nur ein Job. Gras wächst, Vögel fliegen, Wellen schlagen an den Strand - ich verhaue Leute.</p>
         </article>
         <article>
            <p>8. Ich bin der Größte. Das habe ich schon gesagt bevor ich wusste, dass ich es tatsächlich bin.</p>
         </article>
         <article>
            <p>9. Ist das alles, was Du hast, George?</p>
         </article>
      </section>
   </main>
   <footer class="pagefooter">
      <p>Originaldiskussion: <a href="http://www.forum-hilfe.de/threads/58896-Elemente-positionieren-Welche-Methode">http://www.forum-hilfe.de/</a></p>
   </footer>
</body>

Dann haben wir beide die gleiche Grundlage. Das Ergebnis könnte dann folgendermaßen aussehen:

Du erstellst das Layout mit Float und ich mit Flexbox, anschließend vergleichen wir unser CSS. Dann kann sich jeder selbst ein Bild machen welche Lösung übersichtlicher ist. Wenn du möchtest können wir das Layout auch zusätzlich responsiv machen. Das sollte heutzutage in Zeiten von Smartphones und Tablets eigentlich selbstverständlich sein.

Gruss

MrMurphy

Hallo

Zitat

Mir wurde gesagt IE 11 hat noch einige Flexbox Bugs. Warum also Flexbox?

Weil die vermeintlichen Bugs meist problemlos vermieden werden können.

Zitat

Wenn man Inhalt 6 oder 3 aus dem Grid entfernt. Muss das Grid, dann nicht neu aufgesetzt werden?

Und für das viel kompliziertere Float gilt das nicht? Die erforderlichen Anpassungen bei Flaot sind viel komplizierter.

Zitat

Ehrlich gesagt, könnte ich das Layout mit float nicht erstellen.

Wie kommst du dann zu dem Ergebnis Float sei in der Anwendung einfacher als Flexbox oder CSS-Grid?

Webseiten ohne Inhalt oder mit sehr kurzem Inhalt oder sich wiederholendem gleichlangem Inhalt (Lorem ipsum ...) sind zum Testen nicht geeignet. Viele Probleme tauchen dann erst mit realem Inhalt auf. Dazu erstelle ich keine Beispiele.

Auch wenn dein Layoutwunsch praxisfremd ist kann ich dazu ein Beispiel geben, das mit Flexbox auch im IE11 funktioniert:

Zu diesem HTML:

<section class="wunschlayout">
         <article>
            <p>1. Schwebe wie ein Schmetterling, steche wie eine Biene.</p>
         </article>
         <article>
            <p>2. Ich habe George Foreman beim Schattenboxen gesehen, und der Schatten hat gewonnen.</p>
         </article>
         <article>
            <p>3. Ich bin der König der Welt! Ich habe die Welt erschüttert.</p>
         </article>
         <article>
            <p>4. Ich werde das Kämpfen nicht vermissen, das Kämpfen wird mich vermissen.</p>
         </article>
         <article>
            <p>5. Zuhause bin ich ein netter Kerl, ich möchte aber nicht, dass die Welt das erfährt. Anständige Menschen, so habe ich herausgefunden, kommen nicht sehr weit.</p>
         </article>
         <article>
            <p>6. Ich bin so schnell, dass ich letzte Nacht, als ich das Licht im Hotelzimmer ausschaltete, schon im Bett lag bevor das Zimmer dunkel war.</p>
         </article>
      </section>

dann dieses CSS

.wunschlayout {
         border: 1px solid black;
      }
      .wunschlayout article {
         padding: 0.5rem;
         border: 1px solid black;
      }
      .wunschlayout {
         display: flex;
         flex-wrap: wrap;
      }
      .wunschlayout article {
         flex-grow: 1;
         flex-shrink: 0;
      }
      .wunschlayout article:nth-child(1) {
         flex-basis: 95%;
      }
      .wunschlayout article:nth-child(1n+2) {
         flex-basis: 30%;
      }
      .wunschlayout article:nth-child(1n+5) {
         flex-basis: 45%;
      }

Gruss

MrMurphy