Element input mit Breite versehen

[Daniel N.]

Hallo,

ich möchte ein Formular erstellen, dass mit Hilfe einer Tabelle aufgebaut wird. Die darin enthaltenen Input-Elemente sollen die gesamte - durch die Tabellenspalten vorgegebenen - Breite in Anspruch nehmen.

Wenn ich für input die width mit "width: 100%" angebe, ragt das Eingabefeld über die Tabelle hinaus. Verwende ich statt input ein div, funktioniert die Darstellung so wie gedacht.

Hier ein kleines Beispiel zur Veranschaulichung:

  
<table style="width:600px">  
 <tr>  
  <td style="width:50%;">  
   <input type="text" value="input: nicht ganze Breite"  
    style="border: 5px solid green;" />  
  </td>  
 </tr>  
 <tr>  
  <td style="width:50%;">  
   <input type="text" value="input: width:100% --> mehr als ganze Breite"  
    style="width:100%;border: 5px solid green;" />  
  </td>  
 </tr>  
 <tr>  
  <td style="width:50%">  
   <div style="border: 5px solid green;">div: ganze Breite</div>  
  </td>  
 </tr>  
</table>  

Was mache ich falsch und wie mache ich es richtig?

Viele Grüße und vielen Dank
Daniel

[suit]

Was mache ich falsch und wie mache ich es richtig?

stichwort boxmodel
border wird zur breite dazugezählt, genaso wie padding und margin (die default etwas mehr als 0 sind somit hast du in summe 100% = 600px (was natürlich in deinem fall auch nicht stimmt, da du die default formatierungen von der tabelle nicht wegnimmst + padding + margin + 5px border auf jeder seite und das ist mehr als die tabelle breit ist

nutze keine tabellen zum strukturieren von formularen, verwende css (fieldsets und zur not ein paar divs) damit tust du dir leichter, da diese weitestgehend präsentationslos sind - tabellen sind das nicht und für layouts ohnehin nicht geeignet

[Daniel N.]

Hi,

stichwort boxmodel»» border wird zur breite dazugezählt, genaso wie padding und margin (die default etwas mehr als 0 sind somit hast du in summe 100% = 600px (was natürlich in deinem fall auch nicht stimmt, da du die default formatierungen von der tabelle nicht wegnimmst + padding + margin + 5px border auf jeder seite und das ist mehr als die tabelle breit ist

Das ist mir eigentlich klar. Daher hatte ich in der letzten Zeile in div-Element genutzt, was sich - ohne ein width=100% - so verhält, wie gewünscht. Ich dachte, das es sich sowohl bei div als auch bei input um block-Elemente handelt.

nutze keine tabellen zum strukturieren von formularen, verwende css (fieldsets und zur not ein paar divs) damit tust du dir leichter, da diese weitestgehend präsentationslos sind - tabellen sind das nicht und für layouts ohnehin nicht geeignet

Das sehe ich anders, bei Formularen eignen sich meiner Meinung nach Tabellen gut. Dieses Vorgehen wird übrigens auch in selfhtml empfohlen: "Um Beschriftung und Eingabefelder ordentlich zu positionieren, empfiehlt sich übrigens der Einsatz einer "blinden" Kapitel Tabelle", siehe http://de.selfhtml.org/html/formulare/eingabe.htm#felder

Viele Grüße
Daniel

[suit]

Das ist mir eigentlich klar. Daher hatte ich in der letzten Zeile in div-Element genutzt, was sich - ohne ein width=100% - so verhält, wie gewünscht. Ich dachte, das es sich sowohl bei div als auch bei input um block-Elemente handelt.

width: 100% != voreinstellung

in der voreinstellung ist üblicherweise auto definiert, das verhält sich NICHT wie 100%

ob ein element in der voreinstellung block oder inline oder ganz etwas anderes ist, ist unerheblich wenn man css richtig einsetzt

nutze keine tabellen zum strukturieren von formularen, verwende css (fieldsets und zur not ein paar divs) damit tust du dir leichter, da diese weitestgehend präsentationslos sind - tabellen sind das nicht und für layouts ohnehin nicht geeignet
Das sehe ich anders, bei Formularen eignen sich meiner Meinung nach Tabellen gut. Dieses Vorgehen wird übrigens auch in selfhtml empfohlen: "Um Beschriftung und Eingabefelder ordentlich zu positionieren, empfiehlt sich übrigens der Einsatz einer "blinden" Kapitel Tabelle", siehe http://de.selfhtml.org/html/formulare/eingabe.htm#felder

tabellen präsentieren in matrizen strukturierte daten

tabellen für formulare zu missbrauchen wo ich mit label, input und float alles wunderbar ohne zusatzelemente formatieren kann, halte ich nicht für sinnvoll

den link kenne ich übrigens - aber der satz impliziert, dass die tabelle selbst für das layout verantwortlich ist-  was ist, wenn du die labels über den inputs haben willst, oder dann links/rechts teilung? du müsstest den html quelltext ändern, mit einem ordentlich quelltext (css) nicht

[Daniel N.]

width: 100% != voreinstellung

in der voreinstellung ist üblicherweise auto definiert, das verhält sich NICHT wie 100%

ob ein element in der voreinstellung block oder inline oder ganz etwas anderes ist, ist unerheblich wenn man css richtig einsetzt

Sorry, ich kann deine Ausführungen nicht auf mein Beispiel/mein Problem übertragen. Was bedeutet das konkret für mein Beispiel?

tabellen präsentieren in matrizen strukturierte daten

... wie auch immer. Ich habe keinen Einfluß auf das HTML, da dieses generiert wird. Darauf habe ich keinen Einfluß. Ich kann lediglich CSS dazu steuern.

Viele Grüße
Daniel

[suit]

width: 100% != voreinstellung

in der voreinstellung ist üblicherweise auto definiert, das verhält sich NICHT wie 100%
ob ein element in der voreinstellung block oder inline oder ganz etwas anderes ist, ist unerheblich wenn man css richtig einsetzt

Sorry, ich kann deine Ausführungen nicht auf mein Beispiel/mein Problem übertragen. Was bedeutet das konkret für mein Beispiel?

du kannst jedem element ob block, inline oder sonstwas mit "displa: wert;" eine ander display eigenschaft zuweisen - da sind dann auch <div /> elemente mit display: inline und <span /> elemente mit display: block möglich - du bist hier nicht eingeschränkt

tabellen präsentieren in matrizen strukturierte daten
... wie auch immer. Ich habe keinen Einfluß auf das HTML, da dieses generiert wird. Darauf habe ich keinen Einfluß. Ich kann lediglich CSS dazu steuern.

wenn du keinen einfluss auf die inline stylesheets hast, die jetzt schon in deinem code sind, kannst du sie unmöglich überschreiben

ansonsten versuchs mit width: auto anstatt 100% - könnte ggf helfen - bei blockelementen ist auto die verfügbare breite abzüglich alle definierter werte für das boxmodel

http://www.w3.org/TR/REC-CSS2/visudet.html

[Daniel N.]

Hi,

du kannst jedem element ob block, inline oder sonstwas mit "displa: wert;" eine ander display eigenschaft zuweisen

Ich habe display nicht explizit reingeschrieben, da es ja per Default schon richtig, auf display:block steht. So ist zumindest meine Annahme.

wenn du keinen einfluss auf die inline stylesheets hast, die jetzt schon in deinem code sind, kannst du sie unmöglich überschreiben

Sorry, habe mich undeutlich ausgedrückt. Ich habe keinen Einfluß auf das generierte HTML. Ich kann CSS-Einträge für das style-Attribut zusteuern und auch per class und sonstigen anderen Selektoren CSS einfließen lassen. Also in Sachen CSS habe ich alle Möglichkeiten.

ansonsten versuchs mit width: auto anstatt 100% - könnte ggf helfen - bei blockelementen ist auto die verfügbare breite abzüglich alle definierter werte für das boxmodel

Davon war ich ausgegangen, das ist in meinem Beispiel die erste Zeile. Leider funktioniert das nicht. Genau das ist meine Fragestellung!

Dieses Problem besteht übrigens auch, wenn ich auf Tabellen verzichte:

  
<div style="background-color: yellow; width: 200px; height: 200px;">  
  
<input type="text" value="input: width:100% -->  mehr als ganze Breite"  
  style="width: 100%; border: 5px solid fuchsia;" />  
  
<input type="text"  
  value="input: width:auto --> nicht die ganze Breite"  
  style="width: auto; border: 5px solid fuchsia;" />  
  
</div>  

Könnte es etwas mit den Unterschied zwischen replaced- und non-replaced Block-level Elementen zu tun haben? Das habe ich in der Spec noch nicht komplett nachgelesen bzw. verstanden.

Vielen Dank und viele Grüße
Daniel

[Daniel N.]

Hallo,

ich habe folgende Workaround gefunden, eine Lösung sieht meiner Meinung nach anders aus:

  
<style type="text/css">  
  
table {  
 background-color: silver;  
 border-collapse: collapse;  
}  
  
table td {  
 border: 1px solid red;  
}  
  
input {  
 border: 5px solid green;  
}  
  
<table width="400">  
 <tr>  
  <td>Name</td>  
  <td style="padding-right: 12px;"><input style="width:100%"  
   type="text" value="Name" /></td>  
 </tr>  
</table>  
  
</style>  

Ich ergänze also einen rechten Innenabstand, der so groß ist wie die linken/rechten Rahmen des divs und des Inputs, also hier 1+1+5+5=12.

Der Firefox käme mit 5+5=10 Pixeln aus, der IE braucht 12. Der Opera zeigt den Innenabstand an.

Welcher Browser verhält sich denn jetzt korrekt?
Wer kennt hierfür eine richtige Lösung?

Vielen Dank und viele Grüße
Daniel