nicht angemeldet
zweispaltiges Formular
0 0 0 0 0 0 0 
Gunnar Bittersmann
0
0 Gunnar Bittersmann
zweispaltiges Formular
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>
-
- 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
-
- 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;}-
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>-
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>-
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
-
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?-
@@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/oderinput {display: block}.Live long and prosper,
Gunnar--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.-
'br' ist in den seltensten Fällen angebracht.
label {display: block}und/oderinput {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>-
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>-
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>
-
-
@@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.-
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?
-
-
-
-
-
-
-
-
@@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.