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>