2 fieldsets naast elkaar maar hoe

Status
Niet open voor verdere reacties.
Atwist

Atwist

Terugkerende gebruiker
Lid geworden
24 jan 2006
Berichten
1.055
Besturingssysteem
Wndows 10
Office versie
2016
Hoe zet je 2 fieldsets naast elkaar.

Omdat mijn invullijst te lang is wilde ik deze gaan splitsen en verdelen over 2 fieldsets, maar deze moeten dan wel naast elkaar staan.
Of kan het ook in 1 fieldset en dan bv 10 inputs links en 10 inputs recht dan ben ik ook geholpen.

Ik hoor het graag:eek:
 
Ik raad aan om het eens met float (CSS) te proberen. Geef ze beiden een float mee.
 
Laatst bewerkt:
Zoals php4u aangaf is float: left een goede manier. Een alternatief is display: inline-block. Moderne browser (dus niet internet explorer) kunnen overweg met flex 50%.
Code: 
<div class="field-cols">
  <fieldset class="field-col">
  ...
  </fieldset>
  <fieldset class="field-col">
  ...
  </fieldset>
</div>

.field-cols, .field-col {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.field-cols {
  display: flex;
  flex-wrap: wrap;
}
.field-col {
  width: 50%;
  flex: 0 0 50%;
}
 
@Bron
Volgens jou methode krijg ik dit


Code: 
<FORM method=post name=form1 action=kundeneu.php>
 <div class="field-cols"> 
 <fieldset class="field-col">
  <LEGEND>Kunden Daten</LEGEND>
<TABLE>
  <TBODY>
  <TR>
    <TD>Anrede</TD>
    <TD><INPUT name=anrede></TD></TR>
  <TR>
    <TD>Vorname</TD>
    <TD><INPUT name=vorname></TD></TR>
  <TR>
    <TD>Nachname</TD>
    <TD><INPUT name=nachname></TD></TR>
  <TR>
    <TD>Geburts Datum</TD>
    <TD><INPUT name=anrede></TD></TR>
  <TR>
    <TD>Anschrift</TD>
    <TD><INPUT name=anschrift></TD></TR>
  <TR>
    <TD>Postleidszahl</TD>
    <TD><INPUT name=plz></TD></TR>
  <TR>
    <TD>Ort</TD>
    <TD><INPUT name=ort></TD></TR>
  <TR>
    <TD>Telefon</TD>
    <TD><INPUT name=telefon></TD></TR>
    <TD>Handy</TD>
    <TD><INPUT name=handy></TD></TR>
  <TR>
    <TD>Extra Verbindings Daten</TD>
    <TD><TEXTAREA rows=3 name=extrainfo></TEXTAREA></TD></TR></TBODY>
	</TABLE>
	 </fieldset>
	 </div>

  <div class="field-cols">
  <fieldset class="field-col">
<TABLE>
  <TBODY>
  <TR>
    <TD>Krankenkasse</TD>
    <TD><INPUT name=krankenkasse></TD></TR>
  <TR>
    <TD>Versicherungs Nummer</TD>
    <TD><INPUT name=kknummer></TD></TR>
  <TR>
    <TD>Datum der Beratung</TD>
    <TD><INPUT name=brdatum></TD></TR>
  <TR>
    <TD>Art der Arbeit</TD>
    <TD><INPUT name=artarbeit></TD></TR>
  <TR>
    <TD>Art der Abrechnung</TD>
    <TD><INPUT name=abrechnung></TD></TR>
  <TR>
    <TD>Rechnung wird zugestellt an</TD>
    <TD><INPUT name=rechnungzugestellt></TD></TR>
  <TR>
    <TD>Datenschutzerklärung</TD>
    <TD><INPUT name=dsgvo></TD></TR>
  <TR>
    <TD>Bekante Allergien</TD>
    <TD><INPUT name=allergien></TD></TR>
  <TR>
    <TD>Extra Kunde Info</TD>
    <TD><TEXTAREA rows=3 name=kundeinfo></TEXTAREA></TD>
	</TR>
   <TD></TD>
    <TD><INPUT type=reset value="Opnieuw instellen"><INPUT type=submit value="Neu Kunde Speichern" name=Submit></TD>
	</TR>
	</TBODY>
	</TABLE>
	</fieldset>
	</div>
	</FORM>
 

Bijlagen

  • Methode bron.png
    Methode bron.png
    14 KB · Weergaven: 55
Je hebt her en der wat syntax fouten. Volg de html hieronder om dit op te lossen.
Dat de 2 tabellen onder elkaar komen komt omdat je 2 keer de <div class="field-cols"> gebruikt, dat is eentje teveel.
Om tabelproblemen te voorkomen heb ik de style van de tabel hieronder erbij gezet.

Code: 
[B]HTML[/B]

<form class="form1" method="post" name="form1" action="kundeneu.php">
  <div class="field-cols">
    <fieldset class="field-col">
      <legend>Kunden daten</legend>
      <table>
      <tbody>
        <tr>
        <td>Anrede</td>
        <td><input type="text" name="anrede"></td>
        </tr>
        <!-- ... hier de rest ... -->
        <tr>
        <td>Handy</td>
        <td><input type="text" name="handy"></td>
        </tr>
        <tr>
        <td>Extra verbindings daten</td>
        <td><textarea rows="3" name="extrainfo"></textarea></td>
        </tr>
      </tbody>
      </table>
    </fieldset>
    <fieldset class="field-col">
      <legend>Mehr daten</legend>
      <table>
      <tbody>
        <tr>
        <td>Krankenkasse</td>
        <td><input type="text" name="krankenkasse"></td>
        </tr>
        <!-- ... hier de rest ... -->
        <tr>
        <td>Extra kunde info</td>
        <td><textarea rows="3" name="kundeinfo"></textarea></td>
        </tr>
        <tr>
        <td> </td>
        <td><input type="reset" value="Legen">
        <input type="submit" value="Opslaan" name="submit"></td>
        </tr>
      </tbody>
      </table>
    </fieldset>
  </div>
</form>

[B]CSS[/B]

/* een aantal standaard waarden */
.form1 {
  width: 100%;
  font: normal 14px/1.5 'Helvetica',Arial,sans-serif;
}
.form1, .form1 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}
/* container voor beide fieldsets */
.form1 .field-cols {
  display: flex;
  flex-wrap: wrap;
}
/* fieldset 50% van de breedte */
.form1 .field-col {
  width: 50%;
  flex: 0 0 50%;
  padding: 5px;
}
/* tabel 100% van fieldset breedte */
.form1 table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  border: 1px solid #999;
}
/* tabel cel */
.form1 td {
  padding: 4px 6px;
  vertical-align: top;
  text-align: left;
}
/* eerste cel 40% (dus 2e cel 60%) */
.form1 td:first-child {
  width: 40%;
}
/* input/textarea 100% van de cel breedte */ 
.form1 input, .form1 textarea {
  width: 100%;
  border: 1px solid #999;
}
/* submit en reset 'auto' breedte */
.form1 input[type=submit],
.form1 input[type=reset] {
  width: auto;
  padding: 3px 12px;
  font-weight: bold;
}

Suc6. Have fun.
 
Het heeft even geduurd maar het werkt nu en ben erachter wat het probleem is geweest.
Mijn site had ik met "Grid" "Gridrow" en "Colomns" opgezet en dat werkt het niet lekker als er nog weer eens een opdracht overheen komt met een opbouw van colomns.

Dank voor jullie hulp @Bron en @PHP4U :thumb::thumb:
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan