Probleme beim ausrichten von Formular

Moritzilie · 17.10.2013

Hallo,

ich bin totaler Anfänger und verzweifle an der Ausrichtung des Formulars.

Ich möchte diese Vorlage nachbauen und bekomme die Ausrichtung nicht hin.

Kann mir vielleicht bitte jemand helfen?

MfG

HTML:

<form id="kontakformular" action="http://www.formular-chef.de/fc.cgi" method="post">
  	<input type="hidden" name="empfaenger" value="michael-burwitzX§Xgmx.de">    
    <h1>Ihre Pizzagr&ouml;&szlig;e:</h1>
    <div>
    	<input name="pizzagroesse" type="radio" value="klein">
		<label for="klein">klein</label>
        <label class="angaben">(20cm)</label>
        <label class="angaben">5 Euro</label>
   	</div>
    <div>
    	<input name="pizzagroesse" type="radio" value="mittel">
		<label for="mittel">mittel</label>
        <label class="angaben">(30cm)</label>
        <label class="angaben">7 Euro</label>
   	</div>
    <div>
    	<input name="pizzagroesse" type="radio" value="gross">
		<label for="gross">gro&szlig;</label>
       	<label class="angaben">(40cm)</label>
        <label class="angaben">10 Euro</label>
   	</div>
    <div>
    	<input name="pizzagroesse" type="radio" value="jumbo">
		<label for="jumbo">jumbo</label>
        <label class="angaben">(100cm)</label>
        <label class="angaben">20 Euro</label>
   	</div>
    <h1>Ihre Wunschsauce:</h1>
	<div>
    	<input name="wunschsauce" type="radio" value="ketchup">
		<label for="ketchup">Ketchup</label>
   	</div>
    <div>
    	<input name="wunschsauce" type="radio" value="kraeuter">
		<label for="kraeuter">Kr&auml;uter</label>
   	</div>
    <div>
    	<input name="wunschsauce" type="radio" value="schokolade">
		<label for="schokolade">Schokolade</label>
   	</div>
    <div>
    	<input name="wunschsauce" type="radio" value="knoblauch">
		<label for="knoblauch">Knoblauch</label>
   	</div>
    <h1>Ihr Wunschbelag:</h1>
	<div>
    	<label for="auswahl_1">Auswahl 1</label>
    	<select name="Auswahl">
        	<option value=""selected="selected">keine Auswahl</option>
        	<option value="nix">Nix</option>
            <option value="salami">Salami</option>
            <option value="kaviar">Kaviar</option>
            <option value="hackfleisch">Hackfleisch</option>
            <option value="thunfisch">Thunfisch</option>
            <option value="hai">Hai</option>
            <option value="blutwurst">Blutwurst</option>
       	</select>
   	</div>
    <div>
    	<label for="auswahl_2">Auswahl 2</label>
    	<select name="Auswahl">
        	<option value=""selected="selected">keine Auswahl</option>
        	<option value="nix">Nix</option>
            <option value="gruenkern">Gr&uuml;nkern</option>
            <option value="spinat">Spinat</option>
            <option value="salat">Salat</option>
       	</select>
  	</div>
    <div>
    	<label for="auswahl_3">Auswahl 3</label>
    	<select name="Auswahl">
        	<option value=""selected="selected">keine Auswahl</option>
        	<option value="nix">Nix</option>
            <option value="gold">Gold</option>
            <option value="viel kaese">Viel K&auml;se</option>
       	</select>
   	</div>
    <h1>Ihr Wunschgetr&auml;nk:</h1>
	<div>
    	<label for="auswahl_getraenk">Bitte Ausw&auml;hlen</label>
    	<select name="Auswahl">
        	<option value=""selected="selected">keine Auswahl</option>
        	<option value="nix">Nix</option>
            <option value="cola">Cola</option>
            <option value="sekt">Sekt</option>
       	</select>
   	</div>
    <h1>Ihre Lieferadresse:</h1>
    <div class="adresse">
    	<label for="name">Ihr Name:</label>
    	<input type="text" id="name" placeholder="Vor- und Nachname" autocomplete="on" required>
   	</div>
    <div class="adresse">
    	<label for="tel">Ihr Telefonnummer:</label>
    	<input type="tel" id="tel" placeholder="+49 (0) 123 / 45 67 89 10">     
   	</div>
    <div class="adresse">
    	<label for="name">Ihr Wohnort:</label>
    	<input type="text" id="name" placeholder="Wohnort?">     
   	</div>
     <div class="adresse">
    	<label for="email">Ihre E-Mailadresse:</label>
    	<input type="email" id="email" placeholder="max-mustermann@gmx.de">     
   	</div>
    <input type="submit">
    <input type="reset" value="Abbrechen">
	
    
    
    
    </form>

