Buttons in Formularen nebeneinander

[dimugi]

Hallo allerseits!

Ich möchte gerne prinzipiel in einem Formaular eine submit- u. einen reset-button nebeneinader plazieren.
Ich würde dies gerne mit CSS erreichen.

Z.Bsp. habe ich mit dem Typo Mailform-Generator ein Kontaktformular erstellt. Durch Foren bin ich bereits darauf gestoßen, wie man mittels CSS die Elemente beeinflußt (neue param-klassen und dann mit CSS).

Die Buttons werden aber nun untereinander angezeigt, nicht nebeneinander. Auch beim Label einer Checkbox tritt dies auf.

Bei einer normalen Seite könnte man das Formular ja mittels einer Tabelle in Form bringen, wie aber unter Typo3?

Kann mir da jemand helfen bzw. hat eine Lösungsansatz?

Gruß
Dimugi

[TypoTom]

Hallo,

poste mal nen URL, damit man sich das ansehen kann.

[dimugi]

Forbitec: Kontakt

Gruß
Dimugi

[TypoTom]

Hallo,

also, in deinem CSS sind 2 Probleme:
1.) Dieses <div class="label">, in dem deine Button sind, darf nicht so breit sein, 0px wären besser, ansonsten regelst Du mit diesem div nur den Abstand von der linken Seite, ähnlich wie mit einem margin-left.
2.) Vor diesem <div class="label"> ist ein weiteres div. Das muss als style "float:left" erhalten, und schon sind die Button nebeneinander.

Viele Grüße,
Tom

[dimugi]

Das <div class="label"> war mit einer Größe versehen.

Im Template-Setup:

labelWrap.wrap = <div class="label" style="width:425px;">|</div>


Das <div> ohne Klasse bzw. id würde ich gerne beeinflußen, es wird von Typo3 um die Buttons erstellt.

Frage wäre: Wie kann ich darauf Winfluß nehmen, es handelt sich ja um Typo3 eingestzten Code?

Gruß
Dimugi

[dimugi]

Hier einmal das Template-Setup (Auszug)

----------------------------------------------------------------------------------------------
Template-Setup:

tt_content.mailform.20 {
accessibility = 1
noWrapAttr=1
formName = mailform
dontMd5FieldNames = 1
REQ = 1
layout = <div>###LABEL### ###FIELD###</div>
COMMENT.layout = <div>###LABEL###</div>
LABEL.layout = <div>###LABEL### ###FIELD###</div>
### doppeltes LABEL
// RADIO.layout = <div>###LABEL### ###FIELD###</div>
RADIO.layout = <div class="radio">###FIELD###</div>

### Möglichkeit die Input Felder nebeneinander sauber
### darzustellen
//labelWrap.wrap = <div style="width:100px; float:left;">|</div>
labelWrap.wrap = <div class="label">|</div>
commentWrap.wrap = |
### nach jeden Optionsfeld ein Umbruch, lässt man den weg, sind
### die Optionsfelder nacheinander
radioWrap.wrap = |<br />
### Das selbe gilt für benötigte Felder in Formularen
REQ.labelWrap.wrap = <div class="required">|</div>
stdWrap.wrap = <div class="mymailform">|</div>
badMess = Fehler: | Die Eingabe enthält Fehler
}

# Default PAGE object:
page = PAGE

...

page.includeCSS {
file10 = fileadmin/css/forbitec_main_screen.css
file10.media = screen
}

tt_content.mailform.20 {
params >
params.input = class="mailform-input"
params.password = class="mailform-password"
params.textarea = class="mailform-text"
params.check = class="mailform-check"
params.radio = class="mailform-radio"
params.select = class="mailform-select"
params.file = class="mailform-file"
params.reset = class="mailform-reset"
params.submit = class="mailform-submit"
}

----------------------------------------------------------------------------------------------

Gruß
Dimugi

[TypoTom]

Das labelWrap.wrap = <div class="label" style="width:425px;">|</div> musst Du so lassen, sonst änderst Du die Breite von ALLEN Labels.

Im Typoscript-Object-Browser kannst Du irgendwas finden, was Dir dabei hilft, die Klassen zu beeinflussen, aber: Da kannst Du lange basteln, das Standardformular ist irgendwie nicht so toll.

Wenn Du in 30 Minuten mit deinem Formular fertig werden willst, dann installiere Dir doch einfach die Extension "Powermail". Die ist viel besser zu administrieren, und die Formulare sind so einfach anzulegen, dass jeder Redakteur das hinbekommt.

Wenn Du unbedingt das Standardformular nutzen willst, dann teste mal, was es bringt, wenn Du im TS sowas wie
LABEL.layout = <div class="meinlabel">###LABEL### ###FIELD###</div>
schreibst.

Viele Grüße,
Tom

[dimugi]

layout = <div class="mylabel">###LABEL### ###FIELD###</div>

ist die Zeile für das leere <div>

bringt aber nichts, da das Label vor mehreren Elementen eingebaut wird.

Ich hatte mir gestern Abend einmal PowerMail heruntergeladen und installiert. Da muß ich mich aber auch erst einmal hineinkämpfen.

So ohne ist PowerMail auch nicht. Da brauche ich eine Docu zu.

Gruß
Dimugi

[TypoTom]

Die ist doch dabei, oder Du guckst hier:
http://typo3.org/documentation/docum...il/1.6.4/view/

[TypoTom]

oder hier:
http://www.einpraegsam.net/fileadmin...esentation.pdf