Eingabefeld auf restl. Bildschirmbreite ausdehnen ohne Umbruch

[Rico]

Hallo,

ich möchte in einer Zeile, d.h. ohne Umbruch 3 Auswahllisten und ein Eingabefeld nebeneinander ausrichten.

Die Ausrichtung aller Elemente ohne Umbruch ist über folgenden css-Code problemlos möglich:

form
     {
        padding:          0px;
        margin:           0px;
     }

select,
     input
     {
        color:            #b2b2b2;
        font-family:      Verdana;
        font-size:        10px;
        font-weight:      bold;
        display:          block;
        border:           1px #7b7d7b solid;
        background-color: #525552;
        float:            left;
        margin-bottom:    14px;
     }

input
     {
        width:            auto;
     }

select:focus,
     input:focus
     {
        background-color: #636563;
     }

Nun möchte ich aber das Eingabefeld auf die verbleibende Bildschirmbreite ausdehnen und das klappt nicht.

Das Eingabefeld wird mir bei der Angabe "width: 100%;", auch in Verbindung mit "float: right;", in die
nächste Zeile verschoben, was ich nicht haben will.

Wie kann ich es bewerkstelligen, dass sich das Eingabefeld auf die verbleibende Bildschirmbreite ausdehnt,
ohne feste Angabe von Pixeln, da das gesamte Layout meiner Seite variabel ist, ohne aber einen Umbruch
zu bekommen, die Angabe "width: auto;" wird scheinbar ignoriert?

Danke und Gruß
Rico

[suit]

Nun möchte ich aber das Eingabefeld auf die verbleibende Bildschirmbreite ausdehnen und das klappt nicht.

css kann unmöglich die bildschirmbreite kennen, auch nicht die breite des displays selbst, die breite des desktops, die breite der sichbaren fläche des desktops oder die breite des browserfensters (egal in welcher maßeinheit) - lediglich die breite des viewports

Das Eingabefeld wird mir bei der Angabe "width: 100%;",

width + padding + margin + border = tatsächliche breite

nachdem formularfelder per default links und rechts etwas padding und üblicherweise einen rahmen haben, hast du defintiv mehr als 100% breite - das solltest du bedenken

zu bekommen, die Angabe "width: auto;" wird scheinbar ignoriert?

formularfelder sind etwas eigen - da kann das schon vorkommen

dir ist aber schon klar, dass ein formularfeld welches so breit ist wie der viewport meines browsers (> teilweise 3000 px), sehr komisch aussehen könnte bei normalen menschen ist mittlerweile auch 1680x1050 recht verbreitet - dh ~ 1650px viewportbreite

[Beat]

Ich sehe deinem Problem an, dass dein Code eine semantische Schwachstelle hat.
Gehe ich recht in der Annahme, dass du keine <label> Beschriftungen für deine Felder verwendest?
Wenn ja, überdenke dein Design.

mfg Beat

[Rico]

Hallo Beat,

das ist richtig, ich verwende keine <label>-Beschriftungen.

Sind diese von grundlegender Bedeutung?

Gruß
Rico

[Beat]

das ist richtig, ich verwende keine <label>-Beschriftungen.
Sind diese von grundlegender Bedeutung?

Sie sind hilfreich bei der Benutzerführung.
Wenn eine Checkbox mit einem Label verbunden ist, dann wird auch durch Click auf den Labeltext die Checkbox umgeschaltet.
Das ist nur ein mir bekannter Vorzug. Bestimmte User-Agents könnten aus der eindeutigen Zuordnung zusätzliche Hilfestellung liefern.

mfg Beat

[Auge]

Hallo

Das ist nur ein mir bekannter Vorzug.

Wieso? Ich kenne den auch. ;-)

Aber ja, das Verhalten, mit einem Klick auf den zum Formularelement gehörenden Text, das Element zu aktivieren oder es umzuschalten, ist eine Nachbildung der entsprechenden Funktion der programmeigenen Formulare lokaler Programme (so sich der/die Programmierer dieser Funktion bedienten, was leider nicht alle tun).

Tschö, Auge