[CSS] feste Breite für Label tags

**prego** · 09.09.2005, 13:32

display: block;
float: left;

imho

**Boneman** · 09.09.2005, 14:02

ahh danke

das hatte ich auch schon probiert und da hat der mir eine "treppe" aus den 3 Labels gemacht. Als ich den code zum posten zusammenkopiert hab ist mir dann auch aufgefallen wieso er das gemacht hat. Ich hatte um die Labels einen Rahmen, der mit 3 px wohl etwas zu groß war, als daß sie untereinandergepasst hätten und deswegen dieser Treppeneffekt.

Naja ein neuer Strich mehr auf der Liste der dümmlichen Fehler, die wohl nur mir passieren können :/.

Dank dir!

**wahsaga** · 09.09.2005, 14:36

Original geschrieben von prego
display: block;
float: left;

da kannst du dir das display:block auch sparen.

**Boneman** · 09.09.2005, 15:39

Nun hat sich direkt mal noch ein neues Problem ergeben:
Ich möchte im Formular nicht für jedes Input-Feld eine neue Zeile machen, denn z.b. Postleitzahl und Ort können locker in eine

Das Problem was sich jetzt ergibt ist, daß die Inputfelder rechts nicht bündig abschließen, weil es über size nicht möglich ist solche Werte zu vergeben, daß es hinten im lot abschließt.

Jetzt wollte ich dem div drumrum einfach einen festen Wert geben und die input-size vergrößern, damit es aus dem div rausgehen würde. Mittels overflow: hidden wollte ich dann einen "sauberen" cut erzeugen. Wie mein folgender Code zeigt, geht das aber nicht, weil die inputs dann automatisch in die nächste Zeile wandern. Wie bekomme ich es hin, daß es links und rechts bündig ist?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<style type="text/css">
	.form_div_start{
		text-align: left;
		width: 390px;
		border: 1px solid red;
		overflow: hidden;
	}
		
	.form_label_10{
		float: left;
		text-align: right;
		width: 80px;
	}
	
	#start_main{
		border: 4px ridge #ff00ff;
		width: 400px;
		height: 232px;
		float: left;
		padding: 60px 14px 0px 14px;
		margin-left: 2px;
		overflow: hidden;
	}
	</style>
	
	
</head>
<body >
	<div id="start_main">
		<div class="form_div_start">
			<label for="p_1" class="form_label_10">Vorname:</label>&nbsp;&nbsp;
			<input type="text" id="p_1" name="acc_forename" size=12 value="">
			<label for="p_2">Nachname:&nbsp;&nbsp;
			<input type="text" id="p_2" name="acc_surname" size=15 value="" ><br />
			<label for="p_3" class="form_label_10">Anschrift:</label>&nbsp;&nbsp;
			<input type="text" id="p_3" name="acc_address" size="44" value="" ><br />
			<label for="p_4" class="form_label_10">Plz:</label>&nbsp;&nbsp;
			<input type="text" id="p_4" name="acc_postcode" size="4" maxlength="5" value="" >
			<label for="p_5">Ort:&nbsp;&nbsp;
			<input type="text" id="p_5" name="acc_city" size="30" value="" ><br />
			<label for="p_6" class="form_label_10">E-Mail:</label>&nbsp;&nbsp;
			<input type="text" id="p_6" name="acc_mail" size=44 value="" ><br />
			<label for="p_7" class="form_label_10">Telefon:</label>&nbsp;&nbsp;
			<input type="text" id="p_7" name="acc_phone" size=44 value="" ><br />	
		</div>
	</div>


</body>
</html>

**prego** · 09.09.2005, 15:58

Original geschrieben von wahsaga
da kannst du dir das display:block auch sparen.

Öhm, warum? Ist Label denn kein Inline-Element? Weil von InLine-Elementen kann ich doch keine Breite angeben, oder nicht?

Falls ich falsch liege, korrigier mich.

**derHund** · 09.09.2005, 16:10

http://www.css4you.de/float.html

**wahsaga** · 09.09.2005, 16:43

Original geschrieben von Boneman
Jetzt wollte ich dem div drumrum einfach einen festen Wert geben und die input-size vergrößern, damit es aus dem div rausgehen würde. Mittels overflow: hidden wollte ich dann einen "sauberen" cut erzeugen.

das ist aj der totale unfug ... dann läge ein teil des inputs außerhalb des sichtbaren bereiches, ich sehe also gar nicht, was ich tippe ...

Wie mein folgender Code zeigt, geht das aber nicht, weil die inputs dann automatisch in die nächste Zeile wandern.

natürlich geht das nicht - float ist ja gerade eben so definiert, dass die elemente in die nächste "zeile" wandern, wenn der platz nicht ausreicht.

**Boneman** · 10.09.2005, 09:52

Original geschrieben von wahsaga
das ist aj der totale unfug ... dann läge ein teil des inputs außerhalb des sichtbaren bereiches, ich sehe also gar nicht, was ich tippe ...

Hmm, auch wieder wahr, aber wie kann das dann so umsetzen oder ist das gar nicht möglich?

**wahsaga** · 10.09.2005, 12:08

als erstes mal solltest du aus deinem beispielcode valides XHTML machen, da sind ja noch einige fehler drin.

möglich wäre es, die labels mit fester breite nach links floaten zu lassen, und den inputs eine feste, ungefähr dem rest von containerbreite-labelbreite entsprechende breite zu geben.
für vorname/name, die wohl auf einer zeile sein sollen, vorname-input auch noch mal floaten lassen, und breite der beiden inputs entsprechend anpassen.

hab's gerade mal ausprobiert - erfordert natürlich wieder CSS-hacks für den IE, weil der etwas geringere breiten für die inputs braucht, damit's auf einer zeile bleibt.

und wäre in diesem aufbau natürlich eine konstruktion, die bei schriftvergrößerung wunderbar auseinanderplatzt ...

[CSS] feste Breite für Label tags