CSS: Wie erstelle ich ein komptaktes Formular?

Dadelu

Reinette Coulon
Registriert
06.07.05
Beiträge
939
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
 

Dadelu

Reinette Coulon
Registriert
06.07.05
Beiträge
939
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!
 

Anhänge

  • formularLayout.jpg
    formularLayout.jpg
    86,2 KB · Aufrufe: 135

skepsis

Westfälische Tiefblüte
Registriert
07.02.06
Beiträge
1.050
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

Reinette Coulon
Registriert
06.07.05
Beiträge
939
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

Westfälische Tiefblüte
Registriert
07.02.06
Beiträge
1.050
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

Reinette Coulon
Registriert
06.07.05
Beiträge
939
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

Pomme d'or
Registriert
26.10.05
Beiträge
3.120
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

Reinette Coulon
Registriert
06.07.05
Beiträge
939
Ach wisst ihr was? :D 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

Gelbe Schleswiger Reinette
Registriert
21.02.07
Beiträge
1.764
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

Gelbe Schleswiger Reinette
Registriert
10.08.05
Beiträge
1.759
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

Weigelts Zinszahler (Rotfranch)
Registriert
19.03.06
Beiträge
249
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

Pomme d'or
Registriert
26.10.05
Beiträge
3.120
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

Gelbe Schleswiger Reinette
Registriert
10.08.05
Beiträge
1.759
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

Reinette Coulon
Registriert
06.07.05
Beiträge
939
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

Damasonrenette
Registriert
02.01.05
Beiträge
485
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

Pomme d'or
Registriert
26.10.05
Beiträge
3.120
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

Alkmene
Registriert
20.08.06
Beiträge
30
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:
Code:
<ul>
  <li>Formularelement</li>
  <li>Formularelement</li>
  <li>Formularelement</li>
  <li>Formularelement</li>
  <li>Formularelement</li>
  <li>Formularelement</li>
  <li>Formularelement</li>
</ul>

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

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