Beiträge von MrMurphy

Hallo

Setz dich nicht mit solchen Tests unter Druck.

Die sind nur begrenzt aussagekräftig. Ich kann eine Schrottseite bauen die mit 3 x 100 abschneidet oder eine einwandfreie Seite, die nur mittelprächtig bewertet wird.

Viel wichtiger ist das Lernen der Grundlagen. Da heutzutage alle HTML-Elemente eine bestimmte Bedeutung haben muss man zunächst alle mit ihrer Bedeutung kennen. Die Zeiten von "Learning by doing" sind damit vorbei wenn korrekte fehlerfreie Webseiten erstellt werden sollen. Da hilft kein Test und keine Validierung.

Gruss

MrMurphy

Hallo

Ich habe mal ein Beispiel zum direkten Ausprobieren erstellt:

Beispiel Zähler mit CSS-Counter

Gruss

MrMurphy

Hallo

Zitat

Verträge oder Gesetze sind nach meinem Verständnis klassische Listen, findest Du nicht?

Nein, überhaupt nicht. Ganze Sätze bilden immer Texte. Listenpunkte hingegen zeichnen sich durch ein oder mehrere Stichworte aus.

So ist eine Gesetzliste immer eine Auflistung von mehreren Gesetzen, zum Beispiel alle Gesetze, die Webseitenersteller beachten müssen. Der Inhalt von Gesetzen sind aber Gesetzestexte.

Ich habe das Gefühl du hältst so eifrig an den geordneten Listen fest weil du unbedingt die Nummerierung der ol-Listen verwenden willst. Das führt bei HTML aber meist zu falschen Ergebnissen.

So ein Vorgehen hat mit HTML aber nichts zu tun.

Verwende für Gesetzestexte und AGB ganz normalen Text mit Überschriften und CSS-Counter. Damit verwendest du korrektes HTML und bist bei der Nummerierung viel flexibler.

Gruss

MrMurphy

Hallo

Kannst du mal ein paar Absätze nennen? Deine Angaben sind sehr abstrakt, besonders § 2. Wie tief soll die Verschachtelung gehen?

AGB sind vom Grunde her keine Listen sondern Texte, die der Übersichtlichkeit halber ganz oder teilweise nummeriert werden können.

Deshalb sehe ich Überschriften und Absätze als geeignete HTML-Elemente für AGB.

Gruss

MrMurphy

Hallo

In HTML5 haben alle Elemente eine Bedeutung, nach denen sie auch angewandt werden müssen um den HTML-Regeln zu entsprechen. Webseitenersteller dürfen sich nicht durch die Benennung in die Irre führen lassen.

So sagen die Elemente weder etwas über die Position im Quelltext noch in der Darstellung aus. Weder muss ein header "oben" stehen noch ein footer "unten". Es gibt nur wenige Ausnahmen für die eine bestimmte Reihenfolge festgelegt ist.

Auch für das gewünschte Aussehen sind die Elemente nicht ausschlaggebend. Das i-Element ist so zum Beispiel nicht für eine kursive Darstellung gedacht und das b-Element nicht für eine fette Schrift. Das sind nur noch die Browservorgaben, die Anfänger gerne in die Irre führen. Für das Aussehen ist ausschließlich CSS zuständig.

Es ist auch eindeutig festgelegt, dass das div-Element nur noch dann verwendet werden darf, wenn es keine passendere (speziellere) Elemente gibt.

Deshalb sind auch die Zeiten von "Learning by doing" zum Erlernen von HTML / CSS vorbei. Wer die Elemente nur ihrer Bezeichnung nach verwendet, ohne deren Aufgabe wirklich zu kennen, liegt häufig falsch.

Jeder kann natürlich seine Webseite erstellen wie er will und sie wird in der Regel auch mit falsch angewandten HTML-Elementen funktionieren.

Bloß darf er dann nicht erwarten für so eine Webseite gelobt zu werden.

Einige falsch angewandte Elemente haben Auswirkungen, die vom Webseitenersteller nicht erwartet werden. Immer wieder zum Beispiel das table-Element, das halt nur für Tabellendaten gedacht ist und sich entsprechend verhält, um die Tabellendaten vernünftig anzuzeigen. Daran ändert sich auch nichts wenn Webseitenersteller verzweifelt und mit vielen Ausrufezeichen Nicht-Tabellendaten zu Tabellendaten umdeuten wollen.

Gruss

MrMurphy

Hallo

Du solltest auch bedenken, dass das address-Element häufig falsch verwendet wird.

