ichbinich: Platzierung von Images und Textboxen in einer Tabelle

Beitrag lesen

Hallo,

Woher kommen die Zwischenräume?

Vom Zeilenumbruch zwichen den elementen im Quelltext.

Wie erreicht man, dass alle 3 übereinanderstehenden Elemente gleich breit sind?
Indem man das input-Feld per CSS auf dieselbe Breite bringt.

Wieso verwendest du Tabellen?
Ich habe dir mal ein Beispiel geschrieben, wie es auch ohne geht (nur im FF20 getestet!):

<h1>Einstellen ...</h1>  
<div id="control">  
	<img src="plus.png" onclick="wert('Button1')" /><img src="plus.png" onclick="wert('Button2')" /><br />  
	<input id="kg" type="text" /><input id="anz" type="text" /><br />  
	<img src="minus.png" onclick="wert('Button3')" /><img src="minus.png" onclick="wert('Button4')" />  
</div>  
<div id="fuss">  
	<input id="Button5" type="button" value="OK" onclick="layer_aus();" /><input id="Button6" type="button" value="Zurück" onclick="abbrechen()" />  
</div>
h1 {  
	width:375px;  
	font-size:x-large;  
	background-color:#333333;  
	border-bottom:1px solid lightgray;  
	color:#FFF;  
	font-weight:normal;  
	text-align:center;  
	padding:0.35em 0;  
	margin:0;  
}  
#control {  
	width:375px;  
	background-color:#333333;  
	border-bottom:1px solid lightgray;  
	padding:4px 0;  
	text-align:center;  
}  
#control img {  
	display:inline-block;  
	width:105px;  
	height:60px;  
	margin:0 3px;  
	cursor:pointer;  
}  
#control input[type=text] {  
	width:105px;  
	height:70px;  
	margin:0 3px;  
	border:0;  
	text-align:center;  
	font-size:x-large;  
}  
#fuss {  
	width:375px;  
	background-color:grey;  
	text-align:center;  
	padding:4px 0;  
}  
#fuss input[type=button] {  
	font-size:x-large;  
	width:160px;  
	margin:0 3px;  
	border:0;  
}  
#control img + img,  
#control input[type=text] + input[type=text],  
#fuss input[type=button] + input[type=button] {  
	margin-right:0;  
}  

vg ichbinich

--
Kleiner Tipp:
Tofu schmeckt am besten, wenn man es kurz vor dem Servieren durch ein saftiges Steak ersetzt...