CSS: Wie erstelle ich ein komptaktes Formular?

[Dadelu]

Hallo Zusammen

Nun, seit sicher einem Jahr habe ich nichts mehr mit CSS gemacht.

Jetzt würde ich gerne ein Formular auf Basis von HTML & CSS erstellen.

Jedoch stehe ich komplett an!!!

Ich suche jetzt sicher schon seit 2 Stunden im Netz, jedoch habe ich noch keine Seite gefunden,
wo gut und schnell erklärt wird, wie man ein eher komplexes Formular erstellt!

Also vieleicht als Info, ein normales Formular, welches jedes Feld vertikal nach einander kommt, kann ich ohne Probleme erstellen. Jedoch will ich zum Beispiel Oben die Eingabe Felder nebeneinander darstellen und krieg es einfach nicht hin

Hat jemand eine gute Seite? Vieleicht sogar ein Tutorial?

Lg, Dadelu

 

[Hilarious]

Sowas vielleicht?
http://atut.granus-werkstatt.de/anmeldung/

 

[mschoening]

Ja denke schon das er das meint.
Guckst du hier.

 

[Dadelu]

Danke für die Antworten

Leider habt ihr beide ein wenig danaben gelegen

Am liebsten würde ich die Input Felder neben einander machen...

Im Anhang eine Skizze, um vieleicht meine Idee zu veranschaulichen

Zu beachten:
Die Roten Boxen sind Input Felder, die anderen nur Bezeichnungen!

 

[skepsis]

Schmeiß das ganze doch in eine Tabelle.
Auch auf die Gefahr hin, dass ich mich jetzt unbeliebt mache, aber ich finde, wenn eine Tabellenstruktur vorliegt, dann kann (sollte?) man auch Tabellen nehmen.
Geht zwar auch mit Divs, aber ich sehe hier keinen Vorteil.

Gruß
Skepsis

 

[Dadelu]

Ja mit einer Tabelle wäre dieses Problem in 5 Minuten gelöst

Aber das Konzept mit den Tabellen hält einfach nicht, wenn man die restliche Seite komplett OHNE Tabellen erstellt hat

Es muss doch möglich sein, ein solch triviales Gebilde mittels CSS zu erstellen???

 

[skepsis]

Ja mit einer Tabelle wäre dieses Problem in 5 Minuten gelöst

Aber das Konzept mit den Tabellen hält einfach nicht, wenn man die restliche Seite komplett OHNE Tabellen erstellt hat

Es muss doch möglich sein, ein solch triviales Gebilde mittels CSS zu erstellen???

Ja klar geht das. Beschreib doch mal genauer worin dein Problem besteht?

 

[Dadelu]

Eben, wie ganz unten beschrieben, will ich die Input Felder Horizontal darstellen. Nun frage ich mich wie das geht.. Man könnte ja die Beschreibung + Input Feld als Liste deklarieren, jedoch wie bringe ich sie Horizontal hin?

 

[Skeeve]

Man kann sich auch unnötig einen abbrechen

Trennung von Layout und Inhalt schön und gut, aber manchmal gibt CSS (die aktuelle Implementierung) das einfach nicht her. Ansonsten könnte man mit dem display-style:table... arbeiten.

Gerade hier dürfte ein Beispiel vorliegen, bei dem Du Inhalt und Layout einfach nicht wirst trennen können.

Wenn Du das Formular ohne Inhalt betrachtest, hast Du einfach eine Liste von Eingabefeldern.

Nun willst Du aber, daß bestimmte Eingabefelder nebeneinander erscheinen (Name/Vorname). Das geht aber nur, wenn man den Inhalt beim Layout mit beachtet. Schon sind wir wieder dabei, daß Inhalt und Layout miteinander verknüpft sind.

Also warum nicht gleich dabei bleiben?

 

[Dadelu]

Ach wisst ihr was? Sch** auf CSS
Ich will mir doch nicht ne ganze Woche den Kopf zerbrechen wie ich es hinkriege, wenn ich es mit einer schönen alten Tabelle in 5 Minuten hinkriege

 

[mschoening]

Wenn du die Liste horizontal abbilden willst:display:inline.

Du koenntest es doch einfach so machen:
eine Zeil ein div und in den div span!

 

[Hilarious]

Man kann sich auch unnötig einen abbrechen

Trennung von Layout und Inhalt schön und gut, aber manchmal gibt CSS (die aktuelle Implementierung) das einfach nicht her. Ansonsten könnte man mit dem display-style:table... arbeiten.

Gerade hier dürfte ein Beispiel vorliegen, bei dem Du Inhalt und Layout einfach nicht wirst trennen können.

Wenn Du das Formular ohne Inhalt betrachtest, hast Du einfach eine Liste von Eingabefeldern.

Nun willst Du aber, daß bestimmte Eingabefelder nebeneinander erscheinen (Name/Vorname). Das geht aber nur, wenn man den Inhalt beim Layout mit beachtet. Schon sind wir wieder dabei, daß Inhalt und Layout miteinander verknüpft sind.

Also warum nicht gleich dabei bleiben?

Eine Positionierung mit CSS ist zwar anspruchsvoller als mit einer Tabelle zu arbeiten, aber dennoch gut möglich, auch mit der Vorgabe und mit Hilfe der gegebenen Beispiele. Falls DU damit Schwierigkeiten hast, hilft vielleicht auch eine absolute Positionierung. Gibt man jedem Input-Element eine eigene ID (#dings, #bums), lässt sich jedes Element selektieren und positionieren. Eine solche Positionierung hat zwar auch Nachteile, aber vielleicht ist das schon mal ein Anfang.

 

[schwaiger]

nix da.

is css

input{width:100px; margin:5px;float:left;}
.clearer{clear:both;}

dann giebst du jeden 4ten input eine classe also:

class="clearer"

und scho klappts !


lg flo

 

[Skeeve]

nix da.

is css

input{width:100px; margin:5px;float:left;}
.clearer{clear:both;}

Woha! 100px! PFUI! Das haut bei mir hornhautverkrümmtem nie hin! Wenn Größenangaben dann bitte in em.

 

[Skeeve]

Eine Positionierung mit CSS ist zwar anspruchsvoller als mit einer Tabelle zu arbeiten, aber dennoch gut möglich, [...] Gibt man jedem Input-Element eine eigene ID (#dings, #bums), lässt sich jedes Element selektieren und positionieren. Eine solche Positionierung hat zwar auch Nachteile, aber vielleicht ist das schon mal ein Anfang.

2 Nachteile!
1. Absolute Positionierung setzt bekannte Größen voraus
2. IDs sind im Prinzip schon wieder Inhalt.

 

[Hilarious]

2 Nachteile!
1. Absolute Positionierung setzt bekannte Größen voraus
2. IDs sind im Prinzip schon wieder Inhalt.

Stimmt natürlich. Völlig richtig. Nur, vielleicht ein Ansatz, um mit CSS »warm« zu werden. Aber man muss sich, und da gebe ich Dir, Skeeve, völlig recht, damit abfinden, dass man sich nur für den Stolz nicht unbedingt die Finger brechen muss. Wenn eine Tabelle dafür sorgt, dass ich rechtzeitig mit dem Projekt fertig werde, ist CSS ein Zeitkiller und nicht zielführend.

 

[Dadelu]

Also ich habs jetzt mal mit einer Tabelle gemacht In 30 Minuten 6 Seiten erstellt Tja CSS ist schön, aber nur wenn man zu viel Zeit hat

 

[Gubbie]

tabelle ist sicherlich die Lösung der Wahl (quick'n'dirty ).
Mit CSS denke ich lässt sich das mit Labels ganz angenehm machen.

 

[Skeeve]

Mit CSS denke ich lässt sich das mit Labels ganz angenehm machen.

Da möchte ich dann doch mal gerne ein Beispiel sehen. Folgendes bitte berücksichtigen:

1. Keine Vermischung von Layout und Inhalt
2. Keine absolute Positionierung die nicht mit Fontgrößenveränderung klarkommt
3. Keine Größenangaben die nicht mit Fontgrößenveränderung klarkommen
4. Kein JavaScript o.Ä. zur Positionierung/Formatierung

Nicht, daß Du denkst, ich will Dich ärgern, nur sind das Punkte, an denen ich, seit ich versuche auf Tabellen als Layouthilfe zu verzichten, verzweifle. Für das Projekt, in dem ich arbeit läuft es auf Verletzung vom letzten Punkt hinaus, dieweil JS ohnehin zwingende Voraussetzung fürs Projekt ist.

 

[iii]

Ist eigentlich gar nicht so kompliziert ohne Tabelle... Ich finde sogar einfacher, da übersichtlicher

Einfach der Liste eine Breite geben, dem Listenelement auch und dazu noch ein float:left und gut ist. Die Listenelemente brechen dann automatisch um.

HTML:

<ul>
  <li>Formularelement</li>
  <li>Formularelement</li>
  <li>Formularelement</li>
  <li>Formularelement</li>
  <li>Formularelement</li>
  <li>Formularelement</li>
  <li>Formularelement</li>
</ul>

CSS:

ul {
  width:40em;
  list-style-type:none;

}
ul li {
  width:10em;
  float:left;
}