[erledigt] CSS Problem bei Kontaktformular

**sepp_a_u** · 05.07.2011, 16:56

hallo zusammen,

bin gerade dabei eine kleine Site zu erstellen mit Contao - meine erste

habe jetzt gerade aber ein problem. habe ein kontaktformular erstellt mit dem formulargenerator und will dort einen spamschutz einbauen. hier das ergebnis bisher:

http://svtodtnau.de/contao/index.php/kontakt.html

wie bekomme ich es jetzt hin, dass auch der spamschutz die gleichen abstände hat wie die anderen dinge zueinander?

hier der code für das formatieren des kontaktformulars:

Code:

/* Kontaktformular gestalten*/
form#kontaktformular {
	line-heigt: 1;
	background-color: #adcbe6;
	padding: 0 18px 18px 18px;
	border-top: 1px solid #89adcd;
	margin: 0 0 2em 0;
}
#kontaktformular label {
	display: block;
	cursor: pointer;
	margin: 18px 0 3px 0;
}
#kontaktformular .checkbox_container label {
	display: inline;
	position: relative;
	bottom: 2px;
}
#kontaktformular .checkbox_container {
	margin-top: 1em;
}
#kontaktformular input,
#kontaktformular textarea {
	padding: 3px;
}
#kontaktformular input:focus,
#kontaktformular textarea:focus {
	background-color: #ececec;
	color: #000;
}
#kontaktformular p.error {
	background: #ffc0cb; 
	color: #000;
	max-width: 400px;
	padding: 3px;
	border: 1px solid #fff;
	margin-bottom: 3px;
}

wäre super, wenn mir jmd helfen könnte

**Harry** · 05.07.2011, 20:11

Gute Frage! Ich denke, Du meinst den größeren Abstand nach oben. Der kommt dadurch zustande, dass das darüber liegende Checkbox-Element als div-Container aufgebaut wird, also ein Block-Element ist, das quasi einen Zeilenumbruch gleich mitliefert. Zusammen mit dem anschließenden <br /> ergibt sich der größere Abstand. Man könnte speziell diesen Zeilenumbruch ausblenden mit:

#kontaktformular .checkbox_container + br {
display: none;
}

Alternativ könntest Du auch das "<br />" für alle Felder aus dem Template entfernen ("form_widget.tpl", Ende der vorletzten Zeile).

Gruß
harry

**Goldwing** · 08.05.2012, 13:10

Hallo sepp_a_u

Ich beschäftige mich seit kurzem mit Contao. Beim googlen bin ich auf Deinen Beitrag gestossen.

Auch ich möchte das Kontaktformular bearbeiten. Aber zuerst müsste ich wissen, wie man zum Code des Formulares kommt

Kannst Du mir dies bitte mitteilen?

Danke und Grüsse

Roland

**Andreas** · 08.05.2012, 13:20

Das sind die Templates, die mit 'form' beginnen. Allerdings rate ich dir davon ab, diese zu verändern, wenn es nur ums Design geht. Das kann man so gut wie alles mit CSS herrichten. Nur wenn du definitiv ein anderes Markup in den Templates benötigst, würde ich die anpassen.

**Goldwing** · 08.05.2012, 13:52

Hallo Andreas

Bis jetzt sieht mein Testformular so aus (siehe Anhang).

Ich möchte, dass alles schön gerichtet ist usw.

Wie kann ich das ganze mit CSS bearbeiten? Wo finde ich die Dateien?

Beste Grüsse

Roland

**Andreas** · 08.05.2012, 14:34

Du kannst das Formular entweder als Tabelle ausgeben (Haken bei 'tabellenloses Formular' weg), dann ist die Formatierung für Anfänger leichter, oder mit CSS da ran gehen. Dazu erstmal mit Firebug im Firefox ausprobieren.

Wo du deine CSS-Dateien findest weiß ich nicht, ich binde immer eigene CSS-Dateien mit theme_plus ein. Ansonsten im Theme bei den CSS-Dateien.

Je nachdem kannst du die Labels neben oder über die Inputs setzen. Dazu arbeitest du z.B. mit float:left;, damit nachfolgende Elemente rechts neben dem Element erscheinen. Mit clear:both; beginnt ein Element wieder in einer neuen Zeile. Elementen mit der Eigenschaft display:block; kannst du eine feste Breite geben. usw.

Hier http://www.yaml.de/docs/index.html#yaml-forms kannst du dir auch was abgucken. YAML hat allerdings ein anderes Markup der Form-Elemente, es geht aber auch mit dem Contao-Markup aus den Standard-Templates.

**sinus501** · 09.05.2012, 08:50

Problem gelöst?
Ich mache es generell immer so, aber ich bin auch kein Profi:

Ich schaue mir mit Firebug die Bezeichnung des jeweiligen Objekts an, welches ich anders platzieren will, oder formatieren.

Nach meiner Erfahrung hat jedes Textfeld oder auch das Spamschutzfeld eine Bezeichnung, z.B. ctrl_1 oder ctrl_5, je nach Feldhäufigkeit.
So kann ich dann dem Spamschutz z.B. sagen, float:left oder margin-top 15px etc. pp.