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...
-
Hier der CSS-Code
Code
Alles anzeigen* { margin:0;padding:0; }/* Außenabstände an allen Elementen entfernen mit dem Universalselektor * */ /* Hintergrundgrafik für Body und Schrift für alle Elemente */ body { background-size: 100% 100%; background: (../bild/bg_body.jpg) repeat-x #e8e4e4; font-family: Verdana, Geneva, Arial, sans-serif; max-width:auto; } /* Schriften */ /* zusätzliches tag */ nav, footer, a{ font-size: 18px; text-align: center; color: #fff; text-decoration: none; } #wrapper { width: 752px; margin: 23px auto 0 auto; } header { background: url(../bild/headlines_copy.png) no-repeat; height: 120px; } nav { width: 752px; height: 49px; background: url(../bild/bg_nav.jpg) no-repeat right; } nav ul li { list-style-type: none; width: 120px; height: 33px; float: left; margin: 6px 0 0 7px; line-height: 39px;/* Zeilenhöhe zum Vertikalen Zentrieren und Ausdehnen des ankers */ } /* Anker zu Blockelement wandeln */ nav ul li a { display: block; } /* Hintergrund Grafiken für Listenpunkte */ nav ul li:first-child { background:url(../bild/btn_home.png) no-repeat; } nav ul li + li { background:url(../bild/btn_chronik.png) no-repeat; } nav ul li:nth-of-type(3) { background:url(../bild/btn_gallery.png) no-repeat; } nav ul li:last-child { background:url(../bild/btn_impressum.png) no-repeat; } /* Content */ #content { background: #fff; margin-top: 26px; /* Inhalt abschneiden am letzten Inhalt */ overflow: hidden; /* Damit sich darinliegender absolut positionierter Inhalt auf #content bezieht und nicht auf den Viewport*/ position: relative; /* Freiraum an dem der Inhalt eingefügt wird um Abstand zu simulieren*/ padding-bottom: 27px; } /*Linke Spalte */ #left { float: left; width: 314px; min-height: 550px; margin: 30px 0 0 28px; padding-right: 34px; padding-bottom: 0; } #left h2 { padding-right: 41px; padding-bottom: 55px; } #left h3 { font-size: 23px; color: #db37bc; padding-bottom: 22px; } #left h3 + p { font-weight: bold; } #left form { height: 190px; min-width: 310px; border: 2px solid #545454; margin: 30px 0 10px; /* Notierung mit 3 Werten: 1. Wert für oben, 2. Wert für links und rechts, 3.Wert für unten */ padding-top: 20px; position: relative; border-radius: 3px; } #left .verschiebung { position: absolute; top: -13px; left: 10px; padding: 0 10px; font-size: 18px; } #left form label { display: block; margin-top: 5px; padding-bottom: 10px; } #left form > * { /* Universalselektor * in Verbindung mit dem Kindselektor > selektiert alle Elemente egal welchen Typs innerhalb form Elements */ margin-left: 10px; font-size: 14px; } #left form input{ min-width: 85px; height: 30px; } #left form input.text { background: url(../bild/bg_input.jpg) no-repeat; /* relative Pfadangabe für das Bild ../ eine Verzeichnisebene höher, da wir uns hier in der CSS Datei im CSS Ordner befinden */ width: 278px; border: 1px solid #aaa; border-radius: 5px; padding-left: 4px; margin-bottom: 12px; } #left form input[type='submit'] { /* Attributselektor [], selektiert ein input Feld mit dem Attribut type="submit", also hier die Absenden Schaltfläche */ font-weight: 600; width: 100px; } /* Rechte Spalte */ #right { float: left; width: 309px; padding: 30px 28px 0 32px; border-left: 5px solid #ccc; } #right li { margin-left: 20px; font-size: 16px; list-style-type: none; } #right li:first-child { font-weight: bold; font-size: 20px; margin-bottom: 18px; list-style-image: url(../bild/bg_li.png);/* Standard Listenpunkt durch bild ersetzen */ color: #db37bc; list-style-position: inside; } #right a { color: #0101DF; float: right; margin-top: 16px; font-size: 16px; } #right ul + ul { margin-top: 30px; } /* Definitionsliste dl */ #right dd, #right dt { margin-left:20px; } #right dd{ font-size: 16px; list-style: none; } #right dt { font-weight: bold; font-size: 20px; margin-bottom: 18px; display: list-item;/* Element zu einem <li> machen. display:list-item ist die Standard Darstellungseigenschaft für Listenpunkte. Durch die Änderung der Darstellungseigenschaft ist es möglich Eigenschaften zu verwenden die nur für Listen gedacht sind, wie z. B. list-style-image. */ list-style-image: url(../bild/bg_li.png);/* Standard Listenpunkt durch bild ersetzen */ color: #db37bc; list-style-position: inside; /* Standardmäßig wird ein Listenpunkt außerhalb des Elements dargestellt (outside).mit dem wert inside können wir Ihn im Element darstellen */ } #right dd + dt { margin-top: 30px; } #right p { margin-left: 20px; } #right p { font-size: 16px; list-style: none; } #right h3 { font-size: 20px; margin-bottom: 18px; margin-left: 21px; background: url(../bild/bg_li.png) left center no-repeat; padding-left: 20px; color: #db37bc; } #right p + h3 { margin-top: 30px; } /* Fußzeile */ footer { width: 752px; height: 33px; background: url(../bild/footer.jpg) no-repeat #F09; margin: 10px 0; padding-top: 10px; font-size: 17px; } /* Clearen */ navi ul:after, #right dd:after, #right li:after, #right p:after{ content:""; display:table; clear:both; }
Wie gesagt:
Die <ul> bzw, <dl> bzw. <p> tags passen sich nicht automatisch beim verkleinern des Browserfensters' an......
-
- 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
-
Nun denn, ich kann das Registrierungsformular posten. Da skalieren sich die Inputboxen wie gewünscht. Allerdings bricht beispielsweise die Überschrift
auch nicht......
Wenn Ihr mir helfen könntet, die Überschrift zu skalieren, könnte ich das u.U übertragen!!PHP
Alles anzeigen<!Doctype html> <!-- Definition des doctype-Modus --> <html> <!-- Definition des Stammverzeichnises --> <head> <!-- Definition des Kopfbereiches --> <meta charset="utf-8"> <!-- charset[utf-8:] definiert den deutschen Zeichensatz --> <title> HTML-Anmeldung </title> <!-- weist dem HTML-Dokument in der Registerkarte einen Namen zu --> <!-- hier ggf. CSS direkt einfügen --> <style> body{ background-color:yellow; font-size:21px; font-family:Times New Roman,Arial,sans-serif;} input{ float:left; width:200px; <!-- Länger der Inputbox --> border:5px solid red; background-color:#A9E2F3; border:3px solid red; padding:5px;} <!-- auch Höhe der Inputbox --> <!--textarea { background-color:red; }--> .double_underline { border-bottom:double 4px #000000;} .form{ float:right;} a:link, a:visited { font-family: Times New Roman, sans serif; font-size: 50px; color: #000000; text-decoration: none; } </style> </head> <body> <!-- Hier den HTML-Code einfügen --> <center> <p> <span style="font-size:36pt">Registrierungsformular</span></p> </center> <script language=JavaScript> <!-- Hier ggf. JS-Code einfügen --> </script> <?php ?> <!-- Hier ggf. php-Code einfügen --> <form action="registrieren.php" method="post"> <p><span class="double_underline">Bitte den Vornamen eingeben:</p> <input type="text" name="vorname"><br> <p><span class="double_underline">Bitte den Nachnamen eingeben:</p> <input type="text" name="nachname"><br> <p><span class="double_underline">Bitte das Geburtsdatum eingeben:</p> <input type="text" name="gbdat"><br> <p><span class="double_underline">Bitte die Postleitzahl eingeben:</p> <input type="text" name="plz"><br> <p><span class="double_underline">Bitte Strasse UND Hausnummer eingeben:</p> <input type="text" name="anschrift"><input type="text" name="hnr" style=width:40px><br> <p>ggf. sexuelle Vorlieben: <br><textarea style ="background-color: #E2A9F3" rows="10" cols="50" name="nachricht"></textarea></p> <input type="submit" name="button" value="Abschicken"><br><br><br> <label>Die doppelt unterstrichenen Felder sind verpflichtende Angabefelder!</label> <p><span class="form"><a href='index.html' title='Zurück zum Formular'>zurück zum Formular</a></span></p> </form> </body> </html>
-
Hallo
Meinst du die Überschrift:
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
-
Media Queries sprengt den Rahmen. Werda also morgen alle anstößigen Texte und Daten durch lorem ipsum ersetzen und dann die gesamte Homepage posten!
Dachte halt, eine Standardlösung müsste doch für dieses sicherlich nicht unbekannte Problem irgendwo auf der Hand liegen, nur halt nicht in meiner......
Bis morgen dann....! -
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 Funktionen, und auch keine Bibliotheken
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...