Maximale Breite eines Eingabefeldes festlegen

[kermit]

Hallo liebe Community!

Ich habe folgendes Problem: Es liegt eine fertige Login-Oberfläche mit Eingabefeldern für Username sowie Passwort vor.
Derzeit sieht das ganze so aus, dass sich die Eingabefelder über die ganze Fensterbreite ziehen.
Ich würde das gerne so gestalten, dass die beiden Eingabefelder eine Maximale Breite haben, sodass sie niemals breiter werden als diese festgelegte Maximalbreite.

Wie geht denn das?

Hier das Beispiel:

www.charwot.com/webrate

Wenn man bei "Matrikelnummer" etwas eingibt, kommt man auf die Seite mit den zwei EIngabefeldern. Im Grunde ist die erste Seite aber auch Aussagekräftig genug, da hier das gleiche Problem mit genau einem Eingabefeld vorhanden ist.

Für eie  Lösung wäre ich ewig dankbar!
Liebe Grüße, Kermit

[Gunnar Bittersmann]

@@kermit:

nuqneH

… sodass sie niemals breiter werden als diese festgelegte Maximalbreite.

Wie geht denn das?

Mit der entsprechenden CSS-Eigenschaft. http://lmgtfy.com/?q=CSS+maximale+Breite

Qapla'

[Kermit]

Ja, du hast natürlich Recht. Das hätte ich eigentlich selbser finden müssen.
Dennoch bin ich dir seeeehr Dankbar für die Hilfe, denn jetzt habe ich eine Lösung gefunden =).

Liebe Grüße, Kermit

[Encoder]

Das Ding hat width:100%, is ja klar :-)

Solche Felder haben normalerweise eine feste Breite statt einer maximalen. Vor allem wenn die Eingabe ziemlich klar definiert ist, also z.B. Benutzername, Passwort, sonstige Kennung, Name, Adresse und so Dinge, die alle eine sehr begrenzte zu erwartende Länge haben. Da braucht man die nicht mit der Fenstergröße mitwachsen lassen und spart sich einiges an Aufwand um das gut aussehen zu lassen.

[Gunnar Bittersmann]

@@Encoder:

nuqneH

Solche Felder haben normalerweise eine feste Breite statt einer maximalen.

Ähm, nein. Von „responsive web design“ hast du schon mal gehört?

In schmalen Viewports (Smartphones) möchte man Eingabefelder sicher die ganze Breite einnehmen lassen, ohne dass sie darüber hinausgehen. I breiteren Viewports sollen sie aber nicht beliebig groß werden.

Also ist die Kombination { width: 100%; max-width: 42em } durchaus sinnvoll.

Qapla'

[Encoder]

Muss dir Recht geben!