Hallo ich habe ein Formular auf http://develop.cgsolutions-online.de/Kontaktformular.24.0.html
und ich möchte das das Formular bündig untereinander steht. Es war auch einmal so, ich weiß nicht wieso es jetzt nicht mehr bündig ist...
Also so:
Name:
INPUT-FELD für Name
Vorname:
INPUT-FELD für Vorname
...
Hier mein TS:
Das CSS Mailstyle für das Formular wird im oberen Bereich meines TS eingelesen.
page.includeCSS {
file1 = fileadmin/templates/horizontal_CSS.css
file2 = fileadmin/templates/mailstyle.css
}
Danach kommt das TS für die Konfig:
#Mailform
tt_content.mailform.20 {
accessibility = 1
noWrapAttr=1
formName = mailform
dontMd5FieldNames = 1
REQ = 1
layout =<div>###LABEL### ###FIELD###</div>
COMMENT.layout =<div>###LABEL###</div>
### doppeltes LABEL
// RADIO.layout =<div>###LABEL### ###FIELD###</div>
RADIO.layout =<div class="radiolayout">###FIELD###</div>
LABEL.layout =<div>###LABEL### ###FIELD###</div>
### Möglichkeit die Input Felder nebeneinander sauber
### darzustellen
//labelWrap.wrap =<div style="width:100px; float:right;">|</div>
labelWrap.wrap =<div style="width:350px;">|</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 style="width:100px; #float:right;">|</div>
REQ.labelWrap.wrap =<div style="width:350px;>|</div>
stdWrap.wrap =<div class="formu">|</div>
}
### 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"
}
Hat mir jemand eine Idee??
Danke und lg chris
Schau mal ob dein CSS wirklich eingebunden wird ansonsten musst du wohl den Inhalt checken...
Das css stimmt und wird eingebunden. Habe auch testweise die Mailsytle.css von einem anderen Projekt genommen da habe ich das gleiche Problem, obwohl das Formular im anderen Projekt richtig angezeigt wird. EInen Unterschied im TS der 2 Projekte kann ich auch nicht sehen aber vll fällt ja euch was am TS bei meinem Mailform auf, denn daran muss es eigentlich liegen.
Weil das das CSS eingelesen wird seh ich ja auch schon an der farbigen Umrandund des Formulars.
Hat jemand eine Idee?
Vll habe ich auch irgendwo eine Klammer zu früh geschlossen??
Hier mal das ganze TS:
doctype = xhtml_trans
xhtml_cleaning = all
[browser = msie6]
config.doctypeSwitch = 1
[global]
page.includeCSS {
file1 = fileadmin/templates/horizontal_CSS.css
file2 = fileadmin/templates/mailstyle.css
}
page {
headerData = COA
headerData.11 = TEXT
headerData.11.value = <script type="text/javascript" src="fileadmin/templates/horizontal_JS.js"></script>
}
Startkonfiguration Verbindung CSS/HTML/DBASE
page = PAGE
page.typeNum = 0
page.20 = TEMPLATE
page.20 {
template = FILE
template.file = fileadmin/templates/p1.html
subparts {
maincol < styles.content.get
}
#Hauptnavigation mit Java
subparts.menu = HMENU
subparts.menu {
special = directory
special.value = 2
1 = TMENU
1 {
expAll = 1
wrap = <ul id="nav">|</ul>
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
IFSUB = 1
IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
ACTIFSUB < .IFSUB
}
2 < .1
2.wrap = <ul>|</ul>
3 < .2
4 < .2
}
#Einbindung Navigation links
subparts.leftcol = HMENU
subparts.leftcol {
entryLevel = 1
special.value =
1 = TMENU
1.NO.allWrap= <li class="NO"> | </li>
ACT = 1
wrap = <ul> | </ul>
ACT.allWrap = <li class="ACT"> | </li>
}
#Rootline
subparts.rootline=HMENU
subparts.rootline.special=rootline
subparts.rootline.special.range= -2 | -1
subparts.rootline.1=TMENU
subparts.rootline.1.NO.allWrap= | / |*| | / |*| |
#Einbindung Copyright und Printlink
subparts.footer= TEXT
subparts.footer {
value = © Firma | <a href="http://url.de/Webdesign.22.0.html">Webdesign </a> | <a href="http://url/Impressum.23.0.html">Impressum </a>
}
}
#Haupt CSS-Datei
page.stylesheet = fileadmin/templates/p1.css
###Im Plugin Erweiterte Suche wird die Indexierung von Dateien aktiviert ##
page.config.index_enable = 1
page.config.index_externals = 1
index_descrLgd = 50
notification_email_urlmode=all
config.index_enable = 1
config.index_externals = 1
# StaticDocuments
config.simulateStaticDocuments = 1
config.simulateStaticDocuments_pEnc = md5
config.simulateStaticDocuments_addTitle=22
config.simulateStaticDocuments_pEnc_onlyP = L
#Admin Panel einblenden
config.admPanel = 1
#SPAM Encrypt Protect
config.spamProtectEmailAddresses = 2
config.spamProtectEmailAddresses_atSubst = (at)
#Deutsche Datumformatierung in tt_news
plugin.tt_news.displayList.date_stdWrap.strftime = %A %e. %B
plugin.tt_news.displayLatest.date_stdWrap.strftime = %A %e. %B
plugin.tt_news.displaySingle.date_stdWrap.strftime = %A %e. %B
plugin.tt_news.displaySingle.time_stdWrap.strftime = %H:%M Uhr
config.stat = 1
config.stat_apache = 1
config.stat_apache_logfile = awstat.log
config.stat_mysql = 1
page.config.sys_language_uid = 1
page.config.language = de
page.config.locale_all = de_DE
#Mailform
tt_content.mailform.20 {
accessibility = 1
noWrapAttr=1
formName = mailform
dontMd5FieldNames = 1
REQ = 1
layout =<div>###LABEL### ###FIELD###</div>
COMMENT.layout =<div>###LABEL###</div>
### doppeltes LABEL
// RADIO.layout =<div>###LABEL### ###FIELD###</div>
RADIO.layout =<div class="radiolayout">###FIELD###</div>
LABEL.layout =<div>###LABEL### ###FIELD###</div>
### Möglichkeit die Input Felder nebeneinander sauber
### darzustellen
//labelWrap.wrap =<div style="width:100px; float:right;">|</div>
labelWrap.wrap =<div style="width:350px;">|</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 style="width:100px; #float:right;">|</div>
REQ.labelWrap.wrap =<div style="width:350px;>|</div>
stdWrap.wrap =<div class="formu">|</div>
}
### 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"
}
Feld wiederherstellen Constants:
#Pfad zum eigenen Template
plugin.tt_news.templateFile = fileadmin/templates/news_template.tmpl
# Variable pid_list wird leer gemacht
plugin.tt_news.pid_list >
# PID wird über eine Konstante festgelegt
plugin.tt_news.pid_list = {$pid_list}
#Rekursiv, wenn euere News in Unterordner sind
plugin.tt_news.recursive >
plugin.tt_news.recursive = 1
#UID der Seite Singleview
plugin.tt_news.singlePid = {$singlePid}
#Archive Aktivieren
#UID der Archiveseite
plugin.tt_news {
archive = 1
archiveTypoLink.parameter = {$archiveTypoLink}
}
lg chris
Also wenn du in deiner CSS-Class .formu nur die Width von einem Prozentwert auf einen festen Wert änderst, dann wird das schon so angezeigt wie du willst.
Du musst mal überlegen von welchem Wert aus denn 80% berechnet werden sollen... Da würde ich als Script auch auf dem Schlauch stehen...
Also z.B.:
.formu {
width:200px;
padding-left:27px;
padding-top:25px;
padding-bottom:25px;
border: 0px solid #DEDDDB;
}
Setz dir am besten auch mal den Border auf 1px und spiel dann mal mit der width, dann siehst du auch was noch falsch ist. Alles nen bischen bug...
ich empfehle die Web-Developer Tools für den Firefox als Add On...
Hallo
Ich benutze immer sehr gern die Extension TMmailform (pil_mailform). Damit kann man seine Formulare schön als HTML erstellen.
Gruss
Christian