Code:

@charset "utf-8";
/* CSS Document */

.angaben {
	margin-left:250px;
}

select {
	margin-left: 300px;	
}

input#name,
input#tel,
input#email {
	width: 200px;
	margin-left: 50px;
}

.adresse {
	display: block;
}

.adresse>label {
	display: block;
	width: 120px;
	float: left;
}

.adresse>input {
	float: left;
	margin-bottom: 10px;
	width: 166px;	
}

.adresse label:nth-child(n+1){
	clear: both;
}

Raphale · 17.10.2013

AW: Probleme beim ausrichten von Formular

So ? (schnell... hingeklatscht keineswegs optimal !!)

Ist aber keineswegs für irgendetwas optimiert...und lässt sich natürlich optisch 1000 mal besser machen.. is ja dein Ding

CSS lernen macht auf jeden Spaß !!

solltest du mal tun

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<style>
@charset "utf-8";
/* CSS Document */
#formular_container {margin:0;position:relative;width:80%;left:10%;}
#formular_container form {width:100%;}
.angaben_spalte_1 {
    position: absolute;
    left: 300px;
}
.angaben_spalte_2 {
    position: absolute;
    left: 600px;
}
.angaben_spalte_1_select {
    position:relative;
    width:205px;
    left:250px;
}
.angaben_spalte_1_select select {width:205px;top:10px;}
.auswahl_getraenke {}
input#name,
input#tel,
input#email {
    width: 200px;
    margin-left: 50px;
}

.adresse {
    display: block;
}

.adresse>label {
    display: block;
    width: 200px;
    float: left;
}

.adresse>input {
    float: left;
    margin-bottom: 10px;
    width: 200x;    
}

.adresse label:nth-child(n+1){
    clear: both;
}
.absenden {display:block;clear:both;top:20px;position:relative;}
</style>
</head>

