Kontaktformular anpassen

[Dane]

Hallo Leute

Ich bräuchte mal Hilfe von erfahrenen auf dem Gebiet, denn ich habe hier ein Kontaktformular das ich gerne anpassen würde.

Das Kontaktformular: http://www.linsenschuss.de/seiten/kontakt/

- Ich möchte dass das Formular mittig ist, wie der andere Teil meiner Homepage.

- Der Text über den Felder ist mittig, diesen möchte ich am linken Anschlag haben.

- Kann man den Rahmen um den Button entfernen, so das dieser frei steht?

- Der Text bei den Checkboxen sollte auch links sein.

Meine Homepage ist für mobile Geräte optimiert. Das Formular aber anscheinend nicht in der Form wie bei mir. Wie kann man das einstellen das es flexibel ist?

Der Code den ich in die Seite eingebunden habe sieht so aus:

<style>
.wmfg_layout_0, table, .wmfg_textarea { font-family: Verdana, Geneva, sans-serif; font-size: 13px; }
.wmfg_layout_0 ul.wmfg_questions { list-style-type: none; margin: 0; padding: 0; }
.wmfg_layout_0 ul.wmfg_questions li.wmfg_q { margin: 10px 0; padding: 10px; border: 1px solid #cccccc; }
.wmfg_layout_0 label.wmfg_label { display: block; margin: 0 0 5px 0; }
.wmfg_layout_0 table.wmfg_answers { width: 100%; _width: 97%; border-collapse: collapse; }
.wmfg_layout_0 table.wmfg_answers { vertical-align: top; }
.wmfg_layout_0 table.wmfg_answers td { padding: 2px; vertical-align: top; }
.wmfg_layout_0 table.wmfg_answers td.wmfg_a_td { width: 25px; }

.wmfg_layout_0 .wmfg_text { border: 1px solid #CCC; padding: 4px; font-size: 13px; color: #000000; width: 98.5%;
background-color: #ffffff;
background:-webkit-gradient(linear,0 0,0 100%,from(#f8f8f8),to(#fff));
background:-moz-linear-gradient(top,#f8f8f8,#fff);
}
.wmfg_layout_0 .wmfg_textarea { border: 1px solid #CCC; padding: 4px; font-size: 13px; color: #000000; width: 98.5%;
background:-webkit-gradient(linear,0 0,0 100%,from(#f8f8f8),to(#fff));
background:-moz-linear-gradient(top,#f8f8f8,#fff);
background-color: #ffffff;
}
.wmfg_layout_0 .wmfg_select {
border:1px solid #CCCCCC; padding: 3px; font-size: 13px; color: #000000; margin: 0; width: 100%; _width: 97%;
background-color: #ffffff;
background:-webkit-gradient(linear,0 0,0 100%,from(#f8f8f8),to(#fff));
background:-moz-linear-gradient(top,#f8f8f8,#fff);
}
.wmfg_layout_0 .wmfg_btn {
border: 1px solid #cccccc; cursor: pointer; font-weight: normal; font-size: 13px; padding: 6px; color: #444; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), color-stop(0.5, #FAFAFA), color-stop(0.5, #E5E5E5), to(#F9F9F9));
background: -moz-linear-gradient(top, #FAFAFA, #FAFAFA 50%, #E5E5E5 50%, #F9F9F9);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FAFAFA ', endColorstr='#E5E5E5');
}
.wmfg_layout_0 .wmfg_btn:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), color-stop(0.5, #EDEDED), color-stop(0.5, #D9D9D9), to(#EDEDED));
background: -moz-linear-gradient(top, #EDEDED, #EDEDED 50%, #D9D9D9 50%, #EDEDED);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#E3326E ', endColorstr='#D9D9D9');
</style>

<div style="width:500px" class="wmfg_layout_0">

<form method="post" action="">

<ul class="wmfg_questions">

<li class="wmfg_q">
<label class="wmfg_label">Anrede</label>
<table class="wmfg_answers">
<tr class="wmfg_a">
<td class="wmfg_a_td"><input type="radio" class="wmfg_radio" name="anrede" value="herr" checked="checked" /></td>
<td><label class="wmfg_label_a" for="anrede_herr">Herr</label></td>
</tr>
<tr class="wmfg_a">
<td class="wmfg_a_td"><input type="radio" class="wmfg_radio" name="anrede" value="frau" /></td>
<td><label class="wmfg_label_a" for="anrede_frau">Frau</label></td>
</tr>
</table>
</li>

<li class="wmfg_q">
<label class="wmfg_label" for="vorname">Vorname</label>
<input type="text" class="wmfg_text" name="vorname" id="vorname" value="" />
</li>

<li class="wmfg_q">
<label class="wmfg_label" for="nachname">Nachname</label>
<input type="text" class="wmfg_text" name="nachname" id="nachname" value="" />
</li>

<li class="wmfg_q">
<label class="wmfg_label" for="email">Email</label>
<input type="text" class="wmfg_text" name="email" id="email" value="" />
</li>

<li class="wmfg_q">
<label class="wmfg_label" for="betreff">Betreff</label>
<input type="text" class="wmfg_text" name="betreff" id="betreff" value="" />
</li>

<li class="wmfg_q">
<label class="wmfg_label" for="mitteilung">Mitteilung</label>
<textarea class="wmfg_textarea" name="mitteilung" id="mitteilung" style="height:80px"></textarea>
</li>

<li class="wmfg_q">
<input type="submit" class="wmfg_btn" name="senden" id="senden" value="Senden" />
</li>

</ul>

</form>

</div>

Danke im Voraus für jeden Tipp!

[seba86]

Auch wenn ich vlt. eine Verwarnung kassiere, sollte es trotzdem mal angesprochen sein:

Wie stellst du dir die Lösung eine verhältnismäßig recht komplexe Aufgabenstellung vor?? Ein Blick in deine alten Threads bestätigt den Verdacht:

Ausschließlich, einseitige Konzentration auf eigene Probleme, da NUR Antworten in selbst erstellten Threads. Über Jahre hinweg.

Auf Anfragen von Typen wie dich sollte man erst gar nicht reagieren, denn hier wird man nur ausgenutzt! Das Geben/Nehmen stimmt nicht mehr!

[RattuS]

Wie stellst du dir die Lösung eine verhältnismäßig recht komplexe Aufgabenstellung vor?? [...] Auf Anfragen von Typen wie dich sollte man erst gar nicht reagieren, denn hier wird man nur ausgenutzt!
Bei Kleinigkeiten wie ein paar Zeilen CSS sehe ich da kein Problem. Ich helfe gerne. (Nebenbei angemerkt, hat der Bereich Programmierung/Web-Design im 3DC in den letzten Jahren leider auch sehr stark abgenommen. Ich bin regelrecht froh, wenn hier mal wieder jemand einen Beitrag erstellt.) Das gesamte Dokument für MediaQuery/Responsive Design zu analysieren (siehe zweiter Teil des Startbeitrages) hingegegen wäre mir jetzt auch zu viel (unbezahlte) Arbeit.


Hier hast du, Dane:
- Ich möchte dass das Formular mittig ist, wie der andere Teil meiner Homepage.
.wmfg_layout_0 {
margin: 0px auto;
}

- Der Text über den Felder ist mittig, diesen möchte ich am linken Anschlag haben.
.wmfg_q .wmfg_label {
text-align: left;
}

- Kann man den Rahmen um den Button entfernen, so das dieser frei steht?
<li class="wmfg_q" style="border: none;">
<input type="submit" class="wmfg_btn" name="senden" id="senden" value="Senden">
</li>

- Der Text bei den Checkboxen sollte auch links sein.
.wmfg_a td {
text-align: left;
}

[seba86]

Du bist aber auch ein netter Mensch

EDIT:

Nebenbei angemerkt, hat der Bereich Programmierung/Web-Design im 3DC in den letzten Jahren leider auch sehr stark abgenommen. Ich bin regelrecht froh, wenn hier mal wieder jemand einen Beitrag erstellt.

Das findest du schlimm? Ich finde das im Zweifel eher sogar gut, da solche Anfragen eher zu anderen Seiten und Foren gehören. Schließlich ist das hier 3dcenter und nicht html5center o.ä. xD

[Dane]

Vielen lieben Dank RattuS, und wirklich zuvorkommend das du einem schmarotzer wie mir hilfst. Immer wieder schön zu sehen wie hilfbereit Menschen sind!

Nebenbei: Ich finde es durchaus etwas krank wenn man mittlerweile schon die User kontrolliert...