Kontaktformular 2 spaltig umbauen - aber wie?

[Nadin]

Hallo Forum

Das ist mein erster Post und hoffe das Ihr mir vielleicht helfen könnt.

Ich möchte ein php-Kontaktformular erweitern durch weitere Angaben (Checkbox etc.), um dass als php-Bestellformular benutzen zu können. Dazu möchte ich eigentlich 2 Spalten machen, nur klappt das nicht wie ich möchte.

Lösche ich die eine Spalte, geht die rechte nach rechts und wenn beide angezeigt werden, stehen sie untereiander...das möchte ich aber nicht. Auch komisch ist, warum die "fieldsetrechts" in der "fieldsetlinks" ist.

Ich habe das alles farblich mit einem bunten Rahmen versehen, damit ich das besser auseinander halten kann

Würde mich freuen wenn ihr mir helfen würdet...
Liebe Grüße

Hier noch die Angaben.

<h2>Kontakt</h2>
                                          
<form id="contacts-form" method="post" action="mail.php">                                            
                                          
<fieldsetlinks>
   <p class="reihelinks">
		<label for="strasse" class="leftLabel">Strasse: </label>
		<input type="text" id="strasse" name="strasse" value="" />
	</p>
	
	<p class="reihelinks">
		<label for="plz" class="leftLabel">PLZ: </label>
		<input type="text" id="plz" name="plz" value="" />
	
		<label for="ort">Ort: </label>
		<input type="text" id="ort" name="ort" value="" />
	</p>
	
	<p class="reihelinks">
		<label for="land" class="leftLabel">Land: </label>
		<input type="text" id="land" name="land" value="" />
	</p>
</fieldset>
                                             
<fieldsetrechts>
   <p class="reiherechts">
		<label for="strasse" class="leftLabel">Strasse Rechts: </label>
		<input type="text" id="strasse" name="strasse" value="" />
	</p>
	
	<p class="reiherechts">
		<label for="plz" class="leftLabel">PLZ Rechts: </label>
		<input type="text" id="plz" name="plz" value="" />
	
		<label for="ort">Ort Rechts: </label>
		<input type="text" id="ort" name="ort" value="" />
	</p>
	
	<p class="reiherechts">
		<label for="land" class="leftLabel">Land Rechts: </label>
		<input type="text" id="land" name="land" value="" />
	</p>
</fieldset>                                             
</form>

#contacts-form { border: 1px solid #000; clear:right; width:100%; overflow:hidden;}
#contacts-form p { margin:0; padding:0; }

#contacts-form fieldsetlinks {	
        float: left;
	margin-bottom:10px;
	padding: 20px 30px 20px 30px;
	border: 2px solid #dc7333;}
  
#contacts-form .reihelinks {
	width: 370px;
	margin: 5px auto;
	overflow: auto;
        border: 1px solid #00FF26;}
  
#contacts-form fieldsetrechts {	
        float: right;
	margin-bottom:10px;
	padding: 20px 30px 20px 30px;
	border: 2px solid #FF0008;}
  
#contacts-form .reiherechts {
	width: 370px;
	margin: 5px auto;
	overflow: auto;
        border: 1px solid #00FF26;} 
  
#contacts-form .leftLabel {
	float: left;
	width: 80px;
	text-align: right;
        border: 1px solid #002AFF;} 
  
#contacts-form input { width:240px; padding:2px 0 2px 3px; border:1px solid #d9d9d9; background:none;}

[hero-master]

Hey Nadin und ein herzliches willkommen,
ich habe leider durch deinen Post nicht wirklich verstanden, wie es am Ende aussehen soll. Kannst du das mal skizzieren? Wo sollen da die 2 Checkboxen hin? Oder willst du einfach nur die beiden fieldsets nebeneiandner haben?


edit: Einen HTMl-TAG "<fieldsetrechts>" gibt es nicht, sondern nur "<fieldset>"

[Nadin]

Hallo Hero-Master
Danke für dein Willkommen
Ja, ich möchte die beiden fieldsets nebeneinander haben und dann in den jeweiligen fieldsets noch andere felder (z.B. Geburtstag etc.) angeben.

Ich weiß nicht wie das möglich ist. Was mich auch irritiert, dass ist der rote Rahmen im Orangen, da das ja eigentlich die beiden fieldsets sind und nicht ineinander sein sollten... hoffe ich habe das so richtig gesagt?!

Hie ein Bild

Liebe Grüße

[hero-master]

Mach einfach aus dem fehlerhaften <fieldsetlinks> und <fieldsetrechts> ein <fieldset id="links"> und ein <fieldset id="rechts". Dann floaten sie schonmal richtig. Wenn du sie nebeneiander ahebn willst, dann lass beide am besten links floaten:

#contacts-form #links {	
        float: left;
	margin-bottom:10px;
	padding: 20px 30px 20px 30px;
	border: 2px solid #dc7333;}
  
#contacts-form #rechts {	
        float: left;
	margin-bottom:10px;
	padding: 20px 30px 20px 30px;
	border: 2px solid #FF0008;}

[Nadin]

Ich danke dir Nico, dass ist nun so wie ich es haben wollte, genau so
Ich übernehme deine Tipps einfach komplett, dass dürfte doch dann so gehen, denke ich, oder?
Jedenfalls danke ich dir wirklich - du hast mir sehr geholfen!

Ich bin happy

[Nadin]

Sorry Nico, habe mich wohl zu früh gefreut aber ich habe noch eine Frage an dich und es wäre klasse wenn du mir auch hier fachmännisch helfen könntest. Ich habe deine Tipps befolgt und im Firefox sieht das auch alles gut aus, habe nun im Internet Explorer (Version Nr. 6) geguckt und das sieht nicht so schön aus. Denn im Internet Explorer wird alles untereinander dargestellt und ich weiß nicht warum Kannst du mir bitte nochmal helfen..das wäre echt lieb, denn ich weiß wirklich nicht was schon wieder falsch ist.

Ich habe dir hier ein Bild gespeichert, es ist nur ein Auszug, zeigt das Problem aber gut.

[hero-master]

Hi,
da musst du den beiden fieldsets (#links und #rechts) einfach jeweils noch eine Breite mitgeben, dann klappts auch mit den fast ausgestorbenen Browsern

[Nadin]

Hallo Nico
Wiedermal danke ich dir für deine tolle Hilfe.
Dein Name stimmt: Hero-Master