Zum Inhalt springen

Probleme bei der Formatierung von Formularen

Erstellt am 19. April 2009 · Noch keine Antworten

Tags: Frage

derkrebs ·

Hallo,

ich habe in meine Typo3-Site ein Formular eingefügt und dieses mithilfe des folgenden Scripts
(Original:http://www.pc-erfahrung.de/nebenrubriken/typo3/typo3-mailform-formatieren-anleitung.html)
modifiziert:

tt_content.mailform.20 {
  accessibility = 1
  noWrapAttr=1
  formName = mailform
  dontMd5FieldNames = 1
  REQ = 1
  layout = <div>###LABEL### ###FIELD###</div>
  
  COMMENT.layout = <div>###LABEL### ###FIELD###</div>
  commentWrap.wrap = |
  
  RADIO.layout = <div>###FIELD### ###LABEL###</div>
  CHECK.layout = <div>###FIELD### ###LABEL###</div>
   
  LABEL.layout = <div>###LABEL### ###FIELD###</div>
  labelWrap.wrap = <div style="width:100px;"> |</div>  
   
  ### nach jeden Optionsfeld ein Umbruch, lässt man den weg, sind
  ### die Optionsfelder nacheinander
  radioWrap.wrap = |
  checkWrap.wrap = |
   
  ### Das selbe gilt für benötigte Felder in Formularen
  REQ.labelWrap.wrap = <div style="width:100px;"> |</div>
  stdWrap.wrap =  <div class="formu">|</div>
}

### Formular CSS zuweisen
### Die CSS müssen natürlich eingebunden werden

### Des weiteren habe ich für die einzelnen durch CSS definierten
### Input, Select, etc. Klassen, ebenfalls im Setup von TYPO3

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

Zugehöriges CSS:

legend {
padding-left:10px;
padding-right:10px;
border: 0px;
}

fieldset {
border:0px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
border: 1px solid #C0C0C0;
}

.radiolayout {
width: 60%;
padding-top:15px;
padding-bottom:15px;
}

.formu {
width: 570px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0px;
}

.mf-radio {
border: 0px;
}

.mf-text {
width: 300px;
color: #000000;
border: 1px solid #C0C0C0;
margin-bottom: 5px;
}

.mf-check {
border: 0px;
}

.mf-select {
border: 1px solid #C0C0C0;
margin-bottom: 5px;
}

.mf-input {
width: 300px;
border: 1px solid #C0C0C0;
margin-bottom: 5px;
}

.mf-submit {
color: #ffffff;
background-color: #C0C0C0;
border: 0px;
}

... und das kommt dabei raus:

Bild: crawfish.macbay.de/…/formular.jpg

Paßt soweit alles super – außer die Checkboxen: da würde ich gerne
erreichen, dass der Text rechts neben den Feldern steht. Hab schon
alles mögliche versucht, aber ohne Erfolg... :-(

Weiß jemand Rat?

Vielen Dank schon mal für die Hilfe!

Gruß
Michael