Das address-Element ist nur für den Namen und die Kontaktinformationen der Autoren (Erstellern) von Texten auf der Webseite gedacht. Kontaktinformationen sind nur die Daten, die benötigt werden, um mit dem Autor in Kontakt zu treten, also selten die gesamte Adresse, sondern in der Praxis meist nur der Name und / oder die E-Mail-Adresse und / oder die Telefonnummer und / oder die Internetseite von Autoren.

Für alle anderen Adressen oder Kontaktinformationen ist das address-Element nicht gedacht. Für die gibt es kein spezielles Element. Das address-Element ist also nicht für Adressen im Text oder von Werbepartnern oder vom Webseitenbetreiber oder ... gedacht.

Gruss

MrMurphy

Hallo

Du hast leider nicht geschrieben in wie weit du den HTML-Quelltext ändern kannt.

Auf dem Bild ist nur eine Überschrift zu erkennen, das h3-Element mit dem Inhalt "KONTAKTIERE UNS".

Am einfachsten wäre es dem h3-Element eine zusätzliche Klasse zuzuweisen und der dann die Schriftfarbe zuzuweisen.

Wenn nur Änderungen im CSS möglich sind kannst du dies über Selektoren erreichen, zum Beispiel :nth-last-of-type(). Das zusätzliche CSS sähe dann folgendermaßen aus:

.front-page-section:nth-last-of-type(1) .section-header h3 {
   color: white;
}

Gruss

MrMurphy

Hallo

Dann kann der Container natürlich auch quadratisch werden.

Der Code sind genau die von dir bereits verwendeten width- und height-Angaben mit vw und vh.

Gruss

MrMurphy

Hallo

Irgendwie willst du zwei Verhalten gleichzeitig, die nicht zusammen funktionieren können.

Entweder der Container passt sich an das Fenster an, dann ändert er aber zwangsweise auch sein Breiten- / Höhenverhältnis.

Oder das Verhältnis von Breite zu Höhe bleibt gleich, dann kann sich der Container aber nur entweder der Fensterbreite oder der Fensterhöhe anpassen.

Gruss

MrMurphy

Hallo

So ganz kann ich deinen Vorstellungen noch nicht folgen.

Schmeiß mal position, top, left, bottom und right raus. Dann bleibt die Box im Verhältnis zum Fenster immer gleich groß.

Gruss

MrMurphy

Hallo

So wie du es dir vorstellst funktioniert es leider nicht.

Um die Seite flexibel oder gar responsive zu bekommen muss die Grundlage stimmen.

Dazu gehört auf ein Layout mit position: absolute zu verzichten, zumal position: absolute nie für Webseitenlayouts gedacht war.

Zudem benutzt du Attribute, die bereits seit über 15 Jahren nicht mehr verwendet werden sollten.

Für deine Gestaltungswünsche solltest du die Möglichkeiten von HTML5 und CSS3 verwenden. Grade auch wenn du verschiedene Ausgabemedien berücksichtigen willst.

Für unterschiedliche Ausgabemedien müssen sich Container auch in ihrer Höhe anpassen können. Deshalb sollte in die Höhe von Containern nur in absoluten Ausnahmefällen eingegriffen werden. Die Höhe von Containern wird grundsätzlich von deren Inhalt bestimmt.

Zum Layout deiner Seite solltest du sie deshalb zunächst mit Inhalt füllen und dich mit Flexbox beschäftigen.

Zitat

Noch etwas - Ist es ratsam in diesem Fall einen Wrapper zu integrieren und was sollte ich dabei beachten?

Nein, Wrapper waren noch nie sinnvoll und sind fast immer überflüssig.

Gruss

MrMurphy

Hallo

Mit deiner Vorbildseite hast du leider eine denkbar ungeeignete erwischt.

Zitat

Wie kann ich am besten vorgehen

Die Erfahrung zeigt, dass zunächst die Grundlagen von aktuellem HTML und CSS gelernt werden sollten. Die Zeiten vom "Learning bei Doing" zum Erstellen von Webseiten sind schon lange vorbei.

Zitat

wie könnte ich so eine Seite am besten aufteilen?

Heutzutage sollten nur noch responsive Webseiten erstellt werden, die sich den aktuellen Bildschirmgrößen anpassen. Die Aufteilung geschieht mittels geeigneten Containern und die Anordnung der Container mit CSS.

Zitat

Oder gibt es statt div Boxen noch andere Möglichkeiten.

