Beiträge von MrMurphy

Hallo Busdriver

Dein Ansatz ist leider teils veraltet und teils auch sachlich falsch.

So ist XHTML bereits im Jahr 2008 offiziell begraben worden. Aktuelle Seiten sollten deshalb nur noch mit HTML5 erstellt werden.

Zum guten Stil gehört es Bilder so vorzubereiten, das sie in der größten gewünschten Größe eingelesen werden. Statt den Bildern per CSS eine Breite von 300px zuzuweisen sollten sie besser auf 300px Breite zugeschnitten werden. Das vermeidet grade auch im responsiven Design von vornherein viele Probleme.

float dient dazu um Text andere Elemente (meist Bilder) umfließen zu lassen. Float für andere Layoutaufgaben zu mißbrauchen ist bereits seit mehreren Jahren nicht mehr notwendig und sachlich falsch.

Nur um ein paar Beispiele zu nennen.

Ich würde zu diesem HTML

<section class="bilderreihe">
         <figure>
            <img src="http://lorempixel.com/300/150/transport/5" alt="Beispielbild">
         </figure>
         <figure>
            <img src="http://lorempixel.com/300/150/city/3" alt="Beispielbild">
         </figure>
         <figure>
            <img src="http://lorempixel.com/300/150/transport/2" alt="Beispielbild">
         </figure>
      </section>

dieses CSS verwenden

body {
         background-color: #9900ff;
      }
      .bilderreihe {
         background-color: white;
         padding: 0.8rem;
         margin: 2.5rem 3rem;
         display: flex;
         justify-content: space-between;
      }
      .bilderreihe figure {
         max-width: 33.33%;
      }

Eine komplette Beispielseite sieht dann so aus:

Beispielseite

Gruss

MrMurphy

Hallo

Listen brauchst du dazu nicht.

Zu dem HTML

<nav class="navigation">
            <a href="">Hamburg</a>
            <a href="">Paris</a>
            <a href="">London</a>
            <a href="">Madrid</a>
         </nav>

dieses CSS

/*.navigation*/
   @media all {
      .navigation {
         margin-bottom: 1rem;
         display: flex;
         justify-content: center;
      }
      .navigation a {
         color: white;
         padding: 0.7rem 0.3rem;
      }
      .navigation a:focus,
      .navigation a:active,
      .navigation a:hover {
         background-color: gold;
      }
   }

Ich habe mein Beispiel dazu angepasst.

Gruss

MrMurphy

Hallo

Du hast nach dem Grundgerüst gefragt. Das ist im üblichen HTML-/CSS-Sprachgebrauch der HTML-Quelltext im body-Bereich.

Wenn du mit Fachbegriffen um dich schmeisst solltest du dich vorher über deren Bedeutung informieren. Sonst wird die Verständigung schwierig.

Wer um ein Grundgerüst bittet will das selbst mit seinem eigenen CSS gestalten.

/*Basisangaben*/
   @media all {
      .navigation,
      .suche,
      .logo,
      .content,
      .sidebar {
         background-color: #B0D19A;
         color: white;
         border-radius: 0.3rem;
      }
      .pageheader,
      .contentwrapper {
         max-width: 1000px;
         margin: 1rem auto;
      }
   }


   /*.pageheader*/
   @media all {
      .pageheader {
         display: flex;
      }
      .pageheader .pageheaderhilfscontainer {
         margin-right: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 1px;
      }
      .pageheader .logo {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 250px;
      }
   }


   /*.navigation*/
   @media all {
      .navigation {
         text-align: center;
         padding: 0.5rem 1rem;
         margin-bottom: 1rem;
      }
   }


   /*.suche*/
   @media all {
      .suche {
         text-align: center;
         padding: 0.5rem 1rem;
      }
   }


   /*.logo*/
   @media all {
      .logo {
         display: flex;
         justify-content: center;
         align-items: center;
      }
   }


   /*.contentwrapper*/
   @media all {
      .contentwrapper {
         display: flex;
      }
   }


   /*.content*/
   @media all {
      .content {
         padding: 2rem;
         margin-right: 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 1px;
      }
   }


   /*.sidebar*/
   @media all {
      .sidebar {
         padding: 2rem 2rem 10rem 2rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(250px - 4rem - 0px - 0rem);
      }
   }

