Formatierung von Formularen

[Robert Steichele]

Hallo zusammen,

wie kann ich erreichen, dass Formularfelder im Firefox, im Opera, im IE xx ... genau dieselbe Breite haben, sprich das ganze Formular wie ein BLock aussieht und nicht einzelne Felder kürzer btw. länger sind als andere?
Kann ich auch die Breite von Select-Feldern genau bestimmen? Mmentan sind diese bei mir so breit wie der längste Eintrag.

Gruß
Robert

 

[Maik]

Hi,

die Formatierung eines Formulars und seiner Formularelemente ist mit CSS möglich, und wenn es um eine einheitliche Breite geht, ist die width-Eigenschaft gefragt.

Hier noch zwei interessante Links zum Thema:

1. Formulare mit CSS formatieren
2. Styling form controls

 

[Robert Steichele]

Danke für die Antwort, ich werde mir die Sachen mal durchlesen. Was ich allerdings gemeint habe ist folgendes. Ich formatiere in einem Formular alle Eingabefelder mit einer einheitlichen Breite. Die Textareas passe ich mit cols soweit an, dass die Breite zu den Eingabefeldern passt. Select-Felder sind bei mir immer so breit wie der längste Eintrag, das wäre also Zufall, wenn die genauso breit wären wie der Rest.
Dies passt dann z.B. im Internet Explorer alles zusammen. Rufe ich das Formular jetzt im Firefox, Opera etc. auf sind die z.B. die Textereas nicht mehr genauso breit wie die Eingabefelder sondern kürzer oder länger.

Ich habe aber schon andere Formulare gesehen, bei denen alle Elemente immer gleich breit sind, egal in welchem Browser diese aufgerufen werden. Das heißt, dass z.B. die Textereas evtl.Browserabhängig formatiert werden und dass es für Select-Felder eine Möglichkeit geben muß um denen eine feste Breite zuzuweisen.

Stimmt dass so?

 

[PhoenixXP]

Mit

  button, input, select textarea {
    width: Zahl[px|em|%]
  }

kannst du allen Formularelementen die gleiche Breite geben. Auf Pixel als Einheit würde ich nicht zurückgreifen, weil der IE dann die Schaltflächen verzerrt darstellt.