Sympatisant: [SOLVED] Mehrspaltiges Formular mittels CSS und ohne Tabellen

Beitrag lesen

SELF-Forum

[SOLVED] Mehrspaltiges Formular mittels CSS und ohne Tabellen

Sympatisant
– Informationen zu den Bewertungsregeln

Hallo,

so, ich habe jetzt eine fuer mich zufriedenstellende Version..
..mit relativ wenig CSS und der Moeglichkeit mehrere Spalten anzuzeigen.

Hier der Code:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
<head>  
 <title>Multicolumn Formular based on CSS</title>  
  
  
<style type="text/css">  


  
/* -- Styles for the Input-Fields */  
.form_container input { width:160px; float:left; margin-right:10px; }  
.form_container select { width:164px; margin-right:10px; }  
.form_container textarea { width:465px; height:150px; margin-right:10px; }  
.form_container .form_checkbox  { height:16px; width:22px; margin-left:-3px; margin-right:155px; }  
.form_container .long_element { width:469px; }  
.form_container .short_element { width:50px; margin-right:120px; }  
  
/* -- Styles for Text */  
.form_container strong { color:red; }  
.form_container em { font-style:normal; }  
.form_container h1 { font-style:bold; background-color:#FFBA10; border:1px solid black; font-size:15px; padding:2px 2px 2px 5px; }  
.form_container label { height:15px; margin:0pt 10px 0pt 0pt; padding:0pt; text-align:left; width:120px; white-space:nowrap; float:left; }  
  
/* -- Styles for Buttons */  
.button_save { font-weight:bold; width:160px; background-color:white; border:1px solid #FFBA10; margin:5px 0px 0px 130px; }  
  
/* -- Container Styles */  
.form_container { border-width:0px; }  
.form_container p { padding:0px; margin:2px 0px 2px 0px; clear:both; }  
.form_container div { clear:both; }  


  
  
</style>  
  
</head>  
  
<body>  
  
  
<fieldset class="form_container">  
 <h1> Pers&ouml;nliche Daten </h1>  
  <p>  
    <label>Vorname</label>  
    <select class="long_element" ><option>eins</option><option>zwei</option></select>  
  </p>  
  
  <p>  
    <label>Hausnummer</label>  
    <input class="short_element"/>  
    <label>Manchmal</label>  
    <input />  
    <!-- auch drei Spalten moeglich  
    <label>Manchmal3</label>  
    <input />  -->  
  </p>  
  
  <p>  
    <label>Nachname</label> <input />  
    <label>Angehoeriger</label> <input />  
  </p>  
  
  <p>  
    <label>Kunde</label>  
    <input type="checkbox" class="form_checkbox">  
    <label>Kundennummer</label>  
    <input class="short_element"/>  
  </p>  
  
  <p>  
    <label>PLZ</label>  
    <input class="short_element" />  
  </p>  
  
  <p>  
    <label>Bemerkung</label>  
    <textarea /></textarea>  
  </p>  
  
  <p>  
    <input type="submit" class="button_save">  
  </p>  
  
</fieldset>  
  
</body>  
</html>

MfG,
Sympatisant

--
"Non dura iubeantur, non prohibeantur inpura."
Beitrag melden
–
Informationen zu den Bewertungsregeln