Und die Beispielseite zur direkten Ansicht

Beispielseite

Gruss

MrMurphy

Hallo

Zitat

mir würde das Grundgerüsst also die Anordnung der Boxen schon reichen

<body>
   <header class="pageheader">
      <div class="pageheaderhilfscontainer">
         <nav class="navigation">
            <p>Links nebeneinander mittig</p>
         </nav>
         <div class="suche">
            <p>Suche im Web mit Button</p>
         </div>
      </div>
      <figure class="logo">
         <figcaption>Logo<br>als Bild<br>mit Link</figcaption>
      </figure>
   </header>
   <div class="contentwrapper">
      <main class="content">
         <p>Inhalt</p>
      </main>
      <aside class="sidebar">
         <p>noch mehr Links untereinander mit hover und unterschiedliche Icons vor die Links</p>
      </aside>
   </div>
</body>

Gruss

MrMurphy

Hallo

Zitat

aber was sollte man denn dann benutzten ?

Vorlagen mit aktuellem HTML und CSS. Das klingt für Anfänger natürlich sehr theoretisch. Aber durch ein paar einfache Kontrollen lassen sich Seiten mit veraltetem Quelltext ganz gut aussortieren.

1. Die HTML-Datei sollte mit dem Doctype

<!DOCTYPE html>

in der ersten Zeile beginnen.

2. Im body-Bereich sollten die Elemente (Container) header, nav, main und footer verwendet werden. div-Elemente sollten nur sehr selten verwendet werden.

3. Für das CSS sollte hauptsächlich class verwendet werden. id sollte die große Ausnahme sein. Das #-Zeichen sollte im CSS also möglichst überhaupt nicht vorkommen.

4. Im CSS sollte Flexbox

display: flex;

vorkommen. Das ist bereits seit mehreren Jahren die korrekte und meist sinnvollste Methode zur Anordnung von Containern und Elementen.

5. Aktuelle Webseiten sollten heutzutage responsive sein. Bei einer Verringerung der Fensterbreite sollten sich die Elemente so anpassen, dass nicht seitwärts gescrollt werden muss.

Das sind fünf Anhaltspunkte für Webseiten mit aktuellem HTML / CSS, die zudem sehr leicht überprüft werden können.

An den fünf Anhaltspunkten lassen sich auch veraltete Anleitungen und Videokurse erkennen, die leider noch zu Hauf im Internet kursieren.

Gruss

MrMurphy

Hallo

Der Link ist schon am Besten. Ich war mir nur nicht so sicher ob dein Link richtig war und ich an der richtigen Seite herumdoktore. Der verlinkte Datei ist offensichtlich das Free-Design mit Inhalt.

Da ich richtig war habe ich die Lösung bereits beschrieben.

height-Angaben sollten grundsätzlich unterbleiben. Der Inhalt von Containern wird durch ihren Inhalt bestimmt. Häufig werden wie in dem Beispiel durch height-Angaben Fehler an anderer Stelle vertuscht.

In der Navigation werden die li-Elemente durch falsche oder fehlende clear-/clearfix-Angaben aus dem Dokumentenfluß genommen. In der Navigation kann ein Clearfix mit der overflow-Methode verwendet werden.

Ersetze also

#nav {
	padding:0;
	width:910px;
	background:#008DBC url(images/bg_nav.png) repeat-x bottom;
	padding:9px 0 10px 20px;
	-moz-border-radius:10px;
	color:#fff;
	height:12px;
	margin:15px 0;
}

durch

#nav {
	padding:0;
	width:910px;
	background:#008DBC url(images/bg_nav.png) repeat-x bottom;
	padding:9px 0 10px 20px;
	-moz-border-radius:10px;
	color:#fff;
	overflow: hidden;
	margin:15px 0;
}

Es hat sich bewährt Schriftgrößen nur direkt den betroffenen / gewünschten Elementen zuzuweisen. In deinem Fall dem a-Element in #nav. So kann die Schriftgröße an anderer Stelle kein Unheil anrichten und wird selbst nicht durch andere Schriftgrößenangaben gestört.

Füge also zu

#nav a {
	color:#fff;
	text-decoration:none;
	font-weight:normal;
}

