Der folgende Beitrag wurde am 14. 06. 2011, 19:35 Uhr von Rainer veröffentlicht.
Hallo,
Wenn ich labels definiere
<label for="Name">Name:</label>....
<label for="Name">Vorname:</label>....
, wie kann ich dann erreichen, dass die Eingabefelder auf einer senkrechten Linie ausgerichtet werden, ohne dass ich z.B. angeben muss
<label for="Name">Name: </label>....
<label for="Name">Vorname:</label>....
Gruß
Rainer
Der folgende Beitrag wurde am 14. 06. 2011, 19:39 Uhr von suit veröffentlicht.
Mit HTML garnicht - aber mit CSS. "width" ist hier die geeignete Eigenschaft, wobei hier hinzuzufügen ist, dass label ein inline-Element ist. Ohne verändern dieser Eigenschaft ist "width" wirkungslos.
Wie du die Elemente untereinander bringst, hängt von deinem Markup ab - z.B. könntest du label und input nebeneinander floaten lassen und jeweils vor einem label den Textfluss wiederherstellen (neue Zeile) - oder du kannst das input-Element in das label-Element notieren - oder du gruppierst label und input-Element mit einem div- oder fieldset-Element. Aber das ist eine HTML-Sache.
Der folgende Beitrag wurde am 14. 06. 2011, 21:24 Uhr von Rainer veröffentlicht.
> Mit HTML garnicht - aber mit CSS. "width" ist hier die geeignete Eigenschaft, wobei hier hinzuzufügen ist, dass label ein inline-Element ist. Ohne verändern dieser Eigenschaft ist "width" wirkungslos.
>
Wenn die Änderung der "inline-Eigenschaft keine unerwünschten Nebenwirkungen hat, würde ich gerne so verfaheren, denn das Nachfolgende verstehe ich leider überhaupt nicht.
> Wie du die Elemente untereinander bringst, hängt von deinem Markup ab - z.B. könntest du label und input nebeneinander floaten lassen und jeweils vor einem label den Textfluss wiederherstellen (neue Zeile) - oder du kannst das input-Element in das label-Element notieren - oder du gruppierst label und input-Element mit einem div- oder fieldset-Element. Aber das ist eine HTML-Sache.
Danke
Rainer
Der folgende Beitrag wurde am 14. 06. 2011, 23:27 Uhr von suit veröffentlicht.
> Wenn die Änderung der "inline-Eigenschaft keine unerwünschten Nebenwirkungen hat, würde ich gerne so verfaheren, denn das Nachfolgende verstehe ich leider überhaupt nicht.
Die nachfolgenden Dinge beziehen sich darauf - die display-Eigenschaft zu ändern hat immer "Nebenwirkungen". Ob das nun explizit mittels inline-block passiert oder das Element implizit in einen block formatting context gebracht wird (z.B. durch float) ist dabei egal.
Um das nachfolgende wirst du allerdings nicht herumkommen.
float ist vermutlich deine erste Baustelle.
Der folgende Beitrag wurde am 14. 06. 2011, 23:35 Uhr von Gunnar Bittersmann veröffentlicht.
@@Rainer:
nuqneH
> […] denn das Nachfolgende verstehe ich leider überhaupt nicht.
> > […] z.B. könntest du label und input nebeneinander floaten lassenlabel, input { float: left }
Damit erhält die 'display'-Eigenschaft implizit den Wert "block", der muss also nicht explizit angegeben werden, damit die 'width'-Eigenschaft wirkt.
> > und jeweils vor einem label den Textfluss wiederherstellen (neue Zeile)label { clear: left }
Markup:<label for="Name">Name:</label> <input id="Name" name="Name"/>
<label for="Vorname">Vorname:</label> <input id="Vorname" name="Vorname"/>
Stylesheet:label
{
clear: left;
float: left;
width: 6em;
}
input
{
float: left;
margin-bottom: 0.5em;
}
> > oder du kannst das input-Element in das label-Element notieren<label>Name: <input name="Name"/></label>
<label>Vorname: <input name="Vorname"/></label>
Dann gehört das Label zum eingeschlossenen Eingabe-Element. Für semantisch sinnvoll halte ich dies nicht. @for- und @id-Attribute sind dann nicht notwendig.
Style:label
{
display: block;
overflow: hidden;
width: 16em;
}
input
{
float: right;
margin-bottom: 0.5em;
}
> > oder du gruppierst label und input-Element mit einem div- oder fieldset-Element.<fieldset><label for="Name">Name:</label> <input id="Name" name="Name"/></fieldset>
<fieldset><label for="Vorname">Vorname:</label> <input id="Vorname" name="Vorname"/></fieldset>
Dann braucht man kein 'clear':fieldset
{
overflow: hidden;
}
label
{
clear: left;
float: left;
width: 6em;
}
input
{
float: left;
margin-bottom: 0.5em;
}
Man braucht nicht einmal 'float', "inline-block" bietet sich an. Das hat auch den Vorteil, dass 'vertical-align' wirkt:label
{
display: inline-block;
vertical-align: middle;
width: 6em;
}
input
{
margin-bottom: 0.5em;
}
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
Der folgende Beitrag wurde am 14. 06. 2011, 19:46 Uhr von Felix Riesterer veröffentlicht.
Lieber Rainer,
> <label for="Name">Name:</label>....
> <label for="Name">Vorname:</label>....
der im for-Attribut notierte Wert verweist auf eine - dokumentenweit einmalige - ID eines anderen Elements! Ansonsten ist das Verwenden des for-Attributs sinnfrei.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
Der folgende Beitrag wurde am 14. 06. 2011, 21:19 Uhr von Rainer veröffentlicht.
Hi,
>
> > <label for="Name">Name:</label>....
> > <label for="Name">Vorname:</label>....
>
War ein Schreibfehler, natürlich musste es heißen<label for="Name">Name:</label>....
<label for="Vorname">Vorname:</label>....
Der folgende Beitrag wurde am 15. 06. 2011, 08:14 Uhr von Felix Riesterer veröffentlicht.
Lieber Rainer,
> War ein Schreibfehler, natürlich musste es heißen
> <label for="Name">Name:</label>....
> <label for="Vorname">Vorname:</label>....
OK. Und wenn Du nun mit inline-block arbeitest, kannst Du auch eine width vergeben:label {
display: inline-block;
width: 6em;
}
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
© 1998-2013 SELFHTMLImpressumSoftware: Classic Forum 3.4