Heinz-Jochen: Button responsiv machen

Moin, wie kann ich einen Button:

              <form action="/phplib/Sendmess.php" method="post">
                <input name="Name" type="text">
                <input name="Vorname" type="text">
                     ................
                <button type="submit">Nachricht senden</button>
              </form>

responsiv machen? Im Augenblick sieht der große Button hässlich aus auf meinem Smartphone.

  1. @@Heinz-Jochen

    Zunächst: Deine Eingabefelder haben keine Beschriftung.

    wie kann ich einen Button … responsiv machen?

    Das ist er bereits. (Es sei denn, du hast etwas dagegen getan.)

    Im Augenblick sieht der große Button hässlich aus auf meinem Smartphone

    Was heißt hässlich? Wie sieht er aus, wie soll er aussehen?

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Mit "hässlich" meinte ich seine Größe im Verhältnis zu der Umgebung. Er wird in der Tat bei kleinem Screen nicht kleiner. Womit ich das verursacht habe, ist mir schleierhaft.

      1. Hallo Heinz-Jochen,

        Womit ich das verursacht habe, ist mir schleierhaft.

        Da gibt es so viele Möglichkeiten, dass das ohne Kenntnis deiner Seite nur ein wildes Umhergerate wird.

        Bis demnächst
        Matthias

        --
        Rosen sind rot.
        1. Im nachfolgenden Beispiel verkeinern sich die Buttons nicht:

          <html lang="de">
          <head>
          </head>
          <body>
                        <form action="/........." method="post">
                          <button type="submit">Nachricht senden</button>
                        </form>
                        <form action="/........." method="post">
                          <button style="font-size: 2em;" type="submit">Nachricht senden</button>
                        </form>
          </body>
          </html>
          
          1. Hallo Heinz-Jochen,

            Im nachfolgenden Beispiel verkeinern sich die Buttons nicht:

            Das hilft nicht. Für Gestaltung ist in erster Linie CSS zuständig. Du könntest auch prüfen, ob du im head
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            eingebaut hast

            Bis demnächst
            Matthias

            --
            Rosen sind rot.
            1. Hallo Matthias, die Meta-Angabe ist vorhanden. Bilder (img) werden auch richtig verkleinert.

              1. Hallo Heinz-Jochen,

                Hallo Matthias, die Meta-Angabe ist vorhanden. Bilder (img) werden auch richtig verkleinert.

                Na dann ist ja alles in Ordnung. Ich habe kein Interesse an weiteren Raterunden.

                Bis demnächst
                Matthias

                --
                Rosen sind rot.
          2. Aloha ;)

            Im nachfolgenden Beispiel verkeinern sich die Buttons nicht:

            <html lang="de">
            <head>
            </head>
            <body>
                          <form action="/........." method="post">
                            <button type="submit">Nachricht senden</button>
                          </form>
                          <form action="/........." method="post">
                            <button style="font-size: 2em;" type="submit">Nachricht senden</button>
                          </form>
            </body>
            </html>
            

            Ein Button ist so groß wie sein Inhalt. Wenn du die Schrift darin 2em hoch machst, ist der Button so hoch, dass die 2em große Schrift rein passt.

            Warum sollte sich der Button dann überhaupt verkleinern. Oder anders gefragt: Schon mal versucht, einem Bild eine feste Breite von 2em zu geben? Hat sich das verkleinert? Ich denke nicht.

            Grüße,

            RIDER

            --
            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
            # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
            1. Hallo Camping_RIDER, ein Bild hat doch selbst eine bestimmte Größe. Ich habe in der CSS gefunden (ich habe die CSS nicht erstellt):

              img
              {
                max-width: 100%;
              	height: auto;
              }
              

              Dies ist wohl verantwortlich für die mögliche Verkleinerung. Ich habe gedacht/gehofft, dass eine ähnliche Angaben auch für Buttons möglich wären.

              1. Aloha ;)

                img
                {
                  max-width: 100%;
                	height: auto;
                }
                

                Dies ist wohl verantwortlich für die mögliche Verkleinerung. Ich habe gedacht/gehofft, dass eine ähnliche Angaben auch für Buttons möglich wären.

                Klar. Du musst ja nur den Button genauso stylen wie das Bild, dann passiert auch das Gleiche wie mit dem Bild.

                 button
                 {
                   max-width: 100%;
                 	 height: auto;
                 }
                

                Du wirst nur nicht so viel davon sehen, da der Button dann erstmal so breit sein muss, dass er 100% einnimmt, bevor er verkleinert wird. Zum Verkleinern wird übrigens der Text umgebrochen. Die Textgröße bleibt dabei natürlich gleich (was dich aber auch nicht wundern dürfte, denn du hast ja eine feste eingestellt).

                Ich denke du solltest den [Rat von @Gunnar Bittersmann](https://forum.selfhtml.org/self/2018/may/27/button-responsiv-machen/1723102#m1723102) beherzigen.

                Grüße,

                RIDER

                --
                Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
          3. @@Heinz-Jochen

            Wie Camping Rider[1] schon anmerkte, ist der Button so groß, weil du ihn so groß gemacht hast.

            Und wie Matthias schon anmerkte, solltest du sämtliche Darstellungsangaben im Stylesheet tätigen; nicht inline in style-Attributen.

            Dann hättest du auch die Möglichkeit, per media query die große Schrift nur für große Viewports anzugeben.

            Es geht aber auch ohne media query, und das quasi stufenlos.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann

            1. @Camping_RIDER Wie wär’s mit einer screenreaderfreundlichen Schreibweise? ↩︎

            1. Aloha ;)

              ^1: @Camping_RIDER Wie wär’s mit einer screenreaderfreundlichen Schreibweise?

              Wie meinen? Meines Namens?

              Grüße,

              RIDER

              --
              Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
              # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
              1. @@Camping_RIDER

                ^1: @Camping_RIDER Wie wär’s mit einer screenreaderfreundlichen Schreibweise?

                Wie meinen? Meines Namens?

                Ja, deines, Camping Unterstrich er-i-de-e-er.

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. Hallo,

                  Ja, deines, Camping Unterstrich er-i-de-e-er.

                  Du meinst sowas wie "Kämpingraider"?

                  Gruß
                  Kalk

                  1. Hi,

                    Du meinst sowas wie "Kämpingraider"?

                    Nein, Kämpingtwix - denn Raider heißt jetzt twix!

                    PS: rider != raider

                    cu,
                    Andreas a/k/a MudGuard

                2. Aloha ;)

                  ^1: @Camping_RIDER Wie wär’s mit einer screenreaderfreundlichen Schreibweise?

                  Wie meinen? Meines Namens?

                  Ja, deines, Camping Unterstrich er-i-de-e-er.

                  Ach, ich find das voll okay. Das unterstreicht, dass nicht jeder mich immer so versteht wie ich das tu. Das fängt halt bei meinem Namen an 😝

                  Grüße,

                  RIDER

                  --
                  Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                  # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
            2. @Gunnar und Matthias, der Hinweis auf Inline Style-Attribute hat mit dem Problem nichts zu tun. In meinem einleitenden Beitrag sind auch keine vorhanden sondern nur in dem späteren Beispiel um explizit eine größeren Button zu erzeugen. Hierfür wäre es wohl übertrieben gewesen, eine CSS anzulegen.

              @Gunnar: Der thread (quasi stufenlos) ist für mich unverständlich. Es wird hin- und hergeschrieben, ein Button wird nie erwähnt.

              1. @@Heinz-Jochen

                In meinem einleitenden Beitrag sind auch keine vorhanden sondern nur in dem späteren Beispiel um explizit eine größeren Button zu erzeugen.

                Fassen wir das bisherige Geschehen zusammen:

                1. Matthias sagt: Ohne deinen Code zu kennen können wir dir nicht helfen
                2. Du: Mein Code sieht so aus: style="font-size: 2em;"
                3. Darauf ich: Dein Button ist so groß wegen style="font-size: 2em;"
                4. Du: Ich habe gar kein style="font-size: 2em;" in meinem Code.

                Sag mal, geht’s noch?

                @Gunnar: Der thread (quasi stufenlos) ist für mich unverständlich. Es wird hin- und hergeschrieben, ein Button wird nie erwähnt.

                Es ist auch völlig unerheblich, ob das auf eine Überschrift oder einen Button angewandt wird. Du bist mit den Grundlagen von CSS vertraut?

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. Wer lesen kann, hat Vorteile. Du drehst ja oben einiges um! Schau den ersten Thread an und wiederhole dann die Aussage von 2em! Ich gebs auf!

                  1. Hallo Heinz-Jochen,

                    Ich gebs auf!

                    Oder zeig einfach deine Seite.

                    Bis demnächst
                    Matthias

                    --
                    Rosen sind rot.