die Schriftgröße hinzu:

#nav a {
	color:#fff;
	text-decoration:none;
	font-weight:normal;
	font-size: 18px;
}

Und noch ein Rat: Benutze das Free-Design nicht um HTML / CSS zu lernen oder eine Webseite zu erstellen. Dazu ist der Quelltext zu veraltet. Die HTML-Version ist zum Beispiel XHTML, welches bereits 2008 offiziell begraben wurde und seitdem nicht mehr verwendet werden sollte.

Gruss

MrMurphy

Hallo

Zitat

dann verutsch mir die Schrift irgendwie und die Navi sieht komisch aus

Mit solchen Fehlerbeschreibungen können wir wenig anfangen.

Meinst du die Navigation von dem blue-hosting?

Die Navigation enthält gleich mehrere Problemfälle.

Zunächst wird gefloatet, ohne sinnvoll zu clearen. Dadurch wird die Liste aus dem Dokumentenfluß genommen und übergeordnete Container können nicht mehr darauf reagieren.

Zusätzlich hat das umgebende div#nav eine Höhe von von 12px. Da kann natürlich keine 18px Schrift hineinpassen. Wenn du Größenangaben ändern willst musst du also immer auch nachschauen, ob alle umgebenden Container dies überhaupt zulassen. Und die Größe der umgebenden Container gegebenenfalls anpassen.

Oder handelt es sich um eine ganz andere Datei? Ich weiß jedenfalls nicht was ich herunterladen soll. Ich will auch gar nichts herunterladen.

Gruss

MrMurphy

Hallo

Soll das zweimal derselbe Link sein?

Gruss

MrMurphy

Hallo

Ich würde zu dem HTML

<section class="cards">
         <article class="card">
            <figure>
               <img src="http://lorempixel.com/120/120/nature/1" alt="Beispielbild">
            </figure>
            <section>
               <h3>Muhammad Ali</h3>
               <p>Boxen ist nur ein Job. Gras wächst, Vögel fliegen, Wellen schlagen an den Strand - ich verhaue Leute.</p>
            </section>
         </article>
         <article class="card">
            <figure>
               <img src="http://lorempixel.com/120/120/nature/2" alt="Beispielbild">
            </figure>
            <section>
               <h3>Helmut Schmidt</h3>
               <p>Sicheres Auftreten bei völliger Ahnungslosigkeit.</p>
            </section>
         </article>
         <article class="card">
            <figure>
               <img src="http://lorempixel.com/120/120/nature/5" alt="Beispielbild">
            </figure>
            <section>
               <h3>Paul Breitner</h3>
               <p>Paul Breitner: Da kam dann das Elfmeterschießen. Wir hatten alle die Hosen voll, aber bei mir lief's ganz flüssig.</p>
            </section>
         </article>
         <article class="card">
            <figure>
               <img src="http://lorempixel.com/120/120/nature/10" alt="Beispielbild">
            </figure>
            <section>
               <h3>Willi "Ente" Lippens</h3>
               <p>Schiri zeigt gelb und sagt: "Ich verwarne Ihnen!". Ente: "Ich danke Sie!". Schiri zeigt rot.</p>
            </section>
         </article>
         <article class="card">
            <figure>
               <img src="http://lorempixel.com/120/120/nature/3" alt="Beispielbild">
            </figure>
            <section>
               <h3>The Big Bang Theory</h3>
               <p>Penny: "Darf ich dir eine Frage stellen?" Sheldon: "Angesichts deiner minderwertigen Schulbildung rate ich dir, mir so viele Fragen wie möglich zu stellen."</p>
            </section>
         </article>
         <article class="card">
            <figure>
               <img src="http://lorempixel.com/120/120/nature/8" alt="Beispielbild">
            </figure>
            <section>
               <h3>Ausrede</h3>
               <p>Die Aufgabe war mir zu einfach, da hab' ich eine schwerere angefangen, aber die konnte ich dann nicht lösen.</p>
            </section>
         </article>
         <article class="card">
            <figure>
               <img src="http://lorempixel.com/120/120/nature/7" alt="Beispielbild">
            </figure>
            <section>
               <h3>Han Solo</h3>
               <p>Ohne weitere weibliche Ratschläge müssten wir es eigentlich schaffen, hier wieder lebend raus zukommen</p>
            </section>
         </article>
      </section>

