• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Kontaktformular nicht als Tabelle

R

_R_A_L_F_

Mitglied
Hallo zusammen,

bin gerade dabei ein Kontaktformular zu erstellen (siehe Anhang) aber mein Problem ist die Darstellung mit CSS.

Momentan hab ich es auf Basis einer Tabelle gestaltet aber das Problem ist, das es

A) nicht mehr Stand der Technik ist mit Tabelle
B) nicht so aussieht wie es soll

Ich weiß zwar wie ich in CSS die Textfeleder untereinander als Block darstellen kann aber ich weiß weder:
A) wie ich die textfelder nebeieinander darstellen kann
B) wie dies mit der Checkbox zu realisieren ist, dass es so aussieht wie auf dem Foto

Anbei der momentane Code:

HTML: 
<form id="anfrage-form" method="post" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
<table width="600px" border="0" align="center">
<tr align="left">
    <th><label><H6>Name/Firma/Verein*</H6></label>
    <input type="text" size="30" name="name" value=""></th>
    <th><label><H6>Veranstaltungsort*</H6></label>
    <input type="text" size="30" name="vort" value=""></th>
</tr>
<tr align="left">
    <th><label><H6>Ansprechpartner*</H6></label>
    <input type="text" size="30" name="ansprechpartner" value=""></th>
    <th><label><H6>Anzahl der Personen</H6></label>
    <input type="text" size="30" name="personen" value=""></th>
</tr>
<tr align="left">
    <th><label><H6>PLZ*</H6></label>
    <input type="text" size="30" name="plz" value=""></th>
    <th><label><H6>Art der Veranstaltung</H6></label>
    <input type="text" size="30" name="artveranstalt" value=""></th>
</tr>
<tr align="left">
    <th><label><H6>E-Mail*</H6></label>
    <input type="text" size="30" name="email" value=""></th>
    <th></th>
</tr>
<tr align="left">
    <th><label><H6>Veranstaltung von*</H6></label>
    <input name="von" id="date1" class="date-pick"></th>
    <th><label><H6>Veranstaltung bis*</H6></label>
    <input name="bis" id="date2" class="date-pick"></th>
</tr>
<tr align="left">
    <th><label><H6>Bodenbeschaffenheit</H6></label>
    <input type="checkbox" name="boden1" value="Teer"> <H4>Teer</H4><br>
    <input type="checkbox" name="boden1" value="Pflaster"> <H4>Pflaster</H4><br>
    <input type="checkbox" name="boden1" value="Rasen"> <H4>Rasen</H4><br>
    <input type="checkbox" name="boden1" value="Kies"> <H4>Kies</H4><br>
    <input type="checkbox" name="boden1" value="eben"> <H4>ebene Fläche</H4><br>
    <input type="checkbox" name="boden1" value="hugel"> <H4>hugelige Fläche</H4><br>
    <input type="checkbox" name="boden1" value="sonstige"> <H4>sonstige</H4></th>
    <th><label><H6>Zubehör</H6></label>
    <input type="checkbox" name="boden1" value="Boden"> <H4>Boden</H4><br>
    <input type="checkbox" name="boden1" value="Deko"> <H4>Dekoration</H4><br>
    <input type="checkbox" name="boden1" value="Beleuchtung"> <H4>Beleuchtung</H4><br>
    <input type="checkbox" name="boden1" value="Moebel"> <H4>Möbel</H4><br>
    <input type="checkbox" name="boden1" value="Technik"> <H4>Technik</H4><br>
    <input type="checkbox" name="boden1" value="sonstige"> <H4>sonstiges</H4><br>
    <input type="checkbox" name="boden1" value="Bestuhlung"> <H4>Bestuhlung</H4><br>
</tr>
<tr align="left">
<th>
    <label><H6>Ihre Nachricht an uns*</H6></label>
      <textarea name="nachricht" cols="30" rows="3"></textarea></th>
<th>
</th>
</tr>
<tr align="left">
<th>
      <input type="submit" class="button" name="senden" value="senden"></form></th>
<th>
</th>
</tr>
</table>

Der CSS Teil dazu:
HTML: 
/* Anfrage form */
#anfrage-form input {margin:0;font-size:13px; border-radius:3px; border:1px solid #e0e0e0; border-right:1px solid #fbfbfc; border-bottom:1px solid #fbfbfc; color:#696969; padding:5px 16px;outline:none; position:relative; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;background:#fff;}

#anfrage-form label {display:block; padding-bottom:0px; overflow:hidden;}   

#anfrage-form span{ display:block; margin: 0px 0 0 0px;}

#anfrage-form .button{font-size: 18px; line-height: 33px; color:#757575; width:130px; padding:0 0px 1px 0px; display:inline-block; margin: 20px 0 0 0; background:#1f1f1f; color:#fff;}
#anfrage-form .button:hover{ background:#fe7f00; color:#fff;}

Danke schon mal...
 