Bei HTML5 gibt es spezielle Container, die auch verwendet werden sollten, wie header, main, footer, nav, article, section und so weiter. div-Container sollten nur noch verwendet werden, wenn es keine geeigneteren Container gibt. Das ist in den Regeln zu HTML5 auch so festgelegt worden.

Die Anwendung der Container gehört zu dem erforderlichen Grundlagenwissen, um das zu lernen du kaum herumkommen wirst.

Gruss

MrMurphy

Hallo

Zitat

Wo bitte ist der Link "XXL-Bilder"?

Oben rechts im selbst erstellen HTML, also der Artikelbeschreibung, die etwas weiter unten beginnt.

Allerdings kenne ich die "neue Vorschau" nicht. In der Artikelbeschreibung funktioniert der Link offensichtlich. Deshalb kann ich leider nicht helfen.

Wobei Ebay schnell allergisch reagiert wenn auf Drittseiten verlinkt wird. Eventuell wird der Link deshalb auch in der Vorschau von Ebay absichtlich gesperrt.

Gruss

MrMurphy

Hallo

Am einfachsten indem du den Quelltextaufbau der anderen Seiten beibehältst. Also

<div class="description">
   Frühling läßt sein blaues Band...
   <br>- Frühlingsboten -
   <br>
   <p>
      <a href="../../photoalben.html"> zur Übersicht</a>
   </p>
</div>

durch

<div class="description">
   <p>Frühling läßt sein blaues Band...
      <br>- Frühlingsboten -
      <br>
      <a href="../../photoalben.html">zur Übersicht</a>
   </p>
</div>

ersetzt.

Gruss

MrMurphy

Hallo

Zitat

ich befürchte dass es soetwas garnicht gibt

Richtig.

Die Entwickler von HTML und CSS gehen davon aus, dass Texte zum Lesen durch die Besucher gedacht sind. Dabei ist es vollkommen unsinnig, wenn sich die Schriftgröße bei viel Text verkleinert. Zumal seit Jahren einer der größten Kritikpunkte der meisten User die zu geringe Schriftgröße vieler Webseiten ist.

Es gibt zwar Möglichkeiten an der Schriftgröße in deinem Sinne zu drehen, aber davon solltest du Abstand nehmen.

Gruss

MrMurphy

Hallo

Hast du den Cache gelöscht?

Ansonsten liegt das Problem wahrscheinlich an dem Teil des HTML/CSS, den du uns vorenthälst.

Gruss

MrMurphy

Hallo

Das liegt wahrscheinlich an deiner Viewport-Angabe

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">

Bei solchen Problemen sollte die durch die bewährte Angabe

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ersetzt werden.

Gruss

MrMurphy

Hallo

Die Steinzeittechnologie funktioniert nicht so wie du es dir vorstellst. Du bist wie bereits geschrieben auf dem falschen Dampfer.

Media Queries können keine Geräte erkennen. Deshalb gibt es für deine Vorstellungen keine Lösung.

Gruss

MrMurphy

Hallo

Zitat

Oder bin ich vollkommen auf dem falschen Dampfer?

Ja.

Die Media Queries wurden entwickelt als noch nicht klar war wohin die Reise überhaupt geht.

Als praktikabel haben sich bereits seit Jahren nur zwei Vorgehensweisen erwiesen:

@media only screen and (min-width: 0px) {
   }

bekannt als Mobile First

und

@media only screen and (max-width: 0px) {
   }

bekannt als Desktop First.

Jeweils im Zusammenhang mit

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Nicht alles, was in der Vergangenheit erdacht und entwickelt wurde hat sich in der Praxis als sinnvoll erwiesen. Es gibt inzwischen über 500 Displaygrößen, willst du für alle eigene CSS-Angaben erstellen? Dazu noch jeweils im Hoch- und Querformat?

Benutzer wollen nur hoch- und runterscrollen. Dafür muss sich die Webseite der Fensterbreite anpassen und in der Höhe entsprechend wachsen oder schrumpfen. Genau das kann mit den beiden Vorgehensweisen "Mobile First" und / oder "Desktop First" erreicht werden.

Gruss

MrMurphy

Hallo

Akkordeons sollten so weit wie möglich vermieden werden, da sie extrem benutzerunfreundlich sind und Barrieren darstellen.

Dein Akkordeon mit dem Bild funktioniert nicht, weil du ein Blockelement (div) innerhalb eines p-Elements gesetzt hast. Innerhalb von p-Elementen dürfen sich jedoch nur Inline-Elemente wie b oder i befinden.

Gruss

MrMurphy