Tina: zweispaltiges Formular

SELF-Forum

zweispaltiges Formular

Tina
– Informationen zu den Bewertungsregeln

für ein zweispaltiges Formular habe ich den code unten gebaut, klappt ganz gut.
was ich nicht hinbekomme.

  • Ab einer bestimten Fensterbreite, soll die zweite Spalte unter der ersten kommen (das Label 'bild' bleibt rechts stehen)
  • wenn das Fenster kleiner wird, werden die Label umbrochen.
    Kann man hinbekommen, dass die inputfelder dann kleiner werden?
<!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 .spalte1 { float:left; margin: 10px; padding-right:10px; border-right:1px solid black; width:60%; max-width:540px;}  
form .spalte2 { margin: 10px;}  
form .formfooter { clear:both; margin: 10px; }  
</style>  
</head>  
<body>  
<form action='#'>  
<div class="spalte1">  
  <label for="f1">F1:</label><br/>  
  <input type="text" id="f1" name="f1" size="50"/><br/>  
  <label for="f2">F2:</label><br/>  
  <input type="text" id="f2" name="f2"  size="10" /><br/>  
  <label for="f3">F3:</label><br/>  
  <textarea name="f3" id ='f3' cols="60" rows="5"></textarea><br/>  
  <label for="f4">F4:</label><br/>  
  <input type="text" id="f4" name="f4" size="40" /><br/>  
  <label for="f5">F5:</label><br/>  
  <input type="text" id="f5" name="f5" size="40" /><br/>  
</div>  
  
<div class="spalte2">  
  <label for='bild'>Bild:</label><br/>  
  <input name="bild" id='bild' type="file" size="50" maxlength="100000" accept="text/*"/><br/>  
  <img src='nologo.gif' alt='alt'/><br/>  
  <label for="f11">F11:</label><br/>  
  <input type="text" id="f11" name="f11" size="40" /><br/>  
  <label for="f12">F12:</label><br/>  
  <input type="text" id="f12" name="f12" size="40" /><br/>  
</div>  
  
<div class="formfooter ">  
  <hr/>  
  <input type="submit" value="absenden" name="ok" />  
</div>  
</form>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. zweispaltiges Formular

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln
    • Ab einer bestimten Fensterbreite, soll die zweite Spalte unter der ersten kommen (das Label 'bild' bleibt rechts stehen)
    • wenn das Fenster kleiner wird, werden die Label umbrochen.
      Kann man hinbekommen, dass die inputfelder dann kleiner werden?

    in beiden fällen: min-width

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. zweispaltiges Formular

      Tina
      – Informationen zu den Bewertungsregeln
      • Ab einer bestimten Fensterbreite, soll die zweite Spalte unter der ersten kommen (das Label 'bild' bleibt rechts stehen)
      • wenn das Fenster kleiner wird, werden die Label umbrochen.
        Kann man hinbekommen, dass die inputfelder dann kleiner werden?

      in beiden fällen: min-width

      irgendwas mache ich da noch was falsch, habe beiden Spalten und der textarea eine min-width gegeben. Beide nicht gewünschten Effekte bleiben bestehen.

      min-width ist doch die minimale Breite, wird das Fensten schmaler, wird abgeschnitten.

      form .spalte1 { float:left; margin: 10px; padding-right:10px; border-right:1px solid black; width:60%; max-width:540px; min-width:300px;}  
form .spalte2 { margin: 10px; min-width:300px;}  
textarea {min-width:300px;}
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. zweispaltiges Formular

        suit Homepage des Autors
        – Informationen zu den Bewertungsregeln

        irgendwas mache ich da noch was falsch, habe beiden Spalten und der textarea eine min-width gegeben. Beide nicht gewünschten Effekte bleiben bestehen.

        kümmere dich vorerst nur um das aussen herum und ingonoriere den rest

        min-width ist doch die minimale Breite, wird das Fensten schmaler, wird abgeschnitten.

        nein, abgeschnitten wird nix - die abschneide-eigenschaft ist overflow bzw clip

        hier mal ohne paddmin/margin/border gerechnet:

        form {  
  width: 100%;  
  min-width: 300px;  
}  
fieldset {  
  float: left;  
  width: 50%;  
  min-width: 300px;  
}

        sobald das form-element eine breite von 600px unterschreitet, können die beiden spalten nicht mehr nebeneinander liegen und rutschen somit untereinander

        das html hierzu sollte etwa so aussehen

        <form>  
  <fieldset>spalte 1</fieldset>  
  <fieldset>spalte 2</fieldset>  
</form>
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. zweispaltiges Formular

          Tina
          – Informationen zu den Bewertungsregeln

          Danke, das funktioniert jetzt soweit.
          Jetzt wird aber der Labeltext von "Bild" nicht mehr umbrochen sondern das zweite fieldset sofort unter das erste geschoben, wenn das label nicht mehr in einer zeile dargestellt werden kann (das ging vorher).

          form { width: 100%;  min-width: 300px; background-color:silver;}  
fieldset { float: left; border: none; }  
  fieldset .spalte1 { margin: 10px; padding-right:10px; border-right:1px solid black; width:60%; min-width:200px; background-color:blue;}  
  fieldset .spalte2 { margin: 10px; min-width:300px; background-color:green;}  
  fieldset label {color:red; min-width:200px;}  
form .formfooter { clear:both; margin: 10px; }  
</style>  
</head>  
<body>  
<form action='#'>  
  
<fieldset class="spalte1">  
  <label for="f1">F1:</label><br/>  
  <input type="text" id="f1" name="f1" size="50"/><br/>  
  <label for="f2">F2:</label><br/>  
  <input type="text" id="f2" name="f2"  size="10" /><br/>  
  <label for="f3">F3:</label><br/>  
  <textarea name="f3" id ='f3' cols="60" rows="5"></textarea><br/>  
  <label for="f4">F4:</label><br/>  
  <input type="text" id="f4" name="f4" size="40" /><br/>  
  <label for="f5">F5:</label><br/>  
  <input type="text" id="f5" name="f5" size="40" /><br/>  
</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><br/>  
  <input name="bild" id='bild' type="file" size="50" maxlength="100000" accept="text/*"/><br/>  
  <img src='nologo.gif' alt='alt'/><br/>  
  <label for="f11">F11:</label><br/>  
  <input type="text" id="f11" name="f11" size="40" /><br/>  
  <label for="f12">F12:</label><br/>  
  <input type="text" id="f12" name="f12" size="40" /><br/>  
</fieldset>
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. zweispaltiges Formular

            suit Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Jetzt wird aber der Labeltext von "Bild" nicht mehr umbrochen sondern das zweite fieldset sofort unter das erste geschoben, wenn das label nicht mehr in einer zeile dargestellt werden kann (das ging vorher).

            versuch deine formularzeilen anstatt mit br's mit zusätzlichen containern zu gruppieren

            <p>  
 <label for="f1">F1:</label>  
  <input type="text" id="f1" name="f1" />  
</p>  
<p>  
 <label for="f2">F2:</label>  
  <input type="text" id="f2" name="f2" />  
</p>

            br ist in solchen fällen meistens eine hürde

            das prinzip bei den sich nebeneinander befindlichen label und input in einem p-element ist das selbe wie bei den beiden fieldsets in dem form-element

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. zweispaltiges Formular

              Tina
              – Informationen zu den Bewertungsregeln

              versuch deine formularzeilen anstatt mit br's mit zusätzlichen containern zu gruppieren

              <p>

              <label for="f1">F1:</label>
                <input type="text" id="f1" name="f1" />
              </p>
              <p>
              <label for="f2">F2:</label>
                <input type="text" id="f2" name="f2" />
              </p>

              
>   
> br ist in solchen fällen meistens eine hürde  
>   
> das prinzip bei den sich nebeneinander befindlichen label und input in einem p-element ist das selbe wie bei den beiden fieldsets in dem form-element  
  
Wenn ich das Label über dem input Element will ist aber ein <br/> hinter dem Label OK oder?
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. zweispaltiges Formular

                Gunnar Bittersmann Homepage des Autors
                – Informationen zu den Bewertungsregeln

                @@Tina:

                Wenn ich das Label über dem input Element will ist aber ein <br/> hinter dem Label OK oder?

                'br' ist in den seltensten Fällen angebracht.

                label {display: block} und/oder input {display: block}.

                Live long and prosper,
                Gunnar

                --
                Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. zweispaltiges Formular

                  Tina
                  – Informationen zu den Bewertungsregeln

                  'br' ist in den seltensten Fällen angebracht.
                  label {display: block} und/oder input {display: block}.

                  habe die br jetz ausgebaut.
                  Das Problem, dass die langen Labels nicht umbrochen werden bleibt aber.
                  HAbt Ihr noch nen Tip?

                  <!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%;  min-width: 300px; background-color:silver;}  
fieldset { float: left; border: none; }  
  fieldset .spalte1 { margin: 10px; padding-right:10px; border-right:1px solid black;min-width:200px; background-color:blue;}  
  fieldset .spalte2 { margin: 10px; min-width:300px; background-color:green;}  
  fieldset label {color:red; min-width:200px; display: block;}  
  fieldset img {display: block;}  
  fieldset img {input: block;}  
form .formfooter { clear:both; margin: 10px; }  
</style>  
</head>  
<body>  
<form action='#'>  
<fieldset class="spalte1">  
  <p>  
    <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"/>  
  </p>  
</fieldset>  
  
<fieldset class="spalte2">  
  <p>  
    <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'/>  
  </p>  
  <p>  
    <label for="f11">F11:</label>  
    <input type="text" id="f11" name="f11" size="40" />  
  </p>  
</fieldset>  
  
<div class="formfooter ">  
  <hr/>  
  <input type="submit" value="absenden" name="ok" />  
</div>  
</form>  
</body>  
</html>
                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. zweispaltiges Formular

                    Tina
                    – Informationen zu den Bewertungsregeln

                    ein paar Sachen korrigiert, das Problem bleibt aber, dass die Labels nicht umbrechen.

                    <!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%;  min-width: 300px; background-color:silver;}  
fieldset { float: left; border: none; }  
  fieldset.spalte1 { margin: 10px; padding-right:10px; border-right:1px solid black; min-width:200px;}  
  fieldset.spalte2 { margin: 10px; min-width:300px;}  
  fieldset label {color:red; min-width:200px; display: block;}  
  fieldset img {display: block;}  
  fieldset input {display: block;}  
form .formfooter { clear:both; margin: 10px; }  
</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="formfooter ">  
  <hr/>  
  <input type="submit" value="absenden" name="ok" />  
</div>  
</form>  
</body>  
</html>
                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                    1. 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

                  2. zweispaltiges Formular

                    Gunnar Bittersmann Homepage des Autors
                    – Informationen zu den Bewertungsregeln

                    @@Tina:

                    Das Problem, dass die langen Labels nicht umbrochen werden bleibt aber.

                    Warum sollten sie auch? Du hast keine Breite für die Labels angegeben, also gilt der Default 'auto'; die Box ist so breit wie möglich. [CSS2 §10.2, §10.3]

                    Live long and prosper,
                    Gunnar

                    --
                    Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.
                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                    1. zweispaltiges Formular

                      Tina
                      – Informationen zu den Bewertungsregeln

                      Warum sollten sie auch? Du hast keine Breite für die Labels angegeben, also gilt der Default 'auto'; die Box ist so breit wie möglich. [CSS2 §10.2, §10.3]

                      Danke.
                      Gar nicht so leicht zu beschreiben was ich will, und dann auch noch in css formulieren :-)

                      Ich will, dass die Labletext umbrochen werden, wenn der Platz noch ausreicht, um die zwei Spalten nebeneinander zu zeigen.
                      Im Grunde so, als ob die beiden fildsets in spalten einer Tabelle wären wie ich´s im letzen Posting geschrieben habe.

                      Geht das ohne Tabelle überhaupt?

                      Beitrag melden
                      –
                      Informationen zu den Bewertungsregeln

  2. zweispaltiges Formular

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Tina:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    BTW, bist du sicher, dass die Sprache richtig angegeben ist?

    Bei F[0-9]+ mag nichts unmöglich sein, aber hier:

    <label for='bild'>Bild:</label><br/>

    Live long and prosper,
    Gunnar

    --
    Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln