[CSS, Typo3] Formulardesign

[joschilein]

Ich bin eigentlich dabei endlich eine vorhandene Seite auf ein ordentliches CMS Fundament zu stellen (wenn ich mir meinen Code von vor 2 Jahren anschaue, bekomme ich das kalte Zittern..) und dabei bin ich mal wieder bei Typo3 hängen geblieben. Dort habe ich mit dem Formularassistenten ein Kontaktformular entworfen und das gibt den folgenden Code aus (Auszug):

<form ..>
 ..
 <fieldset class="csc-mailform">
   <div class="csc-mailform-field">
    <label for="mailformname">Vor-/Nachname:</label> 
    <input type="text" name="name" id="mailformname" size="40" value="" />
   </div>
   <div class="csc-mailform-field">
    <label for="mailformstrasse">Firma</label> 
    <input type="text" name="strasse" id="mailformfirma" size="40" value="" />
   </div>
   ...
 </fieldset>
</form>

Ich verzweifel jetzt langsam, weil ich es einfach nicht gebacken bekomme, dass die Inputs den gleichen Abstand zum linken Rand des Formulars haben und sich auf der gleichen Zeile des Labels und sich optisch innerhalb der div-"Zeile" befinden. Normal würde ich dem Label und dem Input nen float: left; verpassen und das dann wieder auflösen, aber ich habe durch den vorgegebenen Code ja nichts zum auflösen.
Mit einer absoluten Positionierung bekomme ich nur body als Referenzpunkt und das ist im Hinblick auf unterschiedliche Auflösungen eher bescheiden. Die komplette Seite ist auf Basis von Static aufgebaut und daher würde absolute und relative nur Probleme machen.

Es bleiben noch folgende Möglichkeiten:
1. Ich haue Typo3 mal wieder frustriert in die Tonne und

a) mache mir für dieses relativ kleine Projekt doch ein eigenes CMS (und werde nie fertig)​

b) suche nach einem anderen CMS (und bin nur wieder frustriert, dass die alle wieder an anderen Stellen ihre Schwachpunkte haben)​

2. Bastel mir mein eigenes Formular und stelle das als HTML Content in Typo3 ein (sehr sinnig dann den Assistenten noch in der Auswahl zu haben)

3. Verändere die Ausgabe des Assistenten (wenn ich mal die richtige Datei finden würde) (und ärgere mich dann erst wieder bei nem Update)

4. Mir sagt jemand ganz einfach, wie ich dieses blöde Positionierungsproblem auf der gegebenen HTML-Vorlage lösen kann

 

[perlini]

Ich verzweifel jetzt langsam, weil ich es einfach nicht gebacken bekomme, dass die Inputs den gleichen Abstand zum linken Rand des Formulars haben und sich auf der gleichen Zeile des Labels und sich optisch innerhalb der div-"Zeile" befinden. Normal würde ich dem Label und dem Input nen float: left; verpassen und das dann wieder auflösen, aber ich habe durch den vorgegebenen Code ja nichts zum auflösen.

Versteh dein Problem nicht ganz. Was heißt "optisch innerhalb der div-"Zeile" befinden". Und warum nutzt du nicht das div zum Auflösen?

label,input{float:left}
label{width:150px}
.csc-mailform-field{clear:left}

 

[tleilax]

An sowas hatte ich auch gedacht, aber nach dem Formular kriegt man per CSS keinen Break hin und dann floatet der Rest erstmal hinter dem letzten Formularfeld. Ist irgendwie unschön.

 

[perlini]

An sowas hatte ich auch gedacht, aber nach dem Formular kriegt man per CSS keinen Break hin und dann floatet der Rest erstmal hinter dem letzten Formularfeld. Ist irgendwie unschön.

Na dann halt dem fieldset 'ne Breite mitgeben.

 

[ZeroCCC]

	label {
		clear: left;
		float: left;
		
		width: 200px;
	}
	
	input {
		float: left;
	}
	
	.csc-mailform-field {
		padding-top: 5px;
	
		border: 1px solid black;
		
		height: 25px;
		
		clear: left;
		
		margin-bottom: 1px;
	}

ich würde aber an deiner stelle noch mal als letztes in die divs nen <br /> rein setzen und dann .csc-mailform-field br { clear: left; } machen... damit kannste dir einmal die höhen angaben ersparen für das div und in label das clear.