dieses CSS verwenden:

/*.cards*/
   @media all {
      .cards {
         background-color: #CFD6DC;
         padding: 0.5rem;
      }
   }
   @media only screen and (min-width: 1000px) {
      .cards {
         display: flex;
         flex-wrap: wrap;
      }
   }


   /*card*/
   @media all {
      .card {
         background-color: gold;
         box-shadow: -5px 5px 5px hsla(0, 0%, 50%, 0.5);
         padding: 0rem 1rem 1rem 0rem;
         margin: 1rem 0.5rem 1rem 0.5rem;
         display: flex;
      }
      .card figure {
         margin-top: 1rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 8rem;
         display: flex;
         justify-content: center;
         align-items: center;
      }
      .card img {
         border-radius: 0.5rem;
      }
      .card>p {
         color: white;
         font-size: 4rem;
         padding: 0rem 2rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 3rem;
         display: flex;
         justify-content: center;
         align-items: center;
      }
      .card section {
         background-color: white;
         padding: 0.5rem 1rem;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 1rem;
      }
   }
   @media only screen and (min-width: 1000px) {
      .card {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(50% - 1rem - 0px - 1rem);
      }
   }
   @media only screen and (min-width: 1400px) {
      .card {
         flex-basis: calc(33.33% - 1rem - 0px - 1rem);
      }
   }


   /*card background*/
   @media all {
      .card:nth-child(4n+1) {
         background-image: linear-gradient(
            180deg,
            #7E7C7D,
            #736E6F
         );
      }
      .card:nth-child(4n+1) h3 {
         color: #736E6F;
      }
      .card:nth-child(4n+2) {
         background-image: linear-gradient(
            180deg,
            #1FDBAB,
            #04D7A0
         );
      }
      .card:nth-child(4n+2) h3 {
         color: #04D7A0;
      }
      .card:nth-child(4n+3) {
         background-image: linear-gradient(
            180deg,
            #F1597F,
            #F14871
         );
      }
      .card:nth-child(4n+3) h3 {
         color: #F14871;
      }
      .card:nth-child(4n+4) {
         background-image: linear-gradient(
            180deg,
            #FBCE58,
            #FAC22F
         );
      }
      .card:nth-child(4n+4) h3 {
         color: #FAC22F;
      }
   }

Und ein Beispiel direkt zum Ausprobieren:

Beispieldatei

Gruss

MrMurphy

Hallo

Du hast den Link zu der Seite vergessen.

Mit den Grafiken können wir nichts anfangen.

Gruss

MrMurphy

Hallo

aus deinen Angaben und deinem Quellcodeschnipsel lässt sich die Ursache deines Problems leider nicht mal ansatzweise nachvollziehen.

Wir benötigen am besten einen Link zu der Seite oder den gesamten HTML und CSS Quellcode.

Gruss

MrMurphy

Hallo

Mit Flexbox hast du die Lösung bereits an anderer Stelle angewandt.

Den li-Elementen gibst du

display: flex;
flex-direction: column;

auf den Weg.

Und den zweiten div (die haben wohl die Klasse metcamp_nav_item) innerhalb der li-Elemente

flex: 1;

Gruss

MrMurphy

Hallo

Zitat

oder gibt es hierfür auch andere wege?

Ja. HTML und CSS korrekt verwenden.

Das was du erstellst hat mit HTML / CSS nur am Rande zu tun. Deine Vorstellungen entsprechen Webseiten aus dem letzten Jahrtausend.

Wenn du Webseiten erstellen willst solltest du zunächst die Grundlagen vom aktuellen HTML / CSS lernen. Die Zeiten von "Learning by Doing" sind schon lange vorbei.

So sind Webseiten dafür ausgelegt Informationen weiterzugeben. Leere Container haben aber keine Informationen. Deshalb sind solche Webseiten auch zum Üben oder gar Lernen nicht geeignet. Ein Problem ist, das Leute die HTML / CSS falsch lernen große Schwierigkeiten haben, später auf aktuelles HTML / CSS umzuschwenken.