<body>
<div id="formular_container">
<form id="kontakformular" action="http://www.formular-chef.de/fc.cgi" method="post">
      <input type="hidden" name="empfaenger" value="michael-burwitzX§Xgmx.de">    
    <h1>Ihre Pizzagr&ouml;&szlig;e:</h1>
    <div>
        <input name="pizzagroesse" type="radio" value="klein">
        <label for="klein" >klein</label>
        <label class="angaben_spalte_1">(20cm)</label>
        <label class="angaben_spalte_2">5 Euro</label>
       </div>
    <div>
        <input name="pizzagroesse" type="radio" value="mittel">
        <label for="mittel">mittel</label>
        <label class="angaben_spalte_1">(30cm)</label>
        <label class="angaben_spalte_2">7 Euro</label>
       </div>
    <div>
        <input name="pizzagroesse" type="radio" value="gross">
        <label for="gross">gro&szlig;</label>
           <label class="angaben_spalte_1">(40cm)</label>
        <label class="angaben_spalte_2">10 Euro</label>
       </div>
    <div>
        <input name="pizzagroesse" type="radio" value="jumbo">
        <label for="jumbo">jumbo</label>
        <label class="angaben_spalte_1">(100cm)</label>
        <label class="angaben_spalte_2">20 Euro</label>
       </div>
    <h1>Ihre Wunschsauce:</h1>
    <div>
        <input name="wunschsauce" type="radio" value="ketchup">
        <label for="ketchup">Ketchup</label>
       </div>
    <div>
        <input name="wunschsauce" type="radio" value="kraeuter">
        <label for="kraeuter">Kr&auml;uter</label>
       </div>
    <div>
        <input name="wunschsauce" type="radio" value="schokolade">
        <label for="schokolade">Schokolade</label>
       </div>
    <div>
        <input name="wunschsauce" type="radio" value="knoblauch">
        <label for="knoblauch">Knoblauch</label>
       </div>
    <h1>Ihr Wunschbelag:</h1>
    <div>
        <label for="auswahl_1">Auswahl 1</label>
        <div class="angaben_spalte_1_select">
        <select name="Auswahl">
            <option value=""selected="selected">keine Auswahl</option>
            <option value="nix">Nix</option>
            <option value="salami">Salami</option>
            <option value="kaviar">Kaviar</option>
            <option value="hackfleisch">Hackfleisch</option>
            <option value="thunfisch">Thunfisch</option>
            <option value="hai">Hai</option>
            <option value="blutwurst">Blutwurst</option>
           </select></div>
       </div>
    <div>
        <label for="auswahl_2">Auswahl 2</label>
        <div class="angaben_spalte_1_select">
        <select name="Auswahl">
            <option value=""selected="selected">keine Auswahl</option>
            <option value="nix">Nix</option>
            <option value="gruenkern">Gr&uuml;nkern</option>
            <option value="spinat">Spinat</option>
            <option value="salat">Salat</option>
           </select>
        </div>
      </div>
    <div>
        <label for="auswahl_3">Auswahl 3</label>
        <div class="angaben_spalte_1_select">
        <select name="Auswahl">
            <option value=""selected="selected">keine Auswahl</option>
            <option value="nix">Nix</option>
            <option value="gold">Gold</option>
            <option value="viel kaese">Viel K&auml;se</option>
           </select>
        </div>
       </div>
    <h1>Ihr Wunschgetr&auml;nk:</h1>
    <div>
        <label for="auswahl_getraenk">Bitte Ausw&auml;hlen</label>
        <div class="angaben_spalte_1_select">
        <select name="Auswahl" class="auswahl_getraenke">
            <option value=""selected="selected">keine Auswahl</option>
            <option value="nix">Nix</option>
            <option value="cola">Cola</option>
            <option value="sekt">Sekt</option>
           </select>
        </div>
       </div>
    <h1>Ihre Lieferadresse:</h1>
    <div class="adresse">
        <label for="name">Ihr Name:</label>
        <input type="text" id="name" placeholder="Vor- und Nachname" autocomplete="on" required>
       </div>
    <div class="adresse">
        <label for="tel">Ihr Telefonnummer:</label>
        <input type="tel" id="tel" placeholder="+49 (0) 123 / 45 67 89 10">     
       </div>
    <div class="adresse">
        <label for="name">Ihr Wohnort:</label>
        <input type="text" id="name" placeholder="Wohnort?">     
       </div>
     <div class="adresse">
        <label for="email">Ihre E-Mailadresse:</label>
        <input type="email" id="email" placeholder="max-mustermann@gmx.de">     
       </div>
    <div class="absenden">
        <input type="submit">
        <input type="reset" value="Abbrechen">
    </div>
    
    
    
    
    </form>
</div>
</body>
</html>

Edit:Zum HTML Code zusammengefasst

Moritzilie · 18.10.2013

AW: Probleme beim ausrichten von Formular

Moin,

ich danke Euch für die schnelle Hilfe.

Aber warum ist das select Menü jetzt eine Zeile tiefer? Finde den Fehler nicht.

MfG

Raphale · 18.10.2013

AW: Probleme beim ausrichten von Formular

Sry...diese Stelle hier ohne "" ändern:

".angaben_spalte_1_select select {width:205px;position:relative;top:-20px;} "

nochmal als ?:

Moritzilie · 18.10.2013

AW: Probleme beim ausrichten von Formular

Suuupi, danke!

MfG

Myhar · 18.10.2013

AW: Probleme beim ausrichten von Formular

Ein weiterer Hinweis für Anfänger: Stelle sicher, dass deine label auch immer einem Textfeld (oder select, etc.) zugeordnet sind. Bzw. jedes Textfeld sollte immer ein Label haben. Das ist kein wirklicher Aufwand und erhöht die Benutzerfreundlichkeit enorm.

cebito · 18.10.2013

AW: Probleme beim ausrichten von Formular

Raphale schrieb:
CSS lernen macht auf jeden Spaß !!

Stimmt, dann muss man auch nicht wild positionieren und alles bleibt schön im Dokumentfluss. Und ein bissl semantischer und funktioneller gehts auch, bspw. wenn man die labels wirklich auf die radiobuttons bezieht, lassen sich diese auch per Klick aufs Label anwählen.

Hab das mal ein bissl optimiert... http://jsfiddle.net/f7pDa/

Raphale · 18.10.2013

AW: Probleme beim ausrichten von Formular

cebito schrieb:
Hab das mal ein bissl optimiert... http://jsfiddle.net/f7pDa/

Starke Aktion

das ist aber sehr freundlich von Cebito :daumenhoch

:

:

Schade das es kein like button gibt..darum so:

Respekt !