nicht angemeldet
Gunnar Bittersmann
Matthias Apsel
Matthias Apsel
Camping_RIDER
Gunnar Bittersmann
Camping_RIDER
Moin, wie kann ich einen Button:
Tabellenkalk
MudGuard <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.
@@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 🖖
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.
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
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>
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
Hallo Matthias, die Meta-Angabe ist vorhanden. Bilder (img) werden auch richtig verkleinert.
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
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
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.
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
@@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 🖖
@Camping_RIDER Wie wär’s mit einer screenreaderfreundlichen Schreibweise? ↩︎
Aloha ;)
^1: @Camping_RIDER Wie wär’s mit einer screenreaderfreundlichen Schreibweise?
Wie meinen? Meines Namens?
Grüße,
RIDER
@@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 🖖
Hallo,
Ja, deines, Camping Unterstrich er-i-de-e-er.
Du meinst sowas wie "Kämpingraider"?
Gruß
Kalk
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
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
@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.
@@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:
style="font-size: 2em;"style="font-size: 2em;"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 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!
Hallo Heinz-Jochen,
Ich gebs auf!
Oder zeig einfach deine Seite.
Bis demnächst
Matthias