Sympatisant: Formular mit Divs statt Tabellen

Beitrag lesen

SELF-Forum

Formular mit Divs statt Tabellen

Sympatisant
– Informationen zu den Bewertungsregeln

Hallo Basti,

ich habe mich jetzt an den Ergebnissen unserer Postings orientiert
und folgendes umgesetzt:

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


  
.form_container input { width:160px; }  
.form_container select { width:164px; }  
.form_container textarea { width:300px; height:150px; }  
.form_container .form_checkbox  { height:16px; width:22px; margin-left:-4px; }  
.form_container p { padding:0px; margin:2px 0px 2px 0px; }  
.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; }  
.button_save { font-weight:bold; width:160px; background-color:white; border:1px solid red; margin:5px 0px 0px 160px; }  
.form_container label { height:15px; margin:0pt 10px 0pt 0pt; padding:0pt; text-align:left; width:150px; white-space:nowrap; float:left; }  


  
</style>  
</head>  
<body>  
  
<div class="form_container">  
 <h1> Pers&ouml;nliche Daten </h1>  
  <p>  
    <label>Vorname</label>  
    <select><option>eins</option><option>zwei</option></select>  
  
    <!-- Auf diese explizite Angabe moechte ich gerne verzichten -->  
    <label style="float:none;">Vorname2</label>  
    <select><option>eins</option><option>zwei</option></select>  
  </p>  
  <p><label>Nachname</label> <input /></p>  
  <p><label>Straße</label> <input type="checkbox" class="form_checkbox"></p>  
  <p><em>Dies ist ein Beschreibungstext Lorem Ipsu Dolerem Ipsu Lorem PibumLorem Ipsu Dolerem Ipsu Lorem Pibum</em></p>  
  <p><label>PLZ</label> <input /> <strong>Dieses Feld darf nur Ziffern beinhalten</strong></p>  
  <p><label>Bemerkung</label> <textarea/></textarea></p>  
  <p><input type="submit" class="button_save"></p>  
</div>  
  
</body>  
</html>

Nun habe ich jedoch Probleme, wenn ich zwei Formularelemente nebeneinander
aufreihen moechte. Die Stelle habe ich in dem Code oben mit einem Kommentar
versehen. Gibt es da eine einfache Moeglichkeit dass mittels CSS zu realisieren,
ohne dabei die Styles direkt angeben zu muessen?

Nochmal besten Dank.

MfG,
Sympatisant

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