Formular Anpassung

[clemensp]

Hi Leute,

nach langem Suchen im Forum wurde ich leider nicht fündig. Das Problem:

Auf einer Website von einem Kunden benötigen wir mehrere Formulare (Kontakt, Bewerbung, Propekt bestellung). Das anlegen an sich ist nicht das Problem doch die Formatierung stellt sich etwas Kniffelig raus. Das Formular muss wie folgt aussehen:



Das das ganze in 2 Spalten liegt habe ich gelöst indem ich im Formulargenerator <div class="form-left"> und right angelegt habe. Nun stehe ich aber vor einigen anderen Problemen. Wie bekomme ich das Label über das input feld, wie bekomme ich die abstände dazwischen hin. Ich bin leider noch nicht lang bei Typolight daher kp. Ich würde das ganze ja Hardcecoded verwenden da hätte ich die Formulare längst drinnen aber das Modul eignener html code kickt mir meinen code wieder raus. Daher sitze ich seid heute Morgen 8 Uhr an den Problem. Wenn ich die Lösung wie in einem anderen Thread verwende passiert es das das Label hinter dem Inputfeld liegt. Ich stehe auf dem schlauch :-S

grüße

[lucina]

Das sollte doch nach dem Muster

label, input{
display: block;
width: xxx px;
}

input{
margin-bottom: 1.5em;
}

label{
text-transform:uppercase;
}

gehen.

Oder habe ich jetzt irgendetwas an Deinem Formular nicht verstanden?

[xchs]

Hallo clemensp,

kann man sich das auch irgendwo online ansehen, wie das bei Dir im Quelltext so aussieht?

[clemensp]

Das sollte doch nach dem Mustergehen.

Oder habe ich jetzt irgendetwas an Deinem Formular nicht verstanden?

hat leider keinerlei auswirkungen :-(

[clemensp]

Hallo clemensp,

kann man sich das auch irgendwo online ansehen, wie das bei Dir im Quelltext so aussieht?

Hi,

klar unter "http://wa.my-ctm.de/adressen.html" ist die derzeitige Spielwiese. Die gescheiterten CSS versuche habe ich wieder entfernt.

[xchs]

Wäre in diesem Fall nicht besser, ein "tabellenloses Layout" zu verwenden?

[clemensp]

Wäre in diesem Fall nicht besser, ein "tabellenloses Layout" zu verwenden?

ich habe alles wieder auf standart gestellt weil ich am verzweifeln bin. Leider bin ich erst neu zu Typo light gestossen daher auch meine uwissenheit. Ich bin eher der Mensch gib mir einen editor und ich baue. Ich stelle mich warscheinlich mit dem geklicke etwas zu doof an. Selbst bei div Layout will es nicht klappen.

Wenn ich es wie in einem anderen Thread beschrieben über die Positionen mit dem wert absolut einbinde verschwindet das Label hinter dem Feld.

[clemensp]

Nun habe ich es wieder auf Tabellenloses Design gestellt. Mit Padding kann ich zwar die Boxen verschieben aber Ohne label. Wenn ich eine absolute Position zuweise verschwindet wieder das Label hinter dem input

[planepix]

Hallo clemensp,

so könnte es klappen

/* Style sheet westaudit-kontaktformular */

.form-left{float:left;width:240px;}
.form-left label{margin:0;padding:0;display:block;text-transform:uppercase;}
.form-left input{margin:3px 0;padding:2px;width:200px;border:1px solid #ccc;}
.form-left textarea{margin:3px 0;padding:2px;width:440px;border:1px solid #ccc;}
.form-right{float:left;width:300px;}
.form-right label{margin:0;padding:0;display:block;text-transform:uppercase;}
.form-right input{margin:3px 0;padding:2px;width:200px;border:1px solid #ccc;}

[xchs]

Hallo clemensp,

sehe gerade, dass Du in der Zwischenzeit das Formular-Layout umgestellt hast. Wenn Du die von planepix oben geposteten Regeln in Dein Stylesheet "westaudit-kontaktformular.css" einfügst, sollte es eigentlich so aussehen, wie Du Dir das vorstellst...

[clemensp]

Hallo clemensp,

so könnte es klappen

100000000000000000 DANK. Genau das Funktioniert. Ich glaubs nicht. Der Tag hat doch noch ein ende gefunden. VIELEN VIELEN Dank!!!!

[maximum]

Moin zusammen,

ich glaube ich bin hier richtig. ich habe ein ganz ähnliches problem. ich habe ein kontaktformular erstellt welches auf einer tabelle basiert. doch jetzt liegen die Textfelder direkt übereinander. ich würde gerne nur den Abstand zwischen den Tectfeldern vergörßern. ich habe im leo-feyer handbuch nachgeguckt und dort steht, dass die Textfelder edie classe ce_text verwenden. aber irgenwie klapt das nie. gibt es da ne andere classe? lieben Gruß Max

[clemensp]

Moin zusammen,

ich glaube ich bin hier richtig. ich habe ein ganz ähnliches problem. ich habe ein kontaktformular erstellt welches auf einer tabelle basiert. doch jetzt liegen die Textfelder direkt übereinander. ich würde gerne nur den Abstand zwischen den Tectfeldern vergörßern. ich habe im leo-feyer handbuch nachgeguckt und dort steht, dass die Textfelder edie classe ce_text verwenden. aber irgenwie klapt das nie. gibt es da ne andere classe? lieben Gruß Max

Die CSS Angaben von planepix passen eigentlich. Hast du mal einen Link das man sich das ganze anschauen kann? Verwende wenn möglich auch ein Tabellenloses Format.

[maximum]

hey,
klasse dass du so schnell antwortest. Leider kann ich noch kein Link aufweisen, da ich lokal arbeite. Wenn es dir evt. hilft, habe ich ein Screenshot um das besser zu zeigen. Also wiegesagt: ich hätte gerne die Abstände zwischen den textfeldern etwas größer. Du meinst ich soll kein Tabellen-layout benutzen. Kannst du mir dann verraten, welche CSS ich benutzen muss? Das wäre super.

Lieben Gruß Max

[clemensp]

hey,
klasse dass du so schnell antwortest. Leider kann ich noch kein Link aufweisen, da ich lokal arbeite. Wenn es dir evt. hilft, habe ich ein Screenshot um das besser zu zeigen. Also wiegesagt: ich hätte gerne die Abstände zwischen den textfeldern etwas größer. Du meinst ich soll kein Tabellen-layout benutzen. Kannst du mir dann verraten, welche CSS ich benutzen muss? Das wäre super.

Lieben Gruß Max

Ah so :-D alles untereinander. Da reicht es die Tabellen abstände untereinander zu vergrößern mit einem Padding. Die CSS definierst du ja selbst unter Seitenlayout. Ich schaue heute abend nochmal rein muss jetzt nur los daher kann ich dir keine genaue Antwort geben. Grüße

[maximum]

wunderbar. das klingt doch schon besser. Ich habe mal eine allgemeine Frage zu CSS. Ich habe öfters probleme die CSS korrekt zuzuweisen.
Nehmen wir jetzt mal dieses Formular. Bei der Formulareinstellung kann man ja unten eine CSS und ID zuweisen in diesen 2 Textfeldern. Welches Textfeld muss ich nun benutzen. und wie ist die koprrekte schreibeweise. ich komme da oft durcheinander und rate im endeffekt nur rum. Wie würdest Du/Ihr diesem Formular eine CSS zuweisen (welche Bezeichnung etc)

Lieben Gruß Max

[clemensp]

Hi,

sorry wir hatten kein inet an den Feiertagen. Naja das ist eigentlich recht Simpel. Die ID ist einmalig die darfst du nur einmal vergeben. Das zweite feld sind die Klassen die kannst du mehrfach vergeben.

Eine Klasse wird durch einen Punkt (.) vor dem Namen des Selektoren bestimmt. Die Syntax zur Deklaration eines Klassenselektoren ist:

.[Klassenname] {
Eigenschaft:Wert;
...
}

Ein Beispiel:

.navbar {
color:#0000FF;
}

den PUNKT setzt du aber nicht unten bei den Feldern sondern erst in deiner CSS. Genauso bei den IDs. Eine ID wird durch eine Rautenzeichen (#) vor dem Namen des Selektoren bestimmt. Die Syntax zur Deklaration eines ID-Selektoren ist:

#[ID-Name] {
Eigenschaft:Wert;
...
}

Ein Beispiel:

#footer {
color:#FF00FF;
}

Die Schreibweise ist dir überlassen. Du kannst eine ID vergeben wie du willst. Zb. Wurstsalat dann wäre in der CSS die ID #Wurstsalat. Das einzige auf was du aufpassen musst ist das du es genausoschreibst wie du es in deinem Modul, Artikel oder sonst wo vergeben hast und die ID nur einmalig verwendest.

[DerDose]

Wie hast du denn die beiden CSS Klassen generiert, also left und right?

[planepix]

Hallo DerDose,

die HTML-Elemente legst Du im Formular an, mit dem Element HTML.

Schau mal hier.