Wie Sailor bereits schrieb wird die Höhe von Elementen durch deren Inhalt bestimmt, nicht durch height-Angaben, welcher Art auch immer. Height-Angaben stören beim Layout. Die sollten also so weit wie irgend möglich vermieden werden.

Container mit height-Angaben verhalten sich anders als Container, deren Höhe durch ihren Inhalt bestimmt wird.

Zitat

Habe jetzt schon einiges probiert aber leider wird dass Hauptdiv nur vergrößert wenn ich einen Text, Tabelle einsetzte.

Zum Verständnis ist es sinnvoll überall die gleichen Bezeichnungen zu verwenden. Ich gehe mal davon aus, das du mit Hauptdiv das div.content meinst und nicht das überflüssige div.wrapper. Nebenbei solltest du von Beginn an die im aktuellen HTML bestimmten Containerbezeichnungen wie header, nav, main. ... verwenden. div ist nach den aktuellen HTML-Regeln nur noch für Container zulässig, für die es keine geeignetere Bezeichnung gibt.

Das Problem liegt an dem float, welches du falsch verwendest. Float ist dafür gedacht, das Text Grafiken umfließen kann. Du hast aber weder Text nach Grafiken.

Hintergrundinfo: Gefloatete Elemente werden automatisch aus dem Dokumentenfluß genommen. Gefloatete Elemente (also auch gefloatete div) haben damit keinen Einfluß mehr auf die sie umgebenden Container und können somit auch deren Höhe nicht verändern.

Das div.content hat nur durch das CSS eine Höhe. Wenn du min-height löscht schrumpft die Höhe auf Null und es wird nicht mehr angezeigt.

Verwende deshalb statt float besser Flexbox. Und fülle die Seite zuvor mit Inhalt.

Gruss

MrMurphy

Hallo

Das Problem ist die für Bootstrap erforderliche div-Verschachtelung, die in deinem Beispiel um weitere div-Container erweitert, dabei aber nicht konsequent mit System umgesetet wurde.

Zur Lösung deines Problems müssen die folgenden div berücksichtigt werden:

<div class="row">
         <div class="col-sm-6">
         </div>
         <div class="col-sm-6">
            <div class="row">
               <div class="row text-flex">
               </div>
               <div class="col-md-12 source">
               </div>
            </div>
         </div>
      </div>

Da das erste div nicht greifbar ist habe ich ihm eine zusätzliche Klasse gegeben. In diesem Fall flexbeispiel, wobei auch jeder andere Name gewählt werden kann, der noch nicht als Klasse vergeben ist. Also

<div class="row flexbeispiel">
         <div class="col-sm-6">
         </div>
         <div class="col-sm-6">
            <div class="row">
               <div class="row text-flex">
               </div>
               <div class="col-md-12 source">
               </div>
            </div>
         </div>
      </div>

Zunächst muss dafür gesorgt werden, dass die beiden div.col-sm-6 immer gleich hoch sind. Das geschieht mit den folgenden CSS-Anweisungen:

.flexbeispiel {
         display: flex;
      }
      .flexbeispiel>div {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 1px;
      }

Dann muss dafür gesorgt werden, dass das div.row im zweiten div.col-sm-6 die volle Höhe vom div.col-sm-6 einnimmt, dazu sind die folgenden CSS-Anweisungen erforderlich:

.flexbeispiel>div:nth-of-type(2) {
         display: flex;
         flex-direction: column;
      }
      .flexbeispiel>div:nth-of-type(2)>div {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 1px;
      }

Nun muss noch dafür gesorgt werden, das div.col-md-12 source an den unteren Rand des div.row im zweiten div.col-sm-6 gedrückt wird. Dazu sind folgende CSS-Anweisungen erforderlich:

.flexbeispiel>div:nth-of-type(2)>div {
         display: flex;
         flex-direction: column;
      }
      .flexbeispiel>div:nth-of-type(2)>div>div:nth-child(1) {
         margin-bottom: auto;
      }

Deine CSS-Angaben zu Flexbox müssen gelöscht werden, damit sie nicht stören.

Hier ein praktisches Beispiel mit meinen CSS-Angaben direkt zum Ausprobieren:

Beispielseite

Da Flexbox die Bootstrapangaben überschreibt wäre es insgesamt sinnvoller für das Beispiel komplett auf die Bootstrap-Klassen zu verzichten und den HTML-Quelltext übersichtlicher ohne die vielen unnötigen div neu zu erstellen.

