1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

CSS: Wie erstelle ich ein komptaktes Formular?

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Dadelu, 10.06.07.

  1. Dadelu

    Dadelu Reinette Coulon

    Dabei seit:
    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
     
  2. Hilarious

    Hilarious Gelbe Schleswiger Reinette

    Dabei seit:
    10.08.05
    Beiträge:
    1.759
  3. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Ja denke schon das er das meint.
    Guckst du hier.
     
  4. Dadelu

    Dadelu Reinette Coulon

    Dabei seit:
    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:

  5. skepsis

    skepsis Westfälische Tiefblüte

    Dabei seit:
    07.02.06
    Beiträge:
    1.060
    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
     
  6. Dadelu

    Dadelu Reinette Coulon

    Dabei seit:
    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???
     
  7. skepsis

    skepsis Westfälische Tiefblüte

    Dabei seit:
    07.02.06
    Beiträge:
    1.060
    Ja klar geht das. Beschreib doch mal genauer worin dein Problem besteht?
     
  8. Dadelu

    Dadelu Reinette Coulon

    Dabei seit:
    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?
     
  9. Skeeve

    Skeeve Pomme d'or

    Dabei seit:
    26.10.05
    Beiträge:
    3.121
    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?
     
  10. Dadelu

    Dadelu Reinette Coulon

    Dabei seit:
    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 :)
     
    Skeeve und (gelöschter Benutzer) gefällt das.
  11. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    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!
     
  12. Hilarious

    Hilarious Gelbe Schleswiger Reinette

    Dabei seit:
    10.08.05
    Beiträge:
    1.759
    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.
     
  13. schwaiger

    schwaiger Weigelts Zinszahler (Rotfranch)

    Dabei seit:
    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
     
  14. Skeeve

    Skeeve Pomme d'or

    Dabei seit:
    26.10.05
    Beiträge:
    3.121
    Woha! 100px! PFUI! Das haut bei mir hornhautverkrümmtem nie hin! Wenn Größenangaben dann bitte in em.
     
  15. Skeeve

    Skeeve Pomme d'or

    Dabei seit:
    26.10.05
    Beiträge:
    3.121
    2 Nachteile!
    1. Absolute Positionierung setzt bekannte Größen voraus
    2. IDs sind im Prinzip schon wieder Inhalt.
     
  16. Hilarious

    Hilarious Gelbe Schleswiger Reinette

    Dabei seit:
    10.08.05
    Beiträge:
    1.759
    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.
     
  17. Dadelu

    Dadelu Reinette Coulon

    Dabei seit:
    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 ;)
     
  18. Gubbie

    Gubbie Damasonrenette

    Dabei seit:
    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.
     
  19. Skeeve

    Skeeve Pomme d'or

    Dabei seit:
    26.10.05
    Beiträge:
    3.121
    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.
     
  20. iii

    iii Alkmene

    Dabei seit:
    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;
    }
    
     

Diese Seite empfehlen