Anton: Formular ohne Tabellen formatieren

Hallo,

ich habe eine Frage zu diesem Quelltext:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">  
  
<head>  
	<title>Test</title>  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
	<style type="text/css">  
		*{  
			padding: 0px;  
			margin: 0px;  
		}  
  
		body {  
			width: 1000px;	  
			margin: 0px auto;  
		}  
  
		#header {	  
			height: 150px;  
			background: blue;  
		}  
  
		#content {  
			float: right;  
			width: 700px;  
			background: green;  
		}  
  
		#navigation {  
			float: left;  
			width: 300px;  
			background: orange;  
		}  
  
		#footer {  
			clear: both;  
			width: 1000px;  
			background: yellow  
		}  
		  
		form label {  
			float: left;  
			width: 200px; 	  
		}  
	</style>  
</head>	  
	  
<body>  
	<h1 id="header">Titel der Seite</h1>  
	  
	<div id="content">  
		<form>  
			<p><label>Vorname*:</label><input type="text"</p>  
			<p><label>Nachname*:</label><input type="text"</p>  
			<p><label>Firma:</label><input type="text"</p>  
			<p><label>Straße + Hausnummer:</label><input type="text"</p>  
			<p><label>PLZ + Ort:</label><input type="text" name="location"</p>  
			<p><label>Telefon:</label><input type="text" name="phone"</p>  
			<p><label>E-Mail*:</label><input type="text" name="email"</p>  
			<p><label>Anfrage*:</label><textarea></textarea></p>  
			<p>  
				<input type="reset" value="löschen"/>  
				<input type="submit" value="absenden"/>  
			</p>  
		</form>  
	</div>  
	  
	<ul id="navigation">  
		<li><a href="#">Startseite</a></li>  
		<li><a href="#">Link2</a></li>  
		<li><a href="#">Link3</a></li>  
	</ul>  
	  
	<address id="footer">&copy; Copyright...</address>  
</body>	  
</html>  

Dem Label "Anfrage" vor dem Textarea habe ich eine feste Breite von 200 Pixeln zugewiesen. Dem Textarea selbst würde ich gerne den restlichen verfügbaren Platz innerhalb des übergeordneten Content-DIV-Containers zuordnen. Unterhalb des Textareas sollen sich die beiden Buttons "löschen" und "absenden" befinden. In der Summe sollen die beiden Buttons genauso breit wie das Textarea selbst sein. Demnach soll jeder der beiden Buttons halb so breit wie das Textarea sein.

Wie könnte man dies am besten mit CSS umsetzen?

  1. Mahlzeit Anton,

      	<p><label>Vorname\*:</label><input type="text"</p>  
    

    Entweder Du verpasst Deinen Formularelementen eine ID und dem zugehörigen Label ein entsprechendes "http://de.selfhtml.org/formulare/strukturieren.htm#label@title=for" oder Du notierst das Formularelement innerhalb des entsprechenden Labels - ansonsten sind die Labels sinnfrei, da nicht klar ersichtlich ist, welches Label zu welchem Formularelement gehört.

    MfG,
    EKKi

    --
    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
    1. [latex]Mae  govannen![/latex]

      Entweder Du verpasst Deinen Formularelementen eine ID und dem zugehörigen Label ein entsprechendes "http://de.selfhtml.org/formulare/strukturieren.htm#label@title=for" oder Du notierst das Formularelement innerhalb des entsprechenden Labels

      Möglichst kein „oder“. Das for-Attribut sollte in _beiden_ Fällen genutzt werden, um auch im IE <=6 das Eingabefeld über Klick des Label-Textes zu aktivieren. Die IEs sind nämlich sehr eigenwillig (überrascht das jemanden?).

      Cü,

      Kai

      --
      „It's 106 miles to Chicago, we got a full tank of gas, half a pack of cigarettes, it's dark, and we're wearing sunglasses“.
      „Hit it!“
      Selfzeugs
      SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
  2. width: 100px wäre ein Ansatz, oder? Meinen Berechnungen zufolge entspricht das der Hälfte von 200px :D

    1. width: 100px wäre ein Ansatz, oder? Meinen Berechnungen zufolge entspricht das der Hälfte von 200px :D

      Warum dann nicht gleich 50%?

  3. Vorname*:
    Nachname*:
    Firma:
    Straße + Hausnummer:
    PLZ + Ort:
    Telefon:
    E-Mail*:
    Anfrage*:

    Ich weiss ja nicht, was das Formular genau für einen zweck erfüllt.
    Ich transformiere es kurz in ein telefongespräch:

    "Ring Ring..... Hallo
    ....Hallo...
    Vorname,Name,
    äh ja Walter Schmidt
    ... Firma
    hmm umm ja Arbeitsamt, Ich wollte mal fragen, bin ich da richtig...
    Strasse...,
    Ja  aber das brauchen sie doch . Also ich wollte...
    Nummer:
    Na gut: Holzweg 18.
    Telefon...
    Sehen Sie das nicht also 45878354307... Sie mit wem sprech' ich eigentlich
    E-mail
    Also... also Sie können mich mal.
    "

    Die Frage ist: Wie begegnen wir Menschen, die etwas von uns brauchen.
    Solche Formulare wie das obige sehen schlicht nach Datensammelwut aus.

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    1. Die Frage ist: Wie begegnen wir Menschen, die etwas von uns brauchen.
      Solche Formulare wie das obige sehen schlicht nach Datensammelwut aus.

      Was gehört denn deiner Ansicht nach in ein anständiges Formular?

      1. Die Frage ist: Wie begegnen wir Menschen, die etwas von uns brauchen.
        Solche Formulare wie das obige sehen schlicht nach Datensammelwut aus.
        Was gehört denn deiner Ansicht nach in ein anständiges Formular?

        Das ist keine einfache Frage.
        Aber ich kann dir zeigen, was ich praktisch gemacht habe für den Formmailer.
        Der Formmailer ist eine Kontaktmöglichkeit jenseits des mailprogramms,
        Warum alsoe eine email Adresse voraussetzen?

        Mein Formmailer hat insgesamt 5 Felder:

        1.
        Name* und Vorname*

        2.
        Eine* oder mehrere Kontaktmöglichkeiten, geeignet sind in absteigender Folge: Email, Post-Adresse, Telefon, Hompage

        3.
        Titel* der Nachricht

        4.
        Text der Nachricht

        5. Auswahlbox Dringlichkeit

        Die Überlegung hierbei ist, dass ein Web-Kontaktformular primär
        auf dem Server zuerst gelesen wird. Aber abhängig von der Dringlichkeit via Mail weiter geleitet wird.
        Es ist im Anliegen des Kontaktsuchenden, eine geeignete Kontaktmöglichkeit aufzuführen. Alles was über dieses geeignet hinausgeht, klingt nach Datensammeleigenschaft.

        Wenn du natürlich ein Formular für einen kleinen Webshop machst, sieht es wieder anders aus.
        Wiederum anders für ein Gästebuch.

        Du kannst den Formmailer übrigens anschauen, indem du dem Link im head folgst und den Kontakt suchst.

        mfg Beat

        --
        Woran ich arbeite:
        X-Torah
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische