Formular und css

**Theresa** · 07.12.2010, 13:09

Hallo,
Als Neuling bei Contao, habe ich ein Problem mit dem CSS für das Kontaktformular und bräuchte bitte dringend Hilfe.
Die Website habe ich nach Anleitung aus dem Buch von Thomas Weitzel und das Formular funktioniert einwandfrei.
Nun wollte ich aber die Optik etwas verändern und habe ein Stylesheet „Kontaktformular“ erstellt. Irgendwie steh ich auf der Leitung, ich bekomme das css es nicht in das Formular.

Könnte mir bitte jemand auf die Sprünge helfen?
Danke schon mal vorab
Gruß Thea

**planepix** · 07.12.2010, 13:44

Hallo Thea,

dann will ich als Autor gerne antworten

Kannst Du einen Link zur Verfügung stellen, so dass man sich das bisher umgesetzte einmal ansehen kann? Gerne auch den Link als PN schicken.

So sind es im Moment zu wenige Informationen, damit man erfolgreich helfen kann.

**karo** · 13.12.2010, 10:00

Hallo Theresa!

Ich stell dir mal einen meiner CSS-Codes hier herein - vielleicht hilft er dir!

Code:

/**
 KONTAKT-FORMULAR 
**/
#contactform label,
#contactform input,
#contactform textarea,
#contactform div.submit_container
{
	float:left;
}
#contactform label
{
	width:120px;
	clear:both;
	font-weight:bold;
}
#contactform .text
{
	width:200px;
	border:1px solid #ccc;
}
#contactform div.submit_container
{
	clear:both;
	margin-bottom:30px;
	margin-left:120px;
}
#contactform p.error
{
	color:#ff0000;
}
#contactform .textarea
{
	width:350px;
	height:150px;
	overflow:auto;
	margin:5px 0;
	border:1px solid #ccc;
}
#contactform .captcha
{
	width:30px;
	margin-right:10px;
	border:1px solid #ccc;
}

**Theresa** · 19.12.2010, 14:31

vielen Dank Karo,
das Kontaktformular steht

**karo** · 19.12.2010, 15:18

Hey Theresa!

kein Problem!
noch einen schönen Sonntag!

**marcelo** · 17.01.2011, 18:15

Hallo planepix!

Ich habe wahrscheinlich das gleiche Problem wie Theresa und habe mir einmal Deine kontakt.css kopiert.

Die CSS-habe ich in den Contao Themes-Stylesheet importiert, alles ohne Probleme.
Formular über den integrierten Formulargenerator erstellt und veröffentlicht.

Die CSS-Einstellungen werden jedoch beim Aufruf nicht berücksichtigt. Habe direkt im Formulargenerator in der CSS-ID Klasse stehen: kontakt. Es erfolgt jedoch keine Ausführung des kontakt.css

Wo muss ich den im Bereich des Formulars die CSS-Klasse ansprechen und mache ich etwas grundlegendes falsch?

Liebe Grüße
Marcelo!

**planepix** · 17.01.2011, 18:25

Hallo Marcelo,

meinst Du die CSS-Definitionen der Fotografen-Beispielseite?

Dort hat das Formular die Id2 (#f2) und sitzt in der Hauptspalte (#main).

Wenn Du eine CSS-ID vergeben hast #kontakt, dann musst Du im CSS-Dokument #f2 durch #kontakt austauschen. Danach sollte es schon besser aussehen

Ach ja, und dann im Seitenlayout natürlich einbinden

**marcelo** · 17.01.2011, 18:42

Hallo planepix!

Vielen Dank für Deine rasche Hilfe, aber irgendwie verstehe ich jetzt nur Bahnhof.

Du hast hier in diesem Post eine CSS-Datei veröffentlicht und diese habe ich bei mir importiert und kontakt.css genannt. CSS_Datei ist im Seitenlayout aktiviert.

Mein generiertes Formular hat die ID3.

So und nun hagt es bei mir!

Was muss ich jetzt tun damit die CSS-Anweisungen ausgeführt werden?
Ein neues Modul anlegen ist doch mit Sicherheit falsch oder doch?

Liebe Grüße
Marcelo

**planepix** · 17.01.2011, 18:46

Hallo Marcelo,

die oben gepostete CSS ist nicht von mir :-)

Hast Du einen Link zur Seite?

Wenn Du den CSS-Code von oben verwendest dann ersetze #contactform durch #kontakt.

**marcelo** · 17.01.2011, 18:50

Oops. ich habe gedacht diese war von Dir - Sorry!
Der Link zur Website habe ich gerade per Pvt-Mail zugesendet.

Liebe Grüße
Marcelo

**planepix** · 17.01.2011, 18:57

Hallo Marcelo,

ok, Dein Formular hat die ID 3, also #f3.
Tausche in der kontakt.css #contactform durch #f3 aus, dann greifen die CSS-Definitionen.

**marcelo** · 17.01.2011, 19:04

Hallo Planepix,

perfekt und vielen Dank, es funktioniert.
Durch Deine Info zur Umbenennung bin ich auf die Idee gekommen in die CSS-ID/Klasse - im Formular selber- einfach contactform zu schreiben und siehe da es funktioniert.

Noch einmal vielen, vielen Dank!
Marcelo!

**marcelo** · 18.01.2011, 17:19

Hallo Planepix
Hallo All :-)

Ich habe noch einen kleinen Schönheitsfehler in der CSS-Datei.
Die Sicherheitsabfrage wird nicht beim entsprechendem Feld angezeigt sondern neben dem Nachrichtenfeld.

Ich finde den Fehler nicht in der CSS-Datei, ist der dort überhaupt zu finden?

Danke schon einmal im voraus für Deine / Eure Unterstützung

Marcelo!

**planepix** · 18.01.2011, 17:59

Hallo Marcelo,

ein Vorschlag:

Code:

/* Style sheet kontakt */
#contactform label,#contactform input,#contactform textarea,#contactform div.submit_container{float:left;margin-top:5px;margin-bottom:5px;}
#contactform label{width:200px;clear:both;font-weight:bold;}
#contactform .text{width:200px;border:1px solid #ccc;}
#contactform div.submit_container{clear:both;margin-bottom:30px;margin-left:120px;}
#contactform p.error{color:#ff0000;}
#contactform .textarea{width:350px;height:150px;overflow:auto;margin:5px 0;border:1px solid #ccc;}
#contactform .captcha{display:block;width:200px;border:1px solid #ccc;}
#contactform .captcha_text{float:left;clear:both;}

Variante:

Code:

/* Style sheet kontakt */

#contactform label{width:200px;font-weight:bold;margin:0 0 5px 0;padding:0;display:block;}
#contactform .text{width:200px;border:1px solid #ccc;margin:0 0 5px 0;}
#contactform div.submit_container{margin:5px 0 30px 0;}
#contactform p.error{color:#ff0000;}
#contactform .textarea{width:350px;height:150px;overflow:auto;margin:5px 0;border:1px solid #ccc;}
#contactform .captcha{display:block;margin:5px 0;border:1px solid #ccc;}

**marcelo** · 18.01.2011, 18:34

Hallo Planepix,

vielen Dank für Deine Unterstützung.
Ich habe jetzt zwar das Eingabefeld und die Sicherheitsabfrage nebeneinander stehen, doch der Text der Sicherheitsabfrage "Was ist die Summe aus 5 + 5" ist um 5px nach oben versetzt. Das Feld selbst hat ja Margin-top: 5px, der Text will nur nicht den gleichen Abstand herstellen.

Wie bekomme ich denn den Text ebenfalls um 5px versetzt?

Ich habe dann noch eine Frage die mit dem Grid zutun hat. Kann und darf ich diese hier auch stellen oder soll ich lieber einen neuen Beitrag eröffnen?

Liebe Grüße
Marcelo!

**dude76** · 20.01.2011, 13:00

Hi,

hab auch was zum Thema Formular:

Formularfelder können ja innerhalb einer Tabelle oder Label dargestellt werden.

Wie ist es denn möglich per CSS nicht alle Felder untereinander sondern
in 2 Spalten aufzuteilen???

Standarmäßig haben die label tags keine ID und es wird immer
ein [br] nach jedem Feld eingefügt!

Mfg
Siggi

**MacKP** · 24.01.2011, 20:49

Hallo dude76,
kleiner Tipp:
br bekommt man über css weg mit display:none;
2 Spalter kann man auch so machen. Ist die Frage ob du feldname | Eingabefeld nebeneinander willst oder eben 2 Felder mit deren Namen....
Aber auch dazu könnte man was über die Suche finden ;-)

Viele Grüße