Anhänge

  • formular.jpg
    formular.jpg
    57,4 KB · Aufrufe: 8
Werbung:
Werbung:
Danke schon mal für die Tipps:

Ich habs jetzt auch soweit hinbekommen was ja nicht all zu schwer ist ohne Tabelle nur ein Problem hab ich noch und zwar das nicht alles untereinander stehen soll, sondern das ganze zweispaltig aufgebaut ist.

Wie realisier ich das in CSS oder ist dies nur über <div>'s möglich?

Quellcode momentan:

HTML: 
<form id="anfrage-form" method="post" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
<label><H6>Name/Firma/Verein*</H6></label>
<input type="text" size="30" name="name" value="">
<label><H6>Veranstaltungsort*</H6></label>
<input type="text" size="30" name="vort" value="">
<input type="submit" class="button" name="senden" value="senden"></form>


CSS:
/* Anfrage form */

#anfrage-form form {width: 700px;}

#anfrage-form input {margin:0;font-size:13px; border-radius:3px; border:1px solid #e0e0e0; border-right:1px solid #fbfbfc; border-bottom:1px solid #fbfbfc; color:#696969; padding:5px 16px;outline:none; position:relative; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;background:#fff;}

#anfrage-form label {display:block; clear:both; padding-bottom:0px; overflow:hidden;}  

#anfrage-form span {display:block; margin: 0px 0 0 0px;}

#anfrage-form .button{font-size: 18px; line-height: 33px; color:#757575; width:130px; padding:0 0px 1px 0px; display:inline-block; margin: 20px 0 0 0; background:#1f1f1f; color:#fff;}
#anfrage-form .button:hover{ background:#fe7f00; color:#fff;}
 
Was genau soll nebeneinander stehen? Die Beschriftung + Feld oder die Felder inkl. Beschriftung jeweils nebeneinander?

Lösen lässt sich das in jedem Fall per CSS mittels float oder display: inline-block. Mit der Wahl der HTML-Elemente hat das nichts zu tun, die dienen nur zur Strukturierung.
 
Felder inkl. Beschriftung jeweils nebeneinander.

Wo muss ich das float, bzw. display: inline-block einfügen, beim span oder label oder ganz wo anders?
 
Werbung:
Hallo.

Duhast da noch einen Fehler.
Das H6 hat in deinem label nichts zu suchen. Label darf nur Inline Elemente enthalten keine Block Elemente.

Gruss
Elroy
 
Danke für den Tipp Elroy.

Hab das ganze jetzt mal überarbeitet aber nur mit mäßigen Erfolg.

Die linke div-class passt aber die rechte div-class nimmt die Style Eigenschaften nicht an.

Was mach ich falsch bzw. wo muss ich noch was ändern, damit es passt?

Hab extra mal die DIV's eingefärbt damit man die unterschiedlichen erkennt.

Danke

Quellcode:
HTML: 
<div id="inhaltanfrage">
<H1>Online Anfrage</H1>

<div id="test">
<div class="links">
<form id="anfrage-form" method="post" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
<label class="textlabel">Name/Firma/Verein*</label>
<input type="text" size="30" name="name" value="">
</div>
<div class="rechts">
<label class="textlabel">Veranstaltungsort*</label>
<input type="text" size="30" name="vort" value="">
</form>
</div>

</div>
</div>

HTML: 
#anfrage-form input, textarea {margin:0;font-size:13px; border-radius:3px; border:1px solid #e0e0e0; border-right:1px solid #fbfbfc; border-bottom:1px solid #fbfbfc; color:#696969; padding:5px 16px;outline:none; position:relative; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;background:#fff;}

#anfrage-form label {float:left; display:inline-block; padding-bottom:0px; overflow:hidden;}   

#anfrage-form .textlabel  {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    text-align: left;
    margin-top: 10px;
    margin-left: 10px;
    color: #003;
    display: inline;
    font-weight: bold;
}

#anfrage-form span {float: left; display:inline-block; margin: 0px 0 0 0px;}

#anfrage-form .button{font-size: 18px; line-height: 33px; color:#757575; width:130px; padding:0 0px 1px 0px; display:inline-block; margin: 20px 0 0 0; background:#1f1f1f; color:#fff;}
#anfrage-form .button:hover{ background:#fe7f00; color:#fff;}

#test {width:500px;
margin-left:auto;
margin-right:auto;
}

.links {width: 200px;
float:left;
background-color:#3300FF;
}

.rechts {width: 200px;
float:right;
background-color:#33CCCC;
}
 

Anhänge

  • asdf.JPG
    asdf.JPG
    19 KB · Aufrufe: 7
Hallo.

Schau dir die Reihenfolge deiner div Elemete noch einmal an.
Div links wird ausserhalb von <form> geöffnet und innerhalb von <form> geschlossen.
Beim div rechts ist es gerade anders herum.

Gruss
Elroy
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben