Tina: zweispaltiges Formular

Beitrag lesen

SELF-Forum

zweispaltiges Formular

Tina
– Informationen zu den Bewertungsregeln

Ich weiss nicht, ob ich das Problem gut beschrieben habe.
ICh will, dass die Labletext umbrochen werden, wenn der Platz noch ausreicht, um die zwei Spalten nebeneinander zu zeigen.
Als Beispiel habe ich es als Tabelle gemacht.

<!DOCTYPE html  
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
<head>  
<title>TEST</title>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
<style type="text/css">  
form { width: 100%;  m_in-width: 300px; background-color:silver;}  
fieldset { float: left; border: none; margin: 10px; w_idth:50%;}  
  fieldset.spalte1 { min-width:200px; padding-right:10px; border-right:1px solid black; }  
  fieldset.spalte2 { min-width:200px;}  
  fieldset label {display: block;}  
  fieldset img {display: block;}  
  fieldset input {display: block;}  
form .ff { clear:both; margin: 10px; }  
  
table label {display: block;}  
table img {display: block;}  
table input {display: block;}  
td {vertical-align:top;}  
td.links { border-right:1px solid black; vertical-align:top;}  
</style>  
</head>  
<body>  
<form action='#'>  
<fieldset class="spalte1">  
    <label for="f1">F1 lange Beschriftung lange Beschriftung lange Beschriftung lange Beschriftung lange Beschriftung lange Beschriftung :</label>  
    <input type="text" id="f1" name="f1" size="50"/>  
</fieldset>  
  
<fieldset class="spalte2">  
    <label for='bild'>Bild trallala trallala trallala trallala trallala trallala trallala trallala trallala trallala trallala trallala trallala trallala trallala tralla:</label>  
    <input name="bild" id='bild' type="file" size="50" maxlength="100000" accept="text/*"/>  
    <img src='/images/nologo.gif' alt='alt'/>  
    <label for="f11">F11:</label>  
    <input type="text" id="f11" name="f11" size="40" />  
</fieldset>  
  
<div class="ff">  
  <hr/>  
  So sollen sich die Lables verhalten (wenn beide Spalten nebeneinander passen)  
  <table>  
    <tr>  
      <td class='links'>  
        <label for="f1">F1 lange Beschriftung lange Beschriftung lange Beschriftung lange Beschriftung lange Beschriftung lange Beschriftung :</label>  
        <input type="text" id="f1" name="f1" size="50"/>  
      </td>  
      <td>  
        <label for='bild'>Bild trallala trallala trallala trallala trallala trallala trallala trallala trallala trallala trallala trallala trallala trallala trallala tralla:</label>  
        <input name="bild" id='bild' type="file" size="50" maxlength="100000" accept="text/*"/>  
        <img src='/images/nologo.gif' alt='alt'/>  
        <label for="f11">F11:</label>  
        <input type="text" id="f11" name="f11" size="40" />  
      </td>  
    </tr>  
  </table>  
</div>  
</form>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln