Breite eines Textfeldes

[theCSSbeginnerer]

Hi,

ich benutze ein 3-spaltiges Design, sehr ähnlich dem aus dem Beispiel hier.

Die äußeren Spalten haben ein feste Breite, die innere nimmt den gesamten restlichen Platz ein. Das funktioniert auch wunderbar.

Jetzt soll in der inneren Spalte ein Textfeld neben einem Button stehen. Letzterer hat eine feste Breite von 80 Pixeln. Wie muss ich jetzt den Style des Textfeldes (und eventuell der Form?) wählen, damit das Textfeld die größtmögliche Breite einnimmt?

MfG

[Gunnar Bittersmann]

@@theCSSbeginnerer:

nuqneH

ich benutze ein 3-spaltiges Design

Online-Beispiel, bitte.

Qapla'

[LX]

Mache ein div darum, das die volle Breite einnimmt und position relative hat, dann gebe der textarea display block und einen margin-right mit, so dass genügend Platz für den Button ist, den Du innerhalb des divs mit position absolute / top / right positionierst.

Gruß, LX

[Gunnar Bittersmann]

@@LX:

nuqneH

Mache ein div darum

Die typische Antwort von HTML/CSS-Unkundigen.

Qapla'

[LX]

Oder die typische Antwort, wenn man aufgrund mangelnder Angaben ein beliebiges Block-Element braucht, ansonsten hätte ich auch ein fieldset oder etwas Passenderes vorgeschlagen. Da ich nicht wußte, ob ein solches bereits anderweitig verwendet wird, bleibt nur das div.

Gruß, LX

[Gunnar Bittersmann]

@@LX:

nuqneH

Oder die typische Antwort, wenn man aufgrund mangelnder Angaben ein beliebiges Block-Element braucht

Möglicherweise braucht man keins und kommt mit den schon vorhandenen Elementen aus.

Da ich nicht wußte, ob ein solches bereits anderweitig verwendet wird, bleibt nur das div.

Nö, da bleibt nachfragen.

Qapla'

[theCSSbeginnerer]

div#MiddleRow {  
	margin-left: 30px;  
	margin-right: 30px;  
	max-width: 900px;  
}  
	  
div#MiddleRow div#ChatBox {  
	background: #A8D28F;  
	width: auto;  
	min-height: 45px;  
	margin: 0 auto;  
	padding: 2px 2px 0px 2px;  
	border: dotted 2px #7DBC57;  
	margin-bottom: 5px;  
}  
  
	div#MiddleRow div#ChatBox div#From {  
		padding: 4px 0px 0px 0px;  
		float: left;  
		width: 120px;  
		height: 100%;  
		min-height: 43px;  
		text-align: center;  
	}  
	  
		div#MiddleRow div#ChatBox div#From div#Name {  
			font: bold 14px Verdana, Arial, Helvetica, sans-serif;  
		}  
  
		div#MiddleRow div#ChatBox div#From div#Date {  
			font: bold 9px Verdana, Arial, Helvetica, sans-serif;  
		}  
		  
	div#MiddleRow div#ChatBox div#Message {  
		margin-left: 125px;  
		padding: 0px 0px 0px 2px;  
		width: auto;  
		min-height: 43px;  
		height: auto;  
		left: 125px;  
		font: 12px Verdana, Arial, Helvetica, sans-serif;  
		border-left: dotted 2px #7DBC57  
	}  
  
	div#MiddleRow div#ChatBox div#Message form#sbform  {  
		width: 100%;  
		position: relative;  
	}  
	  
	div#MiddleRow div#ChatBox div#Message form#sbform input#addtext {  
		background: #EDF7E7;  
		border: solid 2px #7DBC57;  
		width: 100%;  
		margin: 11px 52px 0px 5px;  
		display: block;  
		position: absolute;  
	}  
	  
	div#MiddleRow div#ChatBox div#Message form#sbform input#submit {  
		font: bold 12px Verdana, Arial, Helvetica, sans-serif;  
		background: #EDF7E7;  
		border: solid 2px #7DBC57;  
		width: 42px;  
		height: 42px;  
		position: absolute;  
		right: 5px;  
		top: 0px;  
	}

So siehts zur Zeit aus. Trotz margin: 11px 52px 0px 5px; nimmt das Textfeld 100% der Formbreite ein (und ist um 5px nach Rechts verschoben).

Ich schaffs nicht.

MfG

[apsel]

Om nah hoo pez nyeetz, theCSSbeginnerer!

Ich schaffs nicht.

Installiere Firebug für den FF oder verwende opera ab 10.5 dann jeweils Rechtsklick, Element untersuchen und schau dir die Eigenschaften an, die das Element wirklich hat. Du kannst nach Belieben deaktivieren und ändern, so siehst du die Folgen deines Tuns live.

Matthias

[LX]

div#MiddleRow div#ChatBox {

background: #A8D28F;
width: auto;
min-height: 45px;
margin: 0 auto;
padding: 2px 2px 0px 2px;
border: dotted 2px #7DBC57;
margin-bottom: 5px;
}

  
probier mal stattdessen "margin: 0 90px 0 0;"  
  
Gruß, LX

-- 
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.