Home | Registrieren | Einloggen | Suchen | Aktuelles


Forum » Auszeichnungssprachen » weg von den Tabellen - Aufbau eines Formulars mit 2... Antworten
weg von den Tabellen - Aufbau eines Formulars mit 2 Spalten

Gon
Otto-Normal-Poster


Beiträge: 71


so, ich ersetze gerade ein Formular, das einst durch Tabellen "schön" in Position gehalten wurde durch eine neue Version. Ich hab mich mal wieder damit versucht es zu zeichnen, dank der Quellcode Funktion geht das auch ganz gut und sieht bei allen gleich aus ^^


1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35:
Bewerber-Nr.:  |________________________|     Bewerbung vom:        |________________________|

Anrede:        |_____|V| Titel: |_____|V|     Eingang am:           |________________________|

Titel:         |________________________|     Angelegt am:          |________________________|

Name:          |________________________|     Anlass der Bewerbung: |________________________|

Vorname:       |________________________|     Bewerbung als:        |________________________|

Straße:        |________________________|     Stellennr.:     |______| Abteilung: |__________|

Postleitzahl:  |________________________|     1. VG Fachabt.: |____________| um: |___________|

Ort:           |________________________|     2. VG Fachabt.: |____________| um: |___________|

Telefon/privat:|________________________|     3. VG Fachabt.: |____________| um: |___________|

Geburtsdatum:  |________________________|     Gespräch PA:    |____________| um: |___________|

Email:         |________________________|     Reisekosten erstattet? |_| in Höhe von : |_____| Euro

 _______________________
|                       |
| O Bewerbung per Post  |
|                       |
| O Bewerbung per eMail |
|_______________________|

              _____________________________________________
Bemerkungen: |                                             |
             |                                             |
             |                                             |
             |                                             |
             |_____________________________________________|



Mein erster Ansatz war, 3 divs zu erschaffen, id="lcontent", id="rcontent" und id="ucontent" für links, rechts und unten.
links enthällt die ganze linke Spalte, rechts die ganze rechte und Bewerbung per mail/post sowie die Bemerkungen wären im unten div.

Ich habe es auch geschafft, die beiden divs l und r nebeneinander zu positionieren. Dann wollte ich den inputs (in der Zeichnung die |______| um Textfelder darzustellen) im im css sagen, wo sie beginnen sollten, damit sie alle bündig untereinander sind. Nur leider bestimme ich den Abstand zum letzten Element links von ihnen, nicht zur linken Seite des div's.


Im zweiten Ansatz habe ich Text und Textfeld getrennt und in 2 verschiedene divs getan id="ltext" und id="lfields". Leider gibt es dann hier Probleme mit den Feldern Anrede/Titel, Stellennr/Abteilung und den 1/2/3 VG Fachabt.: Feldern, Gespräch PA und Reisekosten.

Fchen, wo bist du? ^^ Bekommst von mir auch ein eigenes Superman Kostüm.


---
'Never imagine yourself not to be otherwise than what it might appear to others that what you were or might have been was not otherwise than what you had been would have appeared to them to be otherwise.'
(the Duchess)

  Profil   Editieren   Zitieren

Austin Powers
Mausakrobat


Beiträge: 170


ich wür ja um jede spalte nen container machen
also sorry nur ganz grob
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31:
<div class="container">
<div class="spalte1">
<div class="beschriftung1">
Berwerber-Nr:
Anrede
...
</div>
<div class="felder1">
<input>
<div >// oder<input>
...
</div>
</div>
<div class="spalte2">
<div class="beschriftung2">
Berwerbeung von
eingang am
...
</div>
<div class="felder1">
<input>
<input>
...
</div>
</div>
<div class="zweiter2spaltigerblock">
.....
</div>
</div>

Hoffe es hilft

---
MfG:Austin Power (Saturn Realm)
OMW! Zumindest sobald ich herausgefunden hab wo ich JETZT gerade bin.
<---------->
"Wenn Liebe die Antwort ist, könnst Du bitte die Frage neu formulieren?" ... Lily Tomlin
<---------->
code hier http://www.pastebin.com

  Profil   Website   Editieren   Zitieren

Ehemaliges Mitglied (#1460)
Posting-Schinder


Beiträge: 614


Gon schrieb am 21.07.2005 10:32
so, ich ersetze gerade ein Formular, das einst durch Tabellen "schön" in Position gehalten wurde durch eine neue Version.

Das ist lobenswert!

Mein erster Ansatz war, 3 divs zu erschaffen

Warum immer alles mit divs? Zeichne doch erst mal Dein Formular sinnvoll aus. Mit <fieldset>, <legend> und mit <label> (bei letzterem das Attribut "for" nicht vergessen!)
<div>s sind doch kein Zaubermittel, das man überall einsetzt. Die Bedeutung von <div>s wird von CSS-Anfängern viel zu hoch bewertet.

Im zweiten Ansatz habe ich Text und Textfeld getrennt und in 2 verschiedene divs getan

Noch mehr div-Suppe?

Fchen, wo bist du? ^^ Bekommst von mir auch ein eigenes Superman Kostüm.

Oops, hat mich da jemand gerufen?

Wie man schöne Formulare macht, beschreibt Einfach für Alle sehr schön in ihrem Tutorial:
http://www.einfach-fuer-alle.de/artikel/formulare/

  Profil   Editieren   Zitieren

Ehemaliges Mitglied (#1460)
Posting-Schinder


Beiträge: 614


Austin Powers schrieb am 21.07.2005 18:18
ich wür ja um jede spalte nen container machen

Und damit würdest Du den Zusammenhang zwischen Feld und Label auseinanderreißen, so dass Dein Formular völlig unverständlich werden würde. Es wäre nur noch mit optischen Browsern nutzbar. Eine riesige, unnötige, Barriere.

Hoffe es hilft

Sorry, nein. Und es ist div-Suppe.

Schau Du Dir doch auch mal das Tutorial von EfA an.

Gruß,
-Efchen

  Profil   Editieren   Zitieren

Gon
Otto-Normal-Poster


Beiträge: 71


ok, das ganze Formular ist jetzt in einem <div id="form_neu"> und ich hab <fieldset> verwendet. Sieht soweit ganz gut aus, nur eine Frage.

Wie schaffe ich es, dass alle inputs bündig unter einander angeordnet sind wie in den Beispielen und der Text sich variabel nach links erstreckt? Irgendwie hab ich das in seinen CSS nicht gefunden.

1: 
2: 
3: 
4: 
5:
              Name 1 |________________|
       langer Name 2 |________________|
noch längerer Name 3 |________________|
     kürzerer Name 4 |________________|



hat er den Inhalt einfach Rechtsbündig gemacht? Kann ich mir nicht vorstellen weil er in einem Formular eine Textarea hat die breiter ist als die Textfelder.

---
'Never imagine yourself not to be otherwise than what it might appear to others that what you were or might have been was not otherwise than what you had been would have appeared to them to be otherwise.'
(the Duchess)

Diese Nachricht wurde geändert von: Gon
  Profil   Editieren   Zitieren

Ehemaliges Mitglied (#1460)
Posting-Schinder


Beiträge: 614


Gon schrieb am 25.07.2005 08:44
ok, das ganze Formular ist jetzt in einem <div id="form_neu">

Wozu das?
Steht da noch was anderes drin, als nur das <form>-Tag? Wenn nein, dann weg mit der div-Suppe! CSS-Anfänger der Welt, verabschiedet Euch von dem Euch fälschlicherweise zugeflüsterten Gerücht, dass man für CSS-Layout zwingend <div>s braucht, oder dass die Dinger immens wichtig sind, oder gar dass man Layout mit <div>s macht. Alles Unfug.

Wie schaffe ich es, dass alle inputs bündig unter einander angeordnet sind wie in den Beispielen und der Text sich variabel nach links erstreckt? Irgendwie hab ich das in seinen CSS nicht gefunden.

Steht alles im EfA-Tutorial beschrieben. float und text-align.

  Profil   Editieren   Zitieren
 

Antworten
Nach oben