Ankündigung

Einklappen
Keine Ankündigung bisher.

Schriftgröße in Kästchen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Schriftgröße in Kästchen

    Hallo, besonders beim Text in Kästchen funktioniert die Darstellung Text NICHT richtig,wenn der Benutzer über den Bowser die Schriftgröße einstellt. (mit zoom geht das richtig).
    Ich habe mit z.B. das Kästchen mit width: 14% und die Schrift font-size: 90% eingestellt, natürlich mit mehreren Abfragen auf die Bildschirmgröße das dann auch angepaßt (responsive).
    Stellt ein User die Schriftgröße von 16 auf 18 oder mehr um, gibt es da Verschiebungen im Kästchen. overflow: hidden; ist vorhanden.

    Es gibt so eine Funktion zur Begrenzung, die funktioniert aber nicht bei allen Browsern, kann ich nicht nutzen (-webkit-text-size-adjust: 125% z.B.)

    Eigentlich wundert es mich, dass es da keine einfache Lösung gibt oder doch?

    Natürlich kann man im Kästchen noch Spielraum für eine Vergrößerung einkalkulieren, dann muss man aber noch etwas Platz lassen, das will ich aber vermeiden.

    Gerhard

  • #2
    Hallo,

    wie wäre es mit CSS einen Rahmen um den Text herum zu setzen, dann würde der Rahmen mit dem Text mitwachsen?

    >> https://wiki.selfhtml.org/wiki/CSS/E...u%C3%9Fenlinie (CSS/Eigenschaften/äußere Gestaltung/Außenlinie)

    daniel5959
    FindeLinks.de - Kurzinfos mit Linkempfehlung
    Homepage-FAQs.de - bleibt als Archiv online

    Kommentar


    • #3
      Ohne Beispiel können wir dir nicht konkret helfen.

      In jedem Fall scheint die Einheit Prozent für so ein Vorgehen ungeeignet, da es im CSS für Prozent sehr viele Ursprünge, Besonderheiten und Ausnahmen gibt.

      Um Abwärtskompatibel zu bleiben ließ sich in der weiteren Entwicklung von HTML / CSS daran nichts mehr ändern. Deshalb wurden im Laufe der Jahre weitere Einheiten erdacht und hinzugefügt, die sich einheitlicher Verhalten wie em, rem, vw oder vh. Damit sollte sich dein Vorhaben umsetzen lassen. Mir erscheint rem als am sinnvollsten.

      Kommentar


      • #4
        Hallo,
        hier das Beispiel als Anlage pdf.:
        In der Anlage ist zu sehen, auf Seite 1 noch o.k., auf Seite 2 mit der größeren schrift 18 dann auch vergrößerte Kästchen,
        auf seite 3 ist dann mit schriftgröße 22 das problem in rechten kästchen zu erkennen, hunde ist abgeschnitten.
        wegen den kleinen kästchen ist das auch begrenzt vom text und ausdehnung, ist wie eine box für ein menüsystem.

        für das responsive design mache ich das dann stufenweise so:
        @media screen and (max-width: 64em) {
        .xxa {
        width: 14%;
        font-size: 90%;
        color: #800000;
        }
        }

        an rem hatte ich auch schon gedacht, das wird aber nicht viel ändern? ist ja ähnlich %.

        Gerhard
        Angehängte Dateien

        Kommentar


        • #5
          ist ja ähnlich %
          Nein, intern funktioniert rem ganz anders als Prozent.

          Auf Pixel-Angaben (falls du die verwendest) sollte bei der Schriftgröße grundsätzlich verzichtet werden.

          Wir kennen noch immer nicht dein HTML und dein CSS und wie die Besucher die Schriftgröße ändern können. Deshalb können wir dir keine konkreten Infos geben.

          Wie soll der Text sich überhaupt verhalten wenn der zu groß wird? Soll der Kasten in die nächste Zeile rutschen? Soll der Text, sofern er aus mehreren Worten besteht, umbrechen?

          Am einfachsten wird wohl eine Lösung mit Media Queries unter der Verwendung der Einheit rem sein. Das hängt aber von deinem Quelltext ab und in wie weit du den ändern kannst.
          Zuletzt geändert von MrMurphy; 15.10.2020, 12:09.

          Kommentar


          • #6
            soory, hatte den Code zugewiesen:

            @media screen and (max-width: 64em) {
            .xxx {
            width: 24%;
            font-size: 100%;
            color: #000000;
            }
            }

            Aber wesentlich ist, dass ich die Kästchen und die Schrift in einer Zeile flexibel mache
            und das dann abhängig der Bildschirmgröße resposive steuere, mit mehreren Anweisungen.

            es fehlt noch so ein scheinbar einfacher code wie max-font-size oder gibt es einen Trick?


            gerhard

            .

            Kommentar


            • #7
              Die Höhe der Container nicht fest sondern variabel lassen. Dann sollte es mit der Überschrift und mit "Hunde" klappen.

              Kommentar


              • #8
                hi, danke für die tips, ich werde wohl am wochende oder nächste woche das mit rem probieren,
                das muss ich mir erst genau anschauen.
                ich hatte ja extra auf % umgestellt und keine pixel angegeben um das flexibel zu halten..
                die höhe container kann ich da nicht variabel lassen.

                ich habe aber gesehen, da gibt es bei vielen anderen website probleme, wenn die schriftgröße im bowser umgestellt wird.
                beispiel anlage:

                mit umstellung schriftgröße browser meine ich z.b. bei firefox unter einstellungen > allgemein > sprache - Erscheinungsbild die
                größe einstellen.also von 16 auf z.b. 22
                viele ältere menschen nutzen das, wie ich erfahren habe.

                meine site ist auch noch nicht im netz, ich entwickle das noch.

                gerhard
                Angehängte Dateien

                Kommentar


                • #9
                  die höhe container kann ich da nicht variabel lassen.
                  Warum denn nicht? Aus Gründen der Optik, weil sich dann das Layout verändert?

                  Kommentar


                  • #10
                    ja, ich will das layout da nicht verändern, weil solche Kästchen noch in der Zeile darunter kommen.
                    optisch unterschiedliche höhen schaut da nicht gut aus.
                    ich sehe ja auch bei anderen website, die lassen darunter noch eine 2. zeile frei, dann kann sich der
                    text darunter ausdehnen. die haben aber, wie ich gesehen habe, dann ggf. auch das schriftgrößenproblem.
                    vermutlich ist das ein problem vieler website.
                    nächste woche muss ich das nochmals testen/umstellen, mal sehen, es gibt da verschiedene möglichkeiten,
                    will mir das mit REM auch anschauen.
                    gerhard





                    Kommentar


                    • #11
                      Hallo,

                      vielleicht mal einen Screenshot-Ausschnitt hochladen, mit den Kästchen und was darum herum liegt, damit man sich die Sache besser vorstellen und eine passende Lösung anbieten kann.

                      daniel5959
                      FindeLinks.de - Kurzinfos mit Linkempfehlung
                      Homepage-FAQs.de - bleibt als Archiv online

                      Kommentar


                      • #12
                        ja, ich will das layout da nicht verändern, weil solche Kästchen noch in der Zeile darunter kommen.
                        optisch unterschiedliche höhen schaut da nicht gut aus.
                        Ich fürchte, hier kannst Du den Pelz des Bären nicht waschen, ohne ihn nass zu machen: Willst Du Menschen mit schlechten Augen unterstützen, musst Du in Kauf nehmen, dass das Layout weniger schön wird, wenn man die Schriftgröße erhöht. Das wirkt sich ja nur aus wenn man letzteres tut, bei Standard-Schriftgröße haben die Kästchen die normale Höhe. Jedenfalls in meinem Browser, Opera, passt sich die Höhe eines Containers automatisch an, wenn ich die Schriftgröße erhöhe.

                        Kommentar


                        • #13
                          ich hatte es ja schon mal angesprochen. Einfacher wird es wenn du ein neues Template nimmst.
                          https://arnego2.com <Webseiten, Umbau ab €80 und einiges mehr>

                          VPS 8GB RAM 50 GB ROM < Server in der EU, 1rstes Jahr €37

                          Kommentar


                          • #14
                            hi,

                            ich habe das Thema abgeschlossen.Mit REM habe ich aber nicht mein Ziel erreicht.
                            Trotzdem verwende ich jetzt REM, aber nicht für die Kästchen.
                            Dabei habe ich den 62,5% Trick erfahren.
                            Mit css Body und font-size 62,5% kann man das auf 10px definieren
                            und dann leicht umrechnen, font-size 160% sind dann 16px usw.
                            Bei der Schrift geht das gut, aber in den Kästchen habe ich mir
                            etwas einfaches einfallen lassen, ich lasse noch etwas Platz in den Kästchen.
                            Dann kann ich auch eine größere Schrift unterbringen.
                            Über Media verwende ich dann % in CSS.

                            Da ist noch eine Krücke im System bei CSS, nicht umsonst wurde das mit webkit versucht.

                            gerhard

                            Kommentar

                            homepage-forum.de - Hilfe für Webmaster! Statistiken

                            Einklappen

                            Themen: 56.712   Beiträge: 429.186   Mitglieder: 28.473   Aktive Mitglieder: 45
                            Willkommen an unser neuestes Mitglied, hautarztpraxisreytan.

                            Online-Benutzer

                            Einklappen

                            169 Benutzer sind jetzt online. Registrierte Benutzer: 0, Gäste: 169.

                            Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

                            Die neuesten Themen

                            Einklappen

                            Die neuesten Beiträge

                            Einklappen

                            • AGW
                              welches Webmail
                              Hallo,

                              ich nutze gerade Roundcube, aber irgendwie würde ich gerne ein anderes Webmail nutzen, nur welches? Könnt ihr welche empfehlen? Natürlich kostenlos.
                              21.10.2020, 14:04
                            • arnego2
                              Antwort auf welches Webmail
                              Ist eigentlich egal welche App du nutzt wenn du ein Email Programm nutzt wie Thunderbird, Outlook....
                              Gestern, 20:18
                            • Localfu
                              Adobe Flash umbenennen
                              Da Adobe den Flashplayer ab 31. Dezember nicht mehr zur verfügung stellt, könnte man überlegen, dass man diese Sparte umbenennt. Mein Vorschlag wäre HTML5 Animation und Video.
                              Gestern, 18:17
                            • silent
                              Diashow
                              Guten Tag,
                              ich möchte in meiner rechten Div ein Informations-Panal hinzufügen, welches man mit Bildern jederzeit updaten kann. Die Bilder sollen per Diashow angezeigt werden. Das funktioniert auch alles reibungslos. Mein Problem ist es, das ich das nicht hinbekomme, dass sich die Bilder automatisch...
                              20.10.2020, 09:13
                            • daniel5959
                              Antwort auf Diashow
                              Hallo,

                              ich muss da aussteigen - betrifft auch gesendete Nachricht an mich - und es den CSS-, JS und PHP-Experten überlassen.

                              daniel5959
                              Gestern, 15:03
                            • silent
                              Antwort auf Diashow
                              Update:

                              Ich bin mittlerweile soweit, dass ich die Inhalte automatisch aus dem Ordner beziehen kann. Nach den empfehlungen von Sempervivum und eigener recherche, bin ich soweit, dass ich das versuchen werde, mit Javascript zu verwirklichen (automatische Diashow).


                              Code...
                              Gestern, 14:56
                            • Hadrian9393
                              Loginscript funktioniert nicht
                              Hallo PHP- und SQL-Profis,

                              ich habe ein Loginscript getestet, dieses funktioniert allerdings nicht wie gewünscht.

                              <?php
                              session_start();
                              $pdo = new PDO("mysql:host=localhost;dbname=php-einfach", "root", "");
                              ?>
                              <!DOCTYPE...
                              28.09.2020, 17:55
                            • Hadrian9393
                              Antwort auf Loginscript funktioniert nicht
                              Vielen Dank für die Hilfe, ich werde die Lösungsvorschläge umsetzen.
                              21.10.2020, 19:39
                            • Sempervivum
                              Antwort auf Diashow
                              Guten Morgen silent, ich hatte die Lösung schon gepostet, aber das Forum hier hat einen Spamfilter und der hat dieses Posting zunächst gesperrt. Vermutlich weil zwei Links darin waren. Es muss von einem Moderator/Admin erst frei gegeben werden. Ich versuche es Mal ohne Links per privater Nachricht...
                              21.10.2020, 07:45
                            • silent
                              Antwort auf Diashow
                              Guten Morgen Sempervivum ,
                              wie meinst du das?
                              Du musst mir ja nicht die Lösung direkt sagen, du könntest mich auch einfach auf den richtigen Weg bringen.

                              VG
                              21.10.2020, 07:36
                            Lädt...
                            X