Beiträge von MrMurphy

Hallo

Ich befürchte du machst dir viel unnütze Arbeit für Browser, die heute nicht mehr verwendet werden.

HTML und CSS werden dauernd weiter entwickelt. Dabei hat es sich nicht nur bei Flexbox als Irrweg erwiesen, alte Schreibweisen zu lange weiter zu verwenden.

Flexbox ist nur eine CSS-Anweisung von vielen. Die müssten nach deinem Vorgehen ja alle mit ihren alten Schreibweisen berücksichtigt werden.

Bei einem von dir noch gar nicht berücksichtigtem Responsive Layout vervielfacht sich der Arbeitsaufwand für den Webseitenersteller ohne Vorteil für die Besucher der Webside. Wer als Webseitenersteller Zeit übrig hat sollte die zunächst in ein barrierefreies Layout investieren, wovon auch seine Besucher profitieren würden.

Deshalb gilt auch für Flexbox: Bei dem heutigen Verbeitungsgrad braucht nur die aktuelle Schreibweise berücksichtigt zu werden. Für alle Problembrowser wird ein einfaches Fallback angelegt und fertig. Fallback hört sich für Neulige vielleicht nach viel zusätzlichem Aufwand an. In einem Responsive Layout sind das meist aber nur wenige Zeilen CSS-Angaben. Positiver Nebeneffekt: Der Quelltext bleibt für den Webseitenersteller übersichtlich.

Wer dennoch von den alten Schreibweisen nicht lassen mag sollte dafür Online-Lösungen verwenden, die die alten Schreibweisen für ihn mehr oder weniger automatisch hinzufügen. Einfach das CSS mit der aktuellen Schreibweise hineinkopieren und den erweiterten Quelltext zurückkopieren.

Gruss

MrMurphy

Hallo

Das Problem sind die festen Breitenangaben vieler Elemente.

Ebay will ein responsive Layout und sich dabei nicht von seinen Kunden ausbremsen lassen. Wer nicht mitmacht wird bestraft, indem sein Angebot bei Suchen schlechter gerankt (weiter hinten) angezeigt wird. Dies gilt zumindest bei gewerblichen Händlern.

Ein wichtiger Punkt dabei ist, dass die Inhalte der Kunden in allen gängigen Festerbreiten ohne seitliches scrollen angezeigt werden.

Als Kunde musst du deshalb auf feste, starre Einheiten bei Breitenangaben verzichten. In deinem Fall px. Aber auch em oder rem sind davon betroffen.

Du hast einen umschließenden Container #mainwrapper mit einer Breite von 970px.

Darin befinden sich die Container #header, #maincontent und #footer auch jeweils mit einer Breite von 970px.

Die müssen alle auf Prozentangaben geändert werden.

Dann musst du schauen, ob sich innerhalb der drei genannten Container weiterere mit festen px-Werten befinden.

In .maincontent sind das zum Beispiel #sidebar (256px + 7px margin) und #content (680px + 7px margin). Da musst du zumindest den #content anpassen.

Geringe px Werte wie bei #sidebar sind zulässig. Das sind die im i-ways-Checker genannten 320px. Zu den 320px gehören aber nicht nur die Breite (width), sondern, sofern vorhanden, auch seitliche padding, border und margin. #sidebar ist 263px breit und erfüllt damit die Anforderungen.

Tip nebenbei:

Insgesamt solltest du dir überlegen, deine Vorlage im Zuge dieser Anpassungen gleich aus HTML5 zu ändern. Falls Ebay später weitere Anpassungen an modernes HTML / CSS fordert bist du gleich auf der richtigen Seite und hast keinen Stress.

So sollten zum Beispiel font-Elemente oder align-Attribute oder inhaltsleere Absätze (p-Elemente) nicht mehr verwendet werden.

Gruss

MrMurphy

Hallo

Laufen die Browser auf unterschiedlichen Rechnern?

Webseiten können nur die Schriften nutzen, die entweder auf dem Rechner vorhanden sind oder die online eingebunden werden. Die Anweisung

font-family: 'Courier New'

erwartet die Schrift auf dem jeweiligen Rechner.

Außerdem können direkt in den Schriften Rechte hinterlegt sein, die eine Verwendung beschränken. Einige Browser beachten solche Rechte und blockieren die Schrift, andere nicht.

Gruss

MrMurphy

Hallo

Zitat

Hättet Ihr dann vielleicht mal ein Tool was etwas taugt?

Das gibt es nicht. Erfahrung und Wissen bringen mehr als irgendwelche Tools. Die sind für Anfänger teilweise hilfreich, wer genügend Erfahrung gesammelt hat läßt die aber ganz schnell links liegen.

Zitat

Ich lasse die Angabe von width/height im html-Code immer(!) weg wenn es sich um ein "responsive Design" handelt?

Nicht nur bei responsive Design, sondern grundsätzlich.

Zitat

Da alle mir bekannten leider mehr oder weniger über die fehlenden Angaben meckern (nibbler, w3c, gtmetrix, etc ...).

Schlimmer noch: Die schreiben Unsinn. Das hast du doch grade live erlebt. Einerseits wird die Angabe von width- und height-Anttributen aggressiv (roter Hintergrund) angemahnt, bei der Prüfung aber direkt deren Existenz bemängelt. Dazu fällt mir nichts mehr ein.

Gruss

MrMurphy

Hallo

Zitat

Hmm, werde nicht ganz schlau daraus auf mein Projekt bezogen

Die Attribute einfach weglassen.

Zitat

Finde ich eine gewagte Aussage, vorallem weil noch so ziemlich jedes Tool zum testen von Webseiten das Fehlen von width-/height-Angaben bemängelt.

Im Web wird leider mit großer Überzeugung und damit scheinbar glaubwürdig viel Unsinn geschrieben. Aber nur weil etwas häufig wiederholt wird muss es weder sinnvoll noch richtig sein.

Zitat

Aber gleich zu behaupten man hätte dann die Zeichen der Zeit nicht erkannt ist doch vielleicht etwas hoch gegriffen.

Nicht für jemanden der sich auskennt. Ich behaupt genau so eindeutig, dass acht mal elf achtundachtzig ergibt. Die Angabe wäre dann ja auch etwas zu hoch gegriffen, da viele Leute / Schüler zu einem anderen Ergebnis kommen.

Gruss

MrMurphy

Hallo

Da liegt wohl ein Verständnisproblem vor.

being streched meint in diesem Zusammenhang, das die Bilder entweder größer oder kleiner als in den Attributen angegeben dargestellt werden.

width- und height-Attribute sind zwar noch zulässig, sollten in der Praxis aber vermieden werden.

Wenn eine Webseite zu langsam aufgebaut wird sollten die Ursachen dafür beseitigt werden, nicht aber nachträglich an dem Ergebnis herumgedoktort werden.

Die Ansicht, dass width und height Angaben als Platzhalter für Grafiken beim Laden einer Webseite sinnvoll sind, wird zwar noch immer in den Raum geworfen, hat sich bei Praktikern aber als Sackgasse erwiesen. Wer noch width- und height-Attribute verwendet zeigt eigentlich nur, dass er die Zeichen der Zeit nicht erkannt hat.

Gruss

MrMurphy

Hallo

Ich kann nur Infos geben, die die Suchmaschine meiner Wahl ausspuckt.

Demnach hat der CKEditor unter HTML5 teilweise große Probleme. Die sind dem Entwickler wohl auch bereits seit Jahren bekannt, aber es gibt keine Lösung dafür. Auch sind eigene Anpassungen zur Behebung der Probleme wohl nicht möglich.

Von daher wäre es interessant zu erfahren, ob die Probleme bei sudteam eventuell nach einem Wechsel von HTML4 / XHTML1 zu HTML5 aufgetreten sind. Er hat zwar geschrieben

Zitat

achso am editor selber wurde nix verändert so viel weiss ich.

aber damit andere Änderungen nicht ausgeschlossen. Ursprünglich hat es doch wohl keine Probleme dieser Art gegeben.

Gruss

MrMurphy

Hallo

Im Quelltext der fertigen Seite sehe ich häufig diesen Quelltext

<br><br />

Meine kurze Suche mit der Suchmaschine meiner Wahl hat zu dem Ergebnis geführt, dass der CKEditor wohl (seiner Ansicht nach) schmutzigem Quelltext korrigieren will.

Das br-Element besteht aus einem Tag, in HTML5 wahlweise

<br>

oder

<br />

Wenn mehrere Zeilenumbrüche direkt nacheinander angegeben werden sollen zum Beispiel entsprechend

<br><br><br>

oder

<br /><br /><br />

Die Angabe

<br><br />

wird von manchen Browsern als ein, von anderen als zwei Zeilenumbrüche dargestellt.

Eventuell kommt der CKEditor damit nicht zurecht. Vielleicht hilft es nur öffnende oder nur schließende br-Tags zu verwenden.

Gruss

MrMurphy

Hallo

Hast du überhaupt noch kein Auto?

Gruss

MrMurphy

Hallo

JavaScript ist durchschnittlich um den Faktor 10 langsamer als gleichwertige Lösungen mit CSS. Deshalb sollte, auch in Hinblick auf eher leistungsarme Smartphones und Tablets so weit wie möglich auf JavaScript verzichtet werden. Wobei es natürlich Probleme/Aufgaben gibt, die ohne JavaScript nicht lösbar sind.

Zitat

Ich weiß allerdings nicht, wie ich diese Fehler behebe.

Es handelt sich um keinen Fehler, sondern um einen ungeeigneten Grundansatz.

Da bleibt nur die Seite komplett neu zu erstellen und bei jedem JavaScript-Einsatz prüfen, ob der wirklich nötig tut.

Gruss

MrMurphy

Hallo

Deine Seite funktioniert nur mit JavaScript, ohne oder mit blockiertem JavaScript wird überhaupt nichts angezeigt.

So ein Verhalten geht überhaupt nicht. Auch ohne JavaScript sollte der Inhalt der Seite komplett angezeigt werden und sie sollte uneingeschränkt benutzbar sein. Ansonsten werden viele Besucher abgeschreckt.

Wer einen JavaScript-Blocker verwendet wird kaum einen Grund sehen den für deine Seite abzustellen, sondern eher nach funktionierenden Seiten suchen.

Gruss

MrMurphy

Hallo

Zitat

In seiner Aufgaben stellung steht, das man zwischen allen Listenelementen, Übersnächriffen und Absätzen einen Abstand von 15 px haben soll.

Bei so einer Formulierung sind in aller Regel die Außenabstände gemeint. Dafür gibt es statt padding dann margin. Also zum Beispiel:

h1 {
         margin-top: 15px;
         margin-bottom: 15px;
      }
      h2 {
         margin-top: 15px;
         margin-bottom: 15px;
      }
      h3 {
         margin-top: 15px;
         margin-bottom: 15px;
      }
      h4 {
         margin-top: 15px;
         margin-bottom: 15px;
      }
      h5 {
         margin-top: 15px;
         margin-bottom: 15px;
      }
      h6 {
         margin-top: 15px;
         margin-bottom: 15px;
      }
      p {
         margin-top: 15px;
         margin-bottom: 15px;
      }
      li {
         margin-top: 15px;
         margin-bottom: 15px;
      }

oder zusammengefaßt

h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      li {
         margin-top: 15px;
         margin-bottom: 15px;
      }

oder zusammengefasst mit weniger Absätzen

h1, h2, h3, h4, h5, h6, p, li {
         margin-top: 15px;
         margin-bottom: 15px;
      }

Da jeweils 15px oben und unten angegeben werden mag es so erscheinen, als ob die Elemente einen Abstand von 30px haben.

Durch die sogenannten "collapsing margins", die fest zum HTML / CSS gehören, rutschen obere und untere margins (nicht die seitlichen) immer eineinander und es bleibt nur das größere margin übrig. Da in diesem Fall beide 15px haben halt einmal die 15px.

Wenn ein margin-bottom mit 12px und ein margin-top mit 7px aufeinandertreffen beträgt der Abstand 12px.

Das gleiche gilt wenn ein margin-bottom von 7px und ein margin-top von 12px aufeinandertreffen, es bleiben 12px. Entscheidend ist somit allein der größere margin, bei zwei gleichgroßen fällt einer weg.

Das ist fest in den HTML- und CSS-Regeln hinterlegt, wird von jedem Browser so gehandhabt und sorgt bei Anfängern oft für Verdruß. Das gilt aber nur für margins und nicht für andere Abstände wie padding und border. Und nur für obere und untere margins, nicht für seitliche.

Gruss

MrMurphy

Hallo

Im Moment willst du Lösungen, für die weder HTML noch CSS vorgesehen und die in der Praxis unsinnig sind.

Erschwerend kommt hinzu, dass du Bootstrap zwar benutzt, aber überhaupt noch nicht verstanden hast.

Du machst dir damit das Leben doppelt schwer. Lernen kannst du so schon gar nichts. Das ist ungefähr so als würdest du mit dem Fahrrad Querfeldeinrennen fahren um für den PKW-Führerschein zu lernen.

Du solltest dir erst mal ein Grundlagenwissen aneignen. Wenn du Bootstrap verwenden und zusätzlich mittels HTML/CSS Änderungen darin vornehmen willst zunächst aktuelles HTML/CSS (Hinweis: AKTUELLES) und dann zusätzlich Bootstrap.

Zum aktuellen HTML/CSS gehört zum Beispiel dass das Layout dem Inhalt folgt. Layouts mit leeren Containern wie in deinem Beispiel zu erstellen ist vollkommen sinnfrei. Damit lernst du auch überhaupt nichts.

Du solltest also zunächst eine Seite mit Inhalt erstellen. Wenn du eigenen Inhalt hast, dann bevorzugt den. Ansonsten suchst du dir eine Webseite, die dir gefällt, und baust die nach.

So sollen auch height-Angaben nur in ganz bestimmten Ausnahmefällen verwendet werden. Grundregel: Die Höhe von Containern richtet sich nach deren Inhalt. Und nicht nach dem, wie der Webseitenersteller es sich wünscht. Zumal die Webseite in der Regel auf den unterschiedlichsten Endgeräten funktionieren soll. Vom Smartphone/Handy bis zum Desktop.

An Hand von leeren Containern ist grade Anfängern auch kaum zu erklären, warum es sinnvoll ist auf height-Angaben zu verzichten.

Wenn du dich ernsthaft mit HTML/CSS beschäftigen willst solltest du also zunächst den Inhalt erstellen.

Danach folgt die Entscheidung, ob du das Layout mittels CSS selbst erstellen willst oder dafür Bootstrap verwenden willst.

Wenn du Bootstrap verwenden willst solltest du auch bevorzugt die vorgegebenen Bootstrap-Möglichkeiten nutzen. Erst wenn die Seite damit fertig ist werden mit eigenem CSS noch ein paar Glanzpunkte gesetzt.

Zitat

Mit clear:both; klappts leider nicht

Das ist logisch. Bootstrap 3 basiert auf einem float-Layout. Ohne genaue Kenntnis, wie float/clear und zusätzlich wie Bootstrap funktionieren, sind solche Angaben tödlich. Das wirst du spätestens merken, wenn du zunächst leere Container erstellst und nach dem Einfügen von Inhalt überhaupt nichts mehr wie vorgesehen funktioniert.

Zitat

dann soll es in die Mitte des oberen div's kommen

Das Zentrieren ist eine der vielen Möglichkeiten für die Flexbox gedacht ist.

Gruss

MrMurphy

Hallo

An Hand deines Beispiels sind die von dir beschriebenen Probleme nicht direkt nachzuvollziehen.

Das

Zitat

li in die boxen einfüge rutscht alles aus der box auserhalb unter die box.

verstehe ich immer noch nicht.

Hierzu

Zitat

dennoch den "weiterlesen link immer unten behalten

habe ich eine Vermutung. Ich habe die Möglichkeit den Weiterlesen-Links (oder auch anderen Inhalt) unten in Containern anzuordnen eigentlich nur hinzugefügt um eine der vielen Möglichkeiten von Flexbox zu zeigen, danach hattest du aber überhaupt nicht gefragt.

Praxisgerecht kannst du zum Beispiel folgenden HTML-Quelltext als Grundlage für die Cards verwenden:

<section class="card">
            <div>
               ...
            </div>
            <div>
               ...
            </div>
         </section>

An Stelle der Punkte kommt dann der Inhalt. Also zum Beispiel

<section class="card">
            <div>
               <h2>SHOUTCAST STREAM<br>TESTER 5 SLOTS</h2>
               <ul>
                  <li>5 Listener</li>
                  <li>gute Server Verwaltung</li>
                  <li>Sendeformate in MP3 und AAC+</li>
                  <li>Paket Wechsel möglich</li>
                  <li>Ideal als Testsream</li>
               </ul>     
            </div>
            <div>
               <a href="#">Weiterlesen</a>
            </div>
         </section>

Du musst also alle (in diesem Fall vier) .card-Container so aufbauen.

Sofern die Höhe mehr Platz bietet als der Inhalt steht das erste div oben und das zweite div möglichst weit unten.

Dazu musst du noch das CSS

.card p {
         margin: 0.5rem 0.25rem auto 0.25rem;
      }
      .card a {
         text-align: center;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }

ersetzen durch

.card>div:nth-child(1) {
         margin: 0 0 auto 0;
      }
      .card>div:nth-child(1) p {
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      .card>div:nth-child(2)  {
         margin: 0 0 0 0;
      }
      .card>div:nth-child(2) a {
         display: block;
         text-align: center;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }

Zur Erläuterung:

Durch

.card {
         ...
         display: flex;
         flex-direction: column;
      }

wird .card zu einem Flex-Container und die direkten Kind-Elemente (und nur die) zu Flex-Items. Das sind in diesem Fall jeweils die beiden div-Elemente.

Durch flex-direction: column stehen sie übereinander, ähnlich wie Block-Elemente. Soweit noch nichts besonderes.

Durch

.card>div:nth-child(1) {
         margin: 0 0 auto 0;
      }

wird dem jeweils ersten div ein unterer margin mit dem Wert auto zugewiesen. Sofern Leerraum zur Verfügung steht werden dadurch alle nachfolgenden Container so weit wie möglich nach unten gedrückt.

Wichtig ist in diesem Zusammenhang der Selektor

>

statt des üblichen Leerzeichens. Dadurch wird auch dem CSS mitgeteilt, das nur für direkte Kinder-div von .card die dort bestimmten CSS-Anweisungen gelten sollen. Das mit :nth-child(1) das erste div-Element und mit :nht-child(2) das zweite angesprochen werden erklärt sich für den Anfang von selbst.

Gruss

MrMurphy

Hallo

Ich kann dein Problem nicht nachvollziehen.

Zitat

zwar kann ich die 4 container auch dynamisch von der höhenangabe machen und dennoch den "weiterlesen link immer unten behalten

Das Verhalten haben die Container doch.

Alle Container einer Reihe sind immer gleich groß und der Weiterlesen-Link ist immer ganz unten.

Zitat

weil wenn ich zb. li in die boxen einfüge rutscht alles aus der box auserhalb unter die box

Das kann nicht sein. Inhalt kann nur aus der Box rutschen wenn du den HTML-Quelltext sachlich falsch erstellst oder CSS-Anweisungen verwendest, die den Dokumentenfluß zerreißen.

Ohne Link zu deiner Seite kann ich dir leider nicht konkret helfen.

Gruss

MrMurphy

Hallo

Ich befürchte dass ich dir nicht groß weiterhelfen kann.

Von import habe ich weder etwas geschrieben noch kenne ich mich damit aus.

Und dir den Hintergrund von Media Queries zu erklären sprengt den (meinen Zeit)Rahmen hier im Forum. Das würde ein ganzes, ziemlich dickes Buchkapitel werden.

Da ist es sinnvoller du wirfst zunächt die Suchmaschine deiner Wahl an, liest dir das Grundwissen zu den Media Queries auf unteschiedlichen Seiten an und fragst nach, wenn du dann einzelne Angaben nicht verstehst. Dazu gibt es inzwischen sehr viele Infos im Web, so dass meine Erklärung nur eine x-te Wiederholung wäre.

Zumal ich mein Beispiel auch ohne Hintergrundinformationen ziemlich selbsterklärend finde.

Gruss

MrMurphy

Hallo

Wenn das Wort Registrierungsformular bei einer Schriftgröße von 36pt so ein Problemwort ist brauchen wir den Quelltext nicht mehr.

Ich habe mal vier Beispiele erstellt um das Problem zu lösen. Wobei die vierte Lösung noch nicht auf ausreichend vielen Browsern unterstützt wird.

Der Quelltext:

<h3>Schriftgröße mit vw</h3>
      <section class="vw">
         <h2>Registrierungsformular</h2>
      </section>
      <h3>Verwendung vom Media Queries</h3>
      <section class="mediaquery">
         <h2>Registrierungsformular</h2>
      </section>
      <h3>Vorgegebene Silbentrennung mit &amp;shy;</h3>
      <section class="silbentrennungshy">
         <h2>Regis*trierungs*formular</h2>
      </section>
         <h3>Automatische Silbentrennung mit hyphens</h3>
      <section class="hyphens">
         <h2>Registrierungsformular</h2>
      </section>

und das entscheidende CSS dazu:

/*Schrifgröße mit Einheit vw*/
   @media all {
      .vw h2 {
         font-size: 7vw;
         text-align: center;
      }
   }


   /*Schriftgröße mit Media Queries*/
   @media all {
      .mediaquery h2 {
         text-align: center;
         font-size: 18px;
      }
   }
   @media only screen and (min-width: 400px) {
      .mediaquery h2 {
         font-size: 30px;
      }
   }
   @media only screen and (min-width: 800px) {
      .mediaquery h2 {
         font-size: 50px;
      }
   }
   @media only screen and (min-width: 1200px) {
      .mediaquery h2 {
         font-size: 70px;
      }
   }
   @media only screen and (min-width: 1500px) {
      .mediaquery h2 {
         font-size: 100px;
      }
   }


   /*Silbentrennung mit shy*/
   @media all {
      .silbentrennungshy h2 {
         font-size: 80px;
         text-align: center;
      }
   }


   /*Silbentrennung mit hyphens*/
   @media all {
      .hyphens h2 {
         font-size: 80px;
         text-align: center;
         hyphens: auto;
      }
   }

Eine komplette Webseite mit Erläuterungen im Text:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Schriftgröße anpassen 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>


   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);


   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import 'https://fonts.googleapis.com/css?family=Roboto+Slab';


   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import 'https://fonts.googleapis.com/css?family=Roboto';


   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);


   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         /*box-sizing: border-box;*/
         min-width: 0;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         padding: 0 0.25rem 0.5rem 0.25rem;
         border-top: 0.01px solid transparent;
         margin: 0;
      }
   }


   /*Schriften 01*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      p, li, dl, dt, address {
         font-family: 'Roboto', 'Sans-Serif';
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      a {
         color: blue;
         text-decoration: none;
         outline: none;
         margin: 0;
      }
      figcaption {
         font-family: 'Roboto', 'Sans-Serif';
         font-size: 0.9rem;
         margin: 0;
      }
   }


   /*Grafiken*/
   @media all {
      figure {
         min-width: 0;
         max-width: 100%;
         margin: 0;
      }
      img {
         /*text-align: bottom;*/
         min-width: 0;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
   }


   /*Grundeinstellungen*/
   @media all {
      section {
         background-color: lightsteelblue;
         padding: 0.5rem;
         margin: 0.5rem 0 0 0;
      }
   }


   /*Schrifgröße mit Einheit vw*/
   @media all {
      .vw h2 {
         font-size: 7vw;
         text-align: center;
      }
   }


   /*Schriftgröße mit Media Queries*/
   @media all {
      .mediaquery h2 {
         text-align: center;
         font-size: 18px;
      }
   }
   @media only screen and (min-width: 400px) {
      .mediaquery h2 {
         font-size: 30px;
      }
   }
   @media only screen and (min-width: 800px) {
      .mediaquery h2 {
         font-size: 50px;
      }
   }
   @media only screen and (min-width: 1200px) {
      .mediaquery h2 {
         font-size: 70px;
      }
   }
   @media only screen and (min-width: 1500px) {
      .mediaquery h2 {
         font-size: 100px;
      }
   }


   /*Silbentrennung mit shy*/
   @media all {
      .silbentrennungshy h2 {
         font-size: 80px;
         text-align: center;
      }
   }


   /*Silbentrennung mit hyphens*/
   @media all {
      .hyphens h2 {
         font-size: 80px;
         text-align: center;
         hyphens: auto;
      }
   }


   /*Spezielle Einstellungen*/
   @media all {
   }


   /*Flexbox für IE*/
         /*-ms-flex-preferred-size: calc(50% - 1rem);*/
   /*Vorlage für das gesamte CSS*/
   @media all {
   }
   /*Vorlage zum Kopieren für Media Queries - Mobile first*/
   @media only screen and (min-width: 0px) {
   }
   /*Vorlage zum Kopieren für Media Queries - Desktop first*/
   @media only screen and (max-width: 0px) {
   }


   </style>
</head>
<body>
   <header>
      <h2>Schrift an Fensterbreite anpassen</h2>
   </header>
   <nav>
   </nav>
   <main>
      <h2>Problembescheibung</h2>
      <p>Ein langes Wort wird länger als die Seitenbreite oder der Container, in dem es sich befindet.</p>
      <h2>Mögliche Lösungen</h2>
      <p>Mir fallen vier Möglichkeiten ein, dies zu verhindern. Wobei die teilweise auch kombiniert werden können.</p>
      <p>1. Es wird eine Schrifteinheit gewählt, die sich der Fensterbreite anpasst. Dazu bietet sich die Einheit <i>vw</i> an.</p>
      <p>Dabei sollte darauf geachtet werden dass die Schriftgröße nicht zu klein wird. Auf Smartphones sollte die Schriftgröße eher etwas größer als üblich gewählt werden. Leider sehen viele Webseitenersteller nur ihr Layout und nicht ihre Besucher. Smartphones werden häufig unterwegs benutzt (Bahn, Bus, Auto, Gehen) und sind dabei weder im Abstand noch in der Sichtachse stabil vor Augen wie Desktop-Monitore oder Tablets, die auf einem Tisch liegen.</p>
      <p>2. Die Schriftgröße kann stufenweise mit Media Queries angepasst werden.</p>
      <p>3. Mittels des Sonderzeichens &amp;shy; werden Worttrennungen vorgegeben. Bei sehr großen Schriftgrößen sieht das häufig aber nicht besonders schön aus, da das Wort einen Großteils des Fensters ausfüllen kann. Falls die Worte aus einer Datenbank kommen ist es zudem häufig schwierig das Sonderzeichen dort zu hinterlegen.</p>
      <p>Bei statitschen Webseiten funktioniert das aber sehr gut. Über die Suchfunktion des Editors suche ich in solchen Fällen alle Worte mit mehr als 15 Buchstaben und füge das Zeichen dort ein. Das sind in der Regel nicht mehr als drei, vier Worte pro Webseite. Bei großer Schrift muss das Sonderzeichen eventuell auch bei Worten mit weniger Buchstaben eingefügt werden.</p>
      <p>4. Mittels der CSS-Anweisung <i>hyphens: auto;</i> wird die automatische Silbentrennung der Browser aktiviert. Allerdings wird diese Funktion aktuell (Nov. 2016) von einigen gebräuchlichen Browsern noch nicht unterstützt. Siehe bei <a href="http://caniuse.com/#search=hyphens">Can I use - hyphens</a>. Deshalb würde ich es in der Praxis noch nicht einsetzen.</p>
      <h2>Praktische Beispiele</h2>
      <h3>Schriftgröße mit vw</h3>
      <section class="vw">
         <h2>Registrierungsformular</h2>
      </section>
      <h3>Verwendung vom Media Queries</h3>
      <section class="mediaquery">
         <h2>Registrierungsformular</h2>
      </section>
      <h3>Vorgegebene Silbentrennung mit &amp;shy;</h3>
      <section class="silbentrennungshy">
         <h2>Regis*trierungs*formular</h2>
      </section>
         <h3>Automatische Silbentrennung mit hyphens</h3>
      <section class="hyphens">
         <h2>Registrierungsformular</h2>
      </section>
   </main>
   <footer>
   </footer>
</body>
</html>

Und noch ein Link zu meinem Testaccount zum direkten ausprobieren. Da ich meinen Testaccount immer wieder mal aufräume wird die Datei nicht ewig bleiben:

Testseite zur Schriftgröße

Zitat

Media Queries sprengt den Rahmen.

Glaube ich nicht. Du musst dafür ja nicht dein gesamtes CSS umstellen. Du kannst einfach meine Vorgabe übernehmen und anpassen, zum Beispiel auch Breakpoints entfernen oder hinzufügen:

/*Schriftgröße mit Media Queries*/
   @media all {
      .mediaquery h2 {
         text-align: center;
         font-size: 18px;
      }
   }
   @media only screen and (min-width: 400px) {
      .mediaquery h2 {
         font-size: 30px;
      }
   }
   @media only screen and (min-width: 800px) {
      .mediaquery h2 {
         font-size: 50px;
      }
   }
   @media only screen and (min-width: 1200px) {
      .mediaquery h2 {
         font-size: 70px;
      }
   }
   @media only screen and (min-width: 1500px) {
      .mediaquery h2 {
         font-size: 100px;
      }
   }

Die erste Anweisung gilt von 0px Breite bis zum ersten Breakpoint, in dem Beispiel 400px.

Gruss

MrMurphy

Hallo

Meinst du die Überschrift:

<span style="font-size:36pt">Registrierungsformular</span>

Mal abgesehen dass die Einheit pt für Webseiten weder gedacht noch geeignet ist kann sich damit die Schriftgröße nicht anpassen.

Du kannst entweder Media Queries verwenden oder eine Einheit die sich der Fensterbreite anpasst wie vw. Dabei solltest du aber darauf achten dass die Schrift nicht zu klein wird. Grade auf Smartphones sollte die Schrift jetzt nicht grade 36pt groß sein, aber etwas größer als üblich.

Gruss

MrMurphy

Hallo tklustig

Vom CSS kann nicht auf das HTML zurückgeschlossen werden. Wenn wir uns etwas ausdenken kann es deshalb nur falsch sein.

Und was hindert dich daran die originalen Texte durch von der Menge passenden neutralen Text oder Bildtext zu ersetzen?

Arne Drews und ich wollen dir helfen und unsere Nachfragen dienen nicht dazu dich zu ärgern. Schau bitte mal nach wie viele Beiträge bislang vorhanden sind. Und du verschweigst uns immer noch die entscheidenden Informationen um dir helfen zu können.

Gruss

MrMurphy

Hallo

Dummheiten https://www.forum-hilfe.de/images/smilies/icon_rolleyes.gif

Ich hatte erst vor kurzer Zeit die Frage warum ein Text nicht umbrechen will.

Nach drei- oder viermaligem Nachfragen erhielt ich dann den Text:

fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff

Wobei die Leerzeichen hier im Forum wohl von der Software eingefügt werden und im Original nicht vorhanden waren.

Noch Fragen?

Es lag weder am HTML noch am CSS noch am Browser noch konnte der Fragesteller einen Bug mit seinem Namen benennen.

Gruss

MrMurphy