Hi Leute, wie erreiche ich es, dass sich der Text, der sich bereits in diversen Containern befindet, automatisch an eine Verkleinerung des Bildschirmes anpasst?
max-width:100% bzw, min-width:100% haben keinerlei Effekt....
Vorab vielen Dank ob der Hilfestellungen!
Wie passt sich Text automatisch an?
-
Hallo
width
Oder du machst irgendwelche Dummheiten die du uns verschweigst.
Gruss
MrMurphy
-
Dummheiten
width-Anweisungen habe ich zahlreiche erstellt. Aber sobald ich den Bildschirm minimiere, verschwindet der Text, anstatt sich anzupassen, wie bei Bildern üblich....
Auch background-size: 100% 100%;
klappt nicht... -
- Offizieller Beitrag
Ein Link zur besagten Seite wäre sinnvoll, wenn Du Dir detailliertere Hilfe erhoffst...
-
- Offizieller Beitrag
Schon mal nicht schlecht, nun pack mal die HTML noch dazu, dann muss ich mir keine selber basteln, die evtl. zu der CSS passen würde.
-
Kann ich leider nicht;
es geht um eine Webseite für sexuelle Dienstleistungen, die ziemlich brisante Texte enthält
Eigentlich ist die statische Komponente reif zur Veröffentlichung.
Ich selber schreibe noch an den php-Scripten (Login && Registrierung)
Ist auch bald fertig:p
Nur ist mir halt aufgefallen, dass.......ihr wisst schon!
Kannst du das nicht anhand des CSS-Codes eruieren? -
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
-
- Offizieller Beitrag
Genau das habe ich im HTML erwartet, deshalb hätte ich das gerne gesehen...
-
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
Meinst du die Überschrift:
Code<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
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:
Code
Alles anzeigen<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 &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:
Code
Alles anzeigen/*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:
HTML
Alles anzeigen<!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 &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 &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:
ZitatMedia 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:
Code
Alles anzeigen/*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
-
Ohhhh. Das klappt ja wunderbar. Phänomenal.
Nur:
Was mache ich da eigentlich bzw .was nutze ich denn genau? Sowohl @media als auch @import sind Anweisungen, die ich bisher nie benutzte, dito auch nicht weiß, worauf sie eigentlich basieren.
Was importiere ich eigentlich genau;sicherlich keine FunktionenPHPinclude function use My\Full\Classname as Another, My\Full\NSname; require'ausgelagert.php';, und auch keine Bibliotheken
CodeImports csUnit || Imports MyCalculator
Kannst du mir (kurz )das Konzept erläutern, das sich dahinter verbirgt
Vorab vielen Dank ob deiner Bestrebungen, meinem Problem Abhilfe zu unterbreiten..... -
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
-
Na ja, du hast es zwar nicht explizit erwähnt, aber @import interpretiere ich halt als Einbindung(sprich:Importierung) von irgendwas
Und ja, dein Beispiel funktioniert, kein Thema, aber persönlich interessiert mich halt, warum es funktioniert.
Code in diesem Projekt zu verwenden, den man nicht zu 100% versteht, könnte sich u.U. als gefährlicher Bumerang entwickeln.....
Aber gut, sofern keine kurze Darstellung des Themas 'Media Queries' ( mein erster Gedanke dbzgl. war der Vergleich mit SQL-Queries) möglich ist, werde ich halt 'yahoo' befragen!
In diesem Sinne erachte ich diesen thread als erfolgreich bearbeitet und würde ihn gerne auch als solchen markieren,wenn ich nur wüsste, wo der Button dafür ist
nochmals vielen Dank für das feedback;
v.a. an Dich MrMurphy.....habe das bedanken auch digital bewerkstelligt. Famoser Button,wenngleich auch etwas versteckt! Verbleibt noch der 'Gelöst markieren'-Button, den ich immer noch nicht finden kann...