Platzierung von Images und Textboxen in einer Tabelle

[xyz]

Moin
wer ein Galaxy hat, kennt die Eingabe-Fenster, solch eines wollte ich nachbauen mit HTML/ CSS.
Hier mein Nachbau:

Ich hätte gern, dass plus, minus und Input vertikal direkt angrenzen, horizontal soll ein Abstand zur nächsten Spalte bleiben. Außerdem habe ich Probleme, die Inputs auf die Breite der Images zu bringen.

HTML dazu:
<div id="input">
<table id="top"><tr><td id="titel" >Einstellen ...</td></tr>>/table>
<table id="body"><tr><td>
<a href="#" id="Button1" onclick="wert('Button1')"><img src="plus.png" /></a>
<a href="#" id="Button2" onclick="wert('Button2')"><img src="plus.png"/></a>
<br/>
<input id="kg" type="text" />&nbsp;<input id="anz" type="text" />
<br/>
<a href="#" id="Button3" onclick="wert('Button3')"><img src="minus.png"/></a>
<a href="#" id="Button4" onclick="wert('Button4')"><img src="minus.png"/></a>
</td></tr></table>
<table id="fuss"><tr><td>
<input id="Button5" type="button" value="OK" onclick="layer_aus();" />
<input id="Button6" type="button" value="Zurück" onclick="abbrechen()" />
</td></tr></table>
</div>

CSS dazu:
td {text-align: center; border:none; width:250px; height:40px; }
a {color:#333333;}

#top {width:250px; height:40px; color:white; font-size:x-large; background-color:#333333; border-bottom:1px solid lightgray;}

#body {width:250px; height:120px; background-color:#333333;border-bottom:1px solid lightgray; border-collapse:collapse; border-spacing:0px; padding:0px;}
    #kg      {font-size:x-large; width:70px; height:40px;  text-align:center;  }
    #anz     {font-size:x-large; width:70px; height:40px;  text-align:center;   }

#fuss {width:250px; height:40px; background-color:grey ;}
    #Button5 {width: 115px; font-size:x-large; }
    #Button6 {width: 115px; font-size:x-large;    }

Woher kommen die Zwischenräume? Wie erreicht man, dass alle 3 übereinanderstehenden Elemente gleich breit sind?

Gruß Tom

[ichbinich]

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

[xyz]

Moin DubistDu

grandios, dass Du Dir solche Mühe gemacht hast, danke Dir dafür.
Ich bin nicht so der Gestalter.

Woher kommen die Zwischenräume?
Vom Zeilenumbruch zwichen den elementen im Quelltext.

Anfangs hatte ich kein br, sondern habe jedes Element in eine Tabellenzelle gepackt, dachte, ohne Padding und Rahmen würden die dann schon zusammenrücken, aber Pustekuchen. Hab dann eben verschiedenes probiert. An div habe ich auch schon gedacht, aber mich vor dem Aufwand wegen der Positionierung gescheut (denn dieses overlay möchte ich eigentlich so einfach wie möglich gestrickt haben, um es später auch für andere Fälle mit wenig Aufwand einsetzen zu können), hoffte, es gäbe eine einfache Lösung.

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

Nun, ich hab die Breite ja mit CSS festgelegt, ursprünglich waren die Images ja noch Button. Setze ich beide auf 70, so ergaben sich immer gewisse Abweichungen und interessanterweise entgegengesetzt im IE bzw. in Android. Letztendlich klappte das nur über pixelweises Ausrobieren.

Wieso verwendest du Tabellen?

Ja, werden Tabellen nicht sogar häufig als Strukturelemente genutzt?

Ich probiere das gleich mal aus, melde mich nochmal zwecks Erfolg.
Gruß Tom

[Matthias Apsel]

Om nah hoo pez nyeetz, xyz!

Ja, werden Tabellen nicht sogar häufig als Strukturelemente genutzt?

Früher mal.

Matthias

[xyz]

Ich bins gleich nochmal.
Hier die Darstellung in den Browsern, 1. IE, 2. Android

Doch noch ein bischen fein-Tuning nötig.

Muss man etwa doch alle Elemente in ein div setzen und manuell positionieren?

Gruß Tom

[ichbinich]

Hallo,

Hier die Darstellung in den Browsern, 1. IE, 2. Android

Doch noch ein bischen fein-Tuning nötig.

Was genau hast du gemacht? Hab jetzt meine Umsetzung getestet:
In IE10, FF, Opera, Safari, Chrome sieht es wie gewünscht aus, Eingabefeld genauso breit wie +/- und ohne Abstände.

vg ichbinich

[xyz]

habe den Bereich table auskommentiert und dafür Deinen div-Bereich reingesetzt, in CSS außer die Definitionen für das Overlay alles auskommentiert und Deinen Code rein, JS partiell ausgeschalten, den Container für div sichtbar gesetzt und Test mit IE10 (Mode <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>?!)

Du meintest anfänglich, die Abstände entstünden durch den Zeilenumbruch, aber Du hast diese doch auch drin?!

Hallo Matthias,
habe den Artikel Deines Links gelesen, danach ist auch div nicht mehr in?

Gruß Tom

[ichbinich]

Hallo,

habe den Bereich table auskommentiert und dafür Deinen div-Bereich reingesetzt, in CSS außer die Definitionen für das Overlay alles auskommentiert und Deinen Code rein, JS partiell ausgeschalten, den Container für div sichtbar gesetzt und Test mit IE10 (Mode <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>?!)

Kann man sich das irgendwo ansehen?

Du meintest anfänglich, die Abstände entstünden durch den Zeilenumbruch, aber Du hast diese doch auch drin?!

Durch einen Zeilenumbruch im Quelltext zwischen den <img>.

vg ichbinich

[xyz]

Hallo,
Das wär schön, wenn Du noch mal raufschaust(www.easyo.de/apps/sport.htm), ich bin nämlich fast am verzweifeln. Habe auf einem XP-Rechner mit dem Scripteditor alles auf div umgestellt, sah dort sehr gut aus. Nun auf meinem Rechner wieder völlig anderes Layout, jetzt kleben alle Elemente am linken Rand.

Gruß Tom

[ichbinich]

Hallo,

id's dürfen nicht mit einer Zahl beginnen. Außerdem solltest du Attribute immer in Anführungszeichen einschliessen.

vg ichbinich

[xyz]

es lag an den IDs (die eine IE-Version akzeptiert Zahlen, die nächste nicht mehr!?), nun bin ich wohl langsam auf dem richtigen Weg.
Danke Dir.
Tom

[Matthias Apsel]

Om nah hoo pez nyeetz, xyz!

habe den Artikel Deines Links gelesen, danach ist auch div nicht mehr in?

div ist ein gruppierendes Element ohne semantische Bedeutung. Insofern ist ein div genau dann das Mittel der Wahl, wenn man ein gruppierendes Element ohne semantische Bedeutung braucht.

<div>  
   <article>...</article>  
   <article>...</article>  
</div>

halte ich etwa für sinnvoll.

(Manchmal kann man auch aus Gestaltungsgründen ein zusätzliches Element benötigen.)

Matthias