Gruss

MrMurphy

Hallo

Wie DetlefM geschrieben hat war Handheld bereits tot, bevor es richtig geboren war. Kein Gerät mit Apple- oder Google-Betriebssystem hat die Angabe jemals unterstützt.

Gruss

MrMurphy

Hallo

Hier liegt offensichtlich eine vollkommen falsche Vorstellung vom "Responsive Design" vor.

Zitat

Mir schwebt die Idee vor Augen, einfach zwei Varianten der Webseite anzubieten

Solch ein Vorgehen soll mit "Responsive Design" unter anderem vermieden werden. Nebenbei: Auch Google verabscheut so ein Vorgehen und straft solche Seiten ab.

Durch "Responsive Design" werden Webseiten grade vollkommen unabhängig vom Endgerät erstellt.

Das praktische Vorgehen ist dadurch auch stark vereinfacht.

Zunächst wird der HTML-Quelltext im body-Bereich nach den aktuellen Regeln von HTML erstellt. Dabei spielt das Design überhaupt noch keine Rolle.

Erst danach wird das Design erstellt. Das Fenster wird einfach in der Breite geändert und das Aussehen des Inhalts wird dann bei Bedarf anpasst. Bewährt hat sich dabei das Vorgehen "Mobile First". Wobei mit "Mobile First" einfach ein schmales Fenster gemeint ist, kein Endgerät.

So erhält man innerhalb kürzester Zeit einen schlanken Quelltext mit einem vom Endgerät unabhängigen "Responsive Layout".

Gruss

MrMurphy

Hallo

Zitat

Da allerdings alle Browser, die ich zum Testen benutze, dieses Verhalten zeigen, gehe ich davon aus, dass es von W3.org so gewollt ist und in irgendeiner Spezifikation so drin steht.

Richtig.

Tabellen (table-Element) sind nur für Tabellendaten gedacht. Und bei denen ist das Verhalten durchaus gewollt.

Indem du das table-Element zum Layouten mißbrauchst schaffst du ein Problem, welches überhaupt nicht vorhanden ist und suchst dann eine Lösung, die eigentlich überhaupt nicht benötigt wird.

Da du uns nicht mitteilst was du überhaupt willst können wir dir auch kaum konkret helfen. Mit den bisherigen, mehr als mageren, Informationen empfehle ich dir auch Flexbox.

Gruss

MrMurphy

Hallo

Zitat

Hast Du das getestet?

Ja, mit den Entwicklerwerkzeugen meines Browsers Firefox.

Das float kann und sollte natürlich weg. Gleichzeitig ist in den HTML-/CSS-Regeln aber auch festgelegt, dass Flexbox float vorgeht.

Gruss

MrMurphy

Hallo

Es gibt eine Datei "style.css" oder "style.css?ver=2.3.0", so genau ist das mit den Entwicklerwerkzeugen des Browsers nicht zu ergründen. Dort gibt es in etwa bei Zeile 2216 den Eintrag

.site-branding {
   /* Avoid overflowing wide custom logo in small screens in Firefox and IEs */
   max-width: 100%;
   min-width: 0;
   overflow: hidden;
}

Den kannst du erweitern zu

.site-branding {
   /* Avoid overflowing wide custom logo in small screens in Firefox and IEs */
   max-width: 100%;
   min-width: 0;
   overflow: hidden;
   display: flex;
   justify-content: center;
}

Gruss

MrMurphy

Hallo

Gleich mal ganz deutlich: Wenn du so gewerbliche, kostenpflichtige Webseiten erstellen willst - lass es bleiben.

Du deklarierst die Seite als aktuelle HTML-Seite, hälst dich aber nicht mal ansatzweise an irgendwelche HTML5- und CSS3-Regeln. Ich sehe auch nicht wie sich das bei der fertigen Seite ändern soll. Dir fehlt das einfachste Grundlagenwissen, sonst würdest du eine Webseite niemals so beginnen.

Benutzerfreundlichkeit oder gar Barrierefreiheit scheinen dir auch fremd zu sein.

Von daher passen Anspruch und Wirklichkeit bei dir nicht zusammen.

Gruss

MrMurphy