input felder zentriert nach rechts?

r00t · #1 (**permalink**) 30.01.2005, 02:23

Hallo,
habe heute ein bisschen in die CSS Welt reingeschaut, da ich mir ein Forum in PHP programmiert habe, es aber ein wenig Farblos war/ist ..

Mein erstes Problem:

Wie bekomme ich die <input type="text"> Felder alle gerade, ordentlich und direkt untereinander... aber nicht mit display: block, sondern die Felder sollten einfach alle (bzw. 1,4 und 5) ein Stück nach rechts verschoben werden, versteht ihr?

Hier der Screenshot:

mfg

soma · #2 (**permalink**) 30.01.2005, 02:37

Zitat:

Zitat von r00t

Hallo,
habe heute ein bisschen in die CSS Welt reingeschaut, da ich mir ein Forum in PHP programmiert habe, es aber ein wenig Farblos war/ist ..

Mein erstes Problem:

Wie bekomme ich die <input type="text"> Felder alle gerade, ordentlich und direkt untereinander... aber nicht mit display: block, sondern die Felder sollten einfach alle (bzw. 1,4 und 5) ein Stück nach rechts verschoben werden, versteht ihr?

Hier der Screenshot:

mfg

Wie hast du die denn eingepflegt? Mit ner Tabelle? Poste mal den Code bitte.

r00t · #3 (**permalink**) 30.01.2005, 02:39

Ganz normal:

<form action="....php" method="post">
Name:
<input value="<?=$name?>" class="text" name="name">

Passwort:<input value="<?=$pw?>" class="text" name="pw">

Userlevel: <input value="<?=$ulevel?>" class="text" name="ulevel">

E-Mail: <input value="<?=$mail?>" class="text" name="mail">

Website: <input value="<?=$site?>" class="text" name="site">

Wohnort: <input value="<?=$ort?>" class="text" name="ort">

<input type="submit" class="submit" value="Aktualisieren">
</form>

Mein CSS Code für die input type = "text" classe:
input.text { margin-bottom:2pt; border: dashed 1px; }

soma · #4 (**permalink**) 30.01.2005, 02:44

Bei solchen Sachen nutze ich immer eine Tabelle. Halt links dann den Text und rechts dann die Inputfelder. Ungefähr so:

Code:

<form action="fu.php" method="POST">
<table class="bla" align="center" border="0">
<tr>
<td>Nachname:</td>
<td><input type="text" size="26" name="Nachname" value="" /></td>
</tr>
<tr>
<td>Vorname:</td>
<td><input type="text" size="26" name="Vorname" value="" /></td>
</tr>
<tr>
<td align="right" colspan="2"><input type="reset" value="reset"><input type="submit" value="OK"></td>
</tr>

</table>
</form>

Kannst auch bei SelfHTML nachlesen, dort empfiehlt er es auch mit einer blinden Tabelle.

r00t · #5 (**permalink**) 30.01.2005, 02:48

jo ist auch möglich

aber gibts für sowas keine CSS Eigenschaft?

soma · #6 (**permalink**) 30.01.2005, 02:57

Zitat:

Zitat von r00t

aber gibts für sowas keine CSS Eigenschaft?

Mir ist keine bekannt. Sollte es eine geben, bin ich natürlich auch interessiert

Kannst ja alles in DIV-Tags packen, doch denke ich mal, dass es keine gute Lösung ist. Und mit text-align hab ich es auch noch nicht probiert. Doch bei Bildern funktioniert das ja auch nicht.

Einfach mal abwarten, vielleicht hat ja ein anderer User eine Idee bzw. Lösung.

r00t · #7 (**permalink**) 30.01.2005, 02:58

k, bis dahin bin ich pennen

soma · #8 (**permalink**) 30.01.2005, 03:04

Habe noch was gefunden

http://www.stichpunkt.de/css/formulare.html

netspy · #9 (**permalink**) 30.01.2005, 03:12

Zitat:

Zitat von soma

Habe noch was gefunden

http://www.stichpunkt.de/css/formulare.html

Im Zuge der Barrierefreiheit sollte man da aber statt <span class="label"> besser <label for="..."> verwenden.

Mario

Boris · #10 (**permalink**) 30.01.2005, 11:45

Hier noch eine Diskussion über das Gestalten von Formularen (E):
http://www.simplebits.com/bits/simplequiz/#entry579

Zitat:

Certainly for larger forms, when you’re dealing with multiple controls, inputs, form fields, drop-downs, etc. — tables still seem like the best way to go. You could argue either way, whether a form is tabular data — but the truth is, styling a large form soley with CSS is not a simple task, and undoubtedly will not degrade nicely.
Summary (my take)

When it comes to marking up forms, I’ll take the following into account:

* When marking up a small form with a few elements, I’ll use fieldset and CSS to style them — taking into account what the unstyled form will look like.
* Tables still are not evil. For large forms, in order to make the form useable and organized, it’s hard to beat the simplicity of a table here. CSS techniques seem to be somewhat complicated in a place where a simple table would work all around.
* In the past, I’ve used p tags to group label and matching input tags. I’m now divided on this method. For simple forms, it will ensure consistent formatting across browsers yet could be argued that it is not a paragraph of text.
* Trying to semantically structure a form makes my head hurt.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Input Felder färben	SpecialFighter	CSS	13	05.09.2011 19:01
2 input felder nebeneinander IE - FF Fehler	marco123	CSS	0	07.02.2010 13:10
bestimmte input felder ansprechen	blackhawk3000	CSS	7	18.08.2008 23:08
CSS Styles für input Felder, wie umsetzen?	davekch	CSS	5	19.11.2007 09:00
Kein Padding für Input Felder im Opera?	o.dey	CSS	4	08.09.2005 17:35