Beiträge von MrMurphy

Hallo

Du kannst dem header doch eine weiße Hintergrundfarbe geben.

Gruss

MrMurphy

Hallo

Gib dem html oder dem body die Hintergrundfarbe.

Gruss

MrMurphy

Hallo

Dein Grundwissen ist leider veraltet.

Ein Layout wie von dir gewünscht ist mit HTML und CSS überhaupt nicht vorgesehen.

Zudem ist es in der Regel unsinnig. Wie soll sich die Seite zum Beispiel auf Smartphones verhalten? Künstliche Inhalte wie bei dir kommen zudem in der Praxis nicht vor. Auch Beispielseiten sollten mit konkreten Inhalten gefüllt werden.

Wenn du so ein Layout trotzdem erstellen willst solltest du dies mit aktuellem HTML und CSS erstellen.

Also auf height-Angaben, position-Angaben und Float verzichten und statt dessen Flexbox verwenden. Falls dir die Browserunterstützung ausreicht bietet sich auch CSS-Grid an.

Gruss

MrMurphy

Hallo

Dazu müssen wir die CSS-Angaben kennen, mit denen das Pseudoelement erzeugt wird.

Das übliche Vorgehen wäre:

1. Eine CSS-Datei für das eigene CSS erstellen.

2. Diese Datei wird im Quelltext nach allen anderen CSS-Dateien und -Angaben eingebunden.

3. Für das Pseudoelement wird der gleiche Selektor eingetragen ( = gleiche Spezifität) und der geänderte Text eingetragen.

Damit wird der originale Text am problemlosesten überschrieben.

Gruss

MrMurphy

Hallo

Ich habe deine div-Suppe zunächst nicht durchschaut. Ich habe mein CSS in meinem vorigen Beitrag korrigiert.

Gruss

MrMurphy

Hallo

.abc>div:nth-of-type(1)>div:nth-of-type(1) label {
         display: none;
      }

Gruss

MrMurphy

Hallo

Deine Quellcodeschnipsel helfen nicht weiter. Wenn man mehrmals nachfragen muss um überhaupt die wichtigen Angaben zu erhalten erhöht das nicht grade die Hilfsbereitschaft. Am besten wäre ein Link zur Seite.

Aus deinen Angaben kann nur gefolgert werden:

Dein Wissen über CSS ist veraltet.

Warum verwendest du id? Zum Layouten sind Klassen (class) gedacht.

Warum bekommt eine id die Bezeichnung "table"? Elementnamen sollten nicht für Bezeichnungen verwendet werden.

"float: left" und "display: inline" zusammen können nicht funktionieren. Float ist zudem nur dafür gedacht Text andere Elemente, meinst Bilder, umfließen zu lassen.

Auf "position"-Angaben solltest du verzichten. Die haben schon immer zu Problemen geführt und sind heute nur noch in Ausnahmefällen erforderlich. So eine Ausnahme entnehme ich deinen Angaben nicht.

Beschäftige dich mit Flexbox (display: flex).

Gruss

MrMurphy

Hallo

Nein.

Gruss

MrMurphy

Hallo

Ich sehe keine Tabelle.

Float wird verwendet wenn Text andere Container, in der Regel Bilder, umfließen soll. Für deine Wünsche ist es damit sachlich falsch.

Um Container nebeneinander auszurichten gibt es Flexbox display: flex; ). Oder CSS-Grid, bei dem die Browserunterstützung noch etwas mager ist.

Gruss

MrMurphy

Hallo

Du mißbrauchst das table-Element zum Layouten. Das ist sachlich falsch und verursacht in der Praxis unnötige Probleme.

Als HTML-Quelltext sehe ich

<figure>
   <img src="bild.png">
   <figcaption>Text</figcaption>
</figure>

Das Layout dann mittels CSS unter Anwendung von Flexbox ( display: flex; ).

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

Hallo

Fallbacks sind nur für Browser notwendig, die mit Flexbox nichts anfangen können. Dass der IE11 kein Fallback benötigt hat Arne Drews bereits geschrieben.

Wobei Fallbacks nicht die Aufgabe haben, das Layout in Nicht-Flexbox-Browsern auch nur ähnlich nachzustellen. Webseiten sollen nur ohne praktische Nachteile für die Besucher dargestellt werden.

Für Flexbox sind Fallbacks sehr einfach zu erstellen, wenn die Webseiten mit der Methode mobile-first erstellt werden.

Ein Tip: Du würdest mehr Erfolg und mehr Spass am Erstellen von Webseiten haben, wenn du nicht ständig Nachteile suchen sondern Vorteile anwenden würdest.

Gruss

MrMurphy

Hallo

Es kommt darauf an für wen die Webseite erstellt wird.

Die meisten Webseiten werden für ihre Besucher erstellt. In diesem Fall sollten alle Elemente einer Webseite benutzerfreundlich erstellt werden.

Jeder zunächst versteckte Inhalt, also auch Dropdown-Menüs, stellen eine Barriere dar, der grundsätzlich vermieden werden sollte und in der Regel auch kann. Benutzerfreundliche Webseiten haben keine versteckten Inhalte, also auch keine Dropdown-Menüs.

Wenn Webseitenersteller trotzdem Dropdown-Menüs erstellen wollen sollten die von möglichst vielen Besuchern erkannt und bedient werden können.

Hierbei haben viele Webseitenersteller das Problem, ihr Wissen auch von den Besuchern zu erwarten. Dabei können viele Personen zum Beispiel mit dem Hamburger-Symbol (drei waagerechte Streifen übereinander), wie mit vielen anderen Symbolen auch, nichts anfangen. Wenn ein zugeklapptes Dropdown-Menü deshalb nur durch das Hamburger-Symbol angezeigt wird, wird es von vielen Besuchern gar nicht erst erkannt, die restichen Webseiten bleiben ihnen verborgen. Das wollen die Webseitenbetreiber in der Regel nicht. Zu jedem Symbol gehört also zusätzlich eine ordentliche Beschriftung.

Weiterhin sollte das Dropdown-Menü mit allen Eingabegeräten benutzbar sein. Die Mehrheit der Besucher verwenden zum Beispiel heutzutage Touchscreen-Geräte, die überhaupt keine Hover-Effekte kennen. Dazu kommen dann noch Besucher, die Tastaturen, Joysticks oder Screenreader verwenden. Die können Dropdown-Menüs häufig überhaupt nicht aufklappen, selbst wenn sie diese erkennen. Dabei ist das technisch heutzutage kein Problem, dazu ist immer auch etwas JavaScript erforderlich. Reines HTML und CSS reichen für benutzerfreundliche Dropdown-Menüs nicht aus.

Nach Möglichkeit sollte auf Dropdown-Menüs also verzichtet werden. Wenn sie trotzdem verwendet werdens sollen sollten sie von möglichst vielen Besuchern erkannt und bedient werden können, nicht nur von der weiterhin schrumpfenden Minderheit der Maus-Benutzer.

Da du mit ziemlicher Sicherheit eine Tastatur verwendest ist mit der ein ganz schneller Test möglich. Du kannst einfach versuchen Dropdown-Menüs mit der Tastautur zu bedienen. Wenn das nicht funktioniert sind die Schrott.

Für mehr Hintergrundwissen als hier im Forum möglich kannst du zum Beispiel nach

dropdown-menu barrierefrei

suchen. Dann möglichst viele nachbauen (dabei lernst du am meisten) und nach den von mir genannten Kriterien ausprobieren. Der Tastaturtest dauert nur ein paar Sekunden.

Dann wirst du auch erkennen, dass das hier von dir verlinkte Dropdown-Menü ein Beispiel ist, wie man es nicht erstellen sollte.

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

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

Float ist überhaupt nicht für Layouts gedacht und hat zudem Nebenwirkungen. Zum Beispiel werden gefloatete Elemente aus dem Dokumentenfluß genommen. Float ist in diesem Zusammenhang also sachlich falsch und sollte nur Aufgaben übernehmen, für die es auch erstellt wurde. Nämlich damit Text andere Elemente, in der Regel Bilder, umfließt.

Ich habe mal eine Lösung mit aktuellem HTML und CSS erstellt:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <style type="text/css">
   body {
      display: flex;
      flex-wrap: wrap;
   }
   header,
   footer,
   nav,
   article {
      background-color: yellow;
      width: 100%;
      border-style: dotted;
      border-width: 1px;
      margin: 5px;
   }
   header {
      order: 1;
   }
   nav {
      width: 100px;
      order: 3;
   }
   article {
      width: calc(100% - 124px);
      order: 2;
   }
   footer {
      order: 4;
   }
   </style>
</head>
<body>
   <header>Überschrift</header>
   <nav>Navigation...</nav>
   <article>Inhalt...</article>
   <footer>Fußzeile</footer>
</body>
</html>

In der Praxis werden noch ein paar zusätzliche Angaben erforderlich sein, aber ich habe nur die notwendigen Angaben zur Lösung der Aufgabe verwendet.

Gruss

MrMurphy

Hallo

Du könntest diesen Teil des CSS

/*.navigation*/
   @media all {
      .navigation {
         background-color: #63B8FF;
         padding: 0.5rem;
         margin: 0.5rem 0rem;
      }
      .navigation p {
         text-align: center;
      }
      .navigation a {
         color: #FF0000;
         font-weight: bold;
      }
   }
   @media only screen and (min-width: 1000px) {
      .navigation {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(250px - 1rem - 2px - 0rem);
      }
   }

zum Beispiel durch folgenden, erweiterten, ersetzen:

/*.navigation*/
   @media all {
      .navigation {
         background-color: #63B8FF;
         padding: 0.5rem;
         margin: 0.5rem 0rem;
      }
      .navigation p {
         text-align: center;
      }
      .navigation a,
      .navigation a:visited {
         display: block;
         color: #FF0000;
         font-weight: bold;
         padding: 0.3rem;
         border: 1px solid black;
         border-radius: 0.3rem;
      }
      .navigation a:hover,
      .navigation a:active,
      .navigation a:focus {
         background-color: black;
         color: gold;
      }
   }
   @media only screen and (min-width: 600px) {
      .navigation {
         display: flex;
         flex-wrap: wrap;
         align-content: flex-start;
      }
      .navigation p {
         margin: 0.25rem 0.5rem ;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(50% - 0rem - 0px - 1rem);
      }
   }
   @media only screen and (min-width: 1000px) {
      .navigation {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(250px - 1rem - 2px - 0rem);
      }
      .navigation p {
         flex-basis: calc(100% - 0rem - 0px - 1rem);
      }
   }

Ich habe die Beispieldatei entsprechend erweitert.

Gruss

MrMurphy

Hallo

Mit Dreamweaver kenne ich mich nicht aus.

Gruss

MrMurphy

Hallo

Du musst die Datei in deinem Editor auch als UTF-8-Datei abspeichern. Das liegt also wahrscheinlich an deinen Editor-Einstellungen.

Das funktioniert in den Browsern sehr unterschiedlich, deshalb kann ich dazu keine Anleitung geben.

Du solltest auch eine UTF-8-Datei erhalten wenn du die Seite mit deinem Browser direkt speicherst und dann aufrufst oder bearbeitest.

Gruss

MrMurphy

Hallo

Zitat

Kann ich bitte den Code dafür bekommen?

Den habe ich in meinen vorherigen Beiträgen gezeigt.

Du kannst auch einfach den Quelltext des Beispiels in deinem Browser anzeigen lassen und komplett kopieren. Das gesamte CSS befindet sich im Quelltext (im head-Bereich) der HTML-Datei. Dann sollte die Seite lokal funktionieren und du kannst damit rumexperimentieren.

Das gesamte CSS kann (und sollte bei mehreren Seiten auch) in eine extra Datei ausgelagert werden. Es befindet sich innerhalb der style-Elemente im head-Bereich der HTML-Datei.

Gruss

MrMurphy