✔ Kontaktformular mit CSS gestalten

Status
Nicht offen für weitere Antworten.
K

kanecorpse

Mitglied
Hallo Community!

Ich brüte seit einigen Tagen über dem neuen Design meiner Homepage. Das Grunddesign bekomme ich gut hin. Aber bei den Inhalten bekomme ich kein vernünftiges Ergebnis. Bilder und Text nebeneinander zu bekommen, ist nur ein Problem dabei. Aber das nur am Rande.

Ich habe eine funktionierendes Kontaktformular. Das würde ich nun gern mit css umsetzen, daich die Tabellen verbannen möchte. Bisher steckt es in einer Tabelle.

Ich krieg es nicht hin, daß die Feldbezeichnungen links neben den Eingabefeldern stehen. Das Formular selbst wollte ich in einen Div einbauen, der in dem Content-Div eingefügt wird. Das habe ich auch hinbekommen. Aber weiter weiß ich nicht. Könnt ihr mir bitte helfen?


Ansehen könnt ihr es hier
Kontakformular

Hier mal der HTML-Code

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ingo&acute;s Exoten Kontakt</title>
<link rel="stylesheet" href="ex09style/ie2009.css" type="text/css">
<link rel="SHORTCUT ICON" href="http://www.ingos-exoten.de/favicon.ico">
<meta name="robots" content="index">
<meta name="robots" content="follow">
<meta name="revisit-after" content="14 days">
<meta name="description" content="Homepage zum Thema Vogelspinnen und Nattern. Infos über Arten, Pflege, Futter, Terrarium, Lasiodora, Pamphobeteus, platyomma, parahybana, Acanthoscurria, geniculata, Häutung, Heimchen, Babymäuse, Drosophila, Temperaturen und Bilder">
<meta name="keywords" content="Ingo´s Exoten, Ingos, Exoten, Schlangen, Vogelspinnen, Futtertiere, Lasiodora, Parahybana, Vitalius, Futtertierzucht, Pampobeteus, Ornatus, Platyomma, Acanthscurria, Geniculata, Grammostola, Rosea, Chilobrachys, Burmensis, Brachypelma, Smithi, Böhmii, Boehmei, Klugi, Avicularia, Ulrichea, Metallica, Purpurea, Pulchra, Vagans, Terrarium, Heimchen, Grillen, Schaben, Wachsmaden, Kornnatter, Heuschrecken, Pantherophis, guttatus, Oketee, Nominat, Ratten, elaphe, bimaculata, Kornnattern, Creamsicle, bloodred, Futtermäuse, Mäuse">
<meta name="copyright" content="2009 Ingo´s Exoten">
<meta name="author" content="I. Buß">
<meta name="date" content="2009-11-11">
<meta name="generator" content="Phase 5.42">
<meta name="audience" content="Alle">
<meta name="page-type" content="Private Homepage">
<meta http-equiv="content-language" content="de">
</head>

<body>
<div id="head">
<!--erster-->
<div id="head1">
 </div>
 <div id="headtitle" align="center">
  <img src="ex09style/banner.jpg" alt="Banner" width="468" height="60" style="width: 468px; height: 60px;"> </div>
<div id="head2"></div>
</div>
<!--erster ende-->
 <div id="conlayer">
 <div id="left">
  <div class="menucontainer">
   <p class="menutitle">EXOTEN</p>
   <a href="indexb.html" target="_self" class="menu">Home</a>
   <a href="vs/indexvs.html" target="_self" class="menu">Vogelspinnen</a>
   <a href="sn/indexsn.html" target="_self" class="menu">Schlangen</a>
   <a href="uc/progress.html" target="_self" class="menu">Futtertiere</a>
   <a href="sell/se.html" target="_self" class="menu">Biete</a>
   <a href="buy/look.html" target="_self" class="menu">Suche</a>
   <a href="boer/boer.html" target="_self" class="menu">B&ouml;rsen</a>  </div>

  <div class="menucontainer">
   <p class="menutitle">SONSTIGES</p>
   <a href="news/new.html" target="_self" class="menu">News</a>
   <a href="me/me.html" target="_self" class="menu">Über mich</a>
   <a href="kon.php" target="_self" class="menu">Kontakt</a>
   <a href="uc/progress.html" target="_self" class="menu">Gäste</a>
   <a href="uc/progress.html" target="_self" class="menu">Links</a>
   <a href="awa/awa.html" target="_self" class="menu">Awards</a>
   <a href="uc/progress.html" target="_self" class="menu">Toplisten</a>
   <a href="uc/progress.html" target="_self" class="menu">Downloads</a>
   <a href="imp.html" target="_self" class="menu">Impressum</a>  </div>
  <p style="text-align: left;">&nbsp;</p>

 </div>
<div id="maintitle">
  <p class="maintitle">Kontakt</p>
</div>
 <div id="content">
   <h2>Kontakt</h2>
   <div id="konform">
<form action=/cgi-bin/formmail method=POST>
<input type=hidden name=email value="dark_rubber@arcor.de">
<input type=hidden name=url value="http://home.arcor.de/dark_rubber/mailok.html">
<!-- Hier beginnt die Tabelle -->
<table width="484" height="334" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
  <td width="110">Name:</td>
  <td width="392">
    <input name="Name" type="text" id="Name" />
  </td>
  </tr>
<tr>
  <td>E-Mail:</td>
  <td>
    <input name="E-Mail" type="text" id="E-Mail" value="@" />
  </td>
  </tr>
<tr>
<td>Hompage:</td>
  <td>
    <input name="Homepage" type="text" id="Homepage" value="http://" />
  </td>
  </tr>
<tr>
  <td>Betreff:</td>
<td><input type="text" name="Betreff" size="30"></td>
</tr>
<tr>
  <td>Text:</td>
 <td>
 <textarea name="Text" cols="50" wrap="VIRTUAL" rows="8">
 </textarea></td>
 </tr>
<tr align="center">
  <td>&nbsp;</td>
 <td>
 <input type=submit value="Abschicken">
 <input type=reset value="Löschen"></td>
 </tr>
</table>
<!--- Hier endet die Tabelle -->
</form>
   </div>
   </div>
  <div id="fuss">.:: Ingo´s Exoten 2009 ::.
 </div>
 <br style="clear: both;">
</div>
</body></html>


Und das ist meine Css-Datei

Code: 
/* schriftstil,abstände */

body 
{
 font-family:Verdana;
 font-size:12px;
 text-align:center;
 margin:10px;
 background-image:url(back.jpg);
 scrollbar-face-color:#E7DC8F;
 scrollbar-shadow-color:#000080;
 scrollbar-highlight-color:#E7DC8F;
 scrollbar-3dlight-color:#FFFFFF;
 scrollbar-darkshadow-color:#FFFFFF;
 scrollbar-track-color:#EEE7B5;
 scrollbar-arrow-color:#D9B359;
}

h1 {font-size:18px;color:#000000;margin-bottom:0px;}
h2 {font-size:16px;color:#000000;}
h3 {font-size:14px;color:#000000;}

/* allgemeine links im text */

a:link{ color: #291E05; text-decoration:underline;font-family: verdana; font-size: 10pt;}
a:visited{color:#291E05;text-decoration:underline;font-family: verdana; font-size: 10pt;}
a:active{ color:#291E05;text-decoration:underline;font-family: verdana; font-size: 10pt;}
a:hover{ color: #ffffff;text-decoration:none;font-family: verdana; font-size: 10pt;}

a.navi:link, a.navi:visited {
  text-decoration:none;
  color:#000000;
}
a.navi:active, a.navi:hover {
  text-decoration:none;
  color:#737994;
}

a.menu:link, a.menu:visited { 
  color:#000000;
 background-color:#E6DB8E;
 text-decoration:none;
}
a.menu:active, a.menu:hover { 
  color:#737994;
 background-color:#eeeeee;
}
a.menu {
 display:block;
 padding:3px;
 border-top:1px solid #643200;
 background-image:url(conie.jpg);
 text-align:left;
 color:#000000;
 text-decoration:none;
}
/* Kopf */
#head {
border: 1px solid rgb(100, 50, 0);
margin: 0px auto;
width: 760px;
text-align: left;
background-color: rgb(243, 239, 198);
}
#head1 {
height:18px;
background-color:#DFCCA6;
border-bottom:1px solid #643200;
}
#headtitle {
height:62px;
padding:8px;
background-image:url(conie.jpg);
border-bottom:1px solid #643200;
}
#head2 {
color:#000000;
height:16px;
background-color:#F6EBCA;
text-align:center;
}
/* contentlayer */
#conlayer {
border: 0px solid rgb(187, 143, 43);
margin: 8px auto;
width: 762px;
text-align: left;
background-color: rgb(255, 255, 255;
}
/* Navigation links */
#left {
background-image:url(back.jpg);
width:128px;
float:left;
}
.menutitle{
text-align:center;
margin:2px;
}
.menucontainer {
border:1px solid #643200;
background-color:#E6D29F;
width:118px;
margin-bottom:8px;
}
/* Inhalt */
.maintitle{
text-align:left;
margin:2px;
}
#maintitle {
background-color:#DFCCA6;
width:610px;
float:right;
padding:0px 10px;
border-top:1px solid #643200;
border-left:1px solid #643200;
border-right:1px solid #643200;
}
#content {
font-family:Verdana;
font-size:12px;
background-image:url(conie.jpg);
width:610px;
float:right;
padding:10px;
border:1px solid #643200;
}
#konform {
background-color:#F6EBCA;
border:1px solid #643200;
width:550px;
}
#fuss {
font-family:Verdana;
font-size:7pt;
color:#B08828;
text-align:center;
padding:1px;
float:right;
height:16px;
width:628px;
background-color:#F6EBCA;
border-bottom:1px solid #643200;
border-left:1px solid #643200;
border-right:1px solid #643200;
}

Grüße,
kanecorpse
 
Zuletzt bearbeitet:
Hi!

Danke für den Link. Den Artikel habe ich bereits in der übersetzten Fassung vor mir liegen. Falls es interessiert. Der ist hier zu finden

pretty_accessible_forms auf Deutsch

Da komm ich nicht mit klar. Wie muß ich denn nun die Eingabefelder aus meinem Formular da einbauen? Ich bin ja an die Vorgaben von Arcor gebunden. Lediglich die Gestaltung kann ich ändern. Und das ist ja der Knackpunkt. Das verwirrt mich so sehr, das ich abslout ins schleudern gekommen bin. Nen Reset-Taster oder nen Systemwiederherstellungspunkt habe ich nicht, leider ;)

Ich hab angefangen, ein Beispiel mit Liste zu verwirklichen. Da hast du auch Hilfestellung geleistet. Das ist zumindest ein Ansatz für mich. Der Artikel verwirrt mich nur ...

Kannst du mir bei der Listengeschichte weiterhelfen. Die Dateien lade ich gleich hoch. Zu finden unter der Adresse ausm ersten Post.

Grüße,
kanecorpse
 
In beiden Artikeln wird doch das Markup (HTML-Code) und das dazugehörige Stylesheet vorgestellt, von daher kann ich nicht nachvollziehen, was daran jetzt verwirrend sein soll.

Ob das Formular nun auf einer Tabelle, oder einer Liste basiert, ist für die Funktionalität bei Arcor absolut nebensächlich.

mfg Maik
 
Oh mann.

Das ist echt super. Styling mit Java. Das ist echt das letzte, was ich möchte. Geht gar nicht. Das Styling funktioniert aber nur mit Java. Und von daher in die Tonne damit.

Gibt es denn nicht irgendwo eine Art vorlage, wo ich den Code von Acor einfügen kann? Eines, wo Bezeichnung der Eingabefelder und die Eingabefelder untereinander sind. Und eines, wo Die Bezeichnungen links untereinander und daneben die Einagbefelder untereinander sind. Die Buttens zum Seden und Löschen mittig unter den beiden "Spalten" oder unter dem Eingabefeld für den Nachrichtentext.

Das ist der Code von Arcor

Code: 
<form action="/cgi-bin/formmail" method="post">
<input type=hidden name=email value="IhrBenutzername@arcor.de">
<input type=hidden name=url value="http://www.arcor.de">
<!-- Hier beginnt die Tabelle -->
<table border="0" align="center">
<tr>
<td>
Betreff:<br>
<input type="text" name="Betreff" size="30">
</td>
</tr>
<tr>
<td>
<textarea name="Text" cols="50" wrap="VIRTUAL" rows="8"></textarea>
</td>
</tr>
<tr>
<td>
<input type=submit value="Ab geht die Post">
<input type=reset value="Nein, doch nicht">
</td>
</tr>
</table>
<!--- Hier endet die Tabelle -->
</form>

So. Muß ich nun 2 Spalten mit Divs machen? Eine für die Bezeichnungen, die Links stehen solen, die andere für die Eingabefelder. Das mit float ausrichten und am Ende mit clear beenden? Hab irgendwomal was mit id's in dem Code für die Eingabefelder gesehen. Wofür sind die und wo müssen die id's dann hin?

Grüße,
kanecorpse
 
Bitte was? Javascript zur Formatierung? :suspekt:

Hast du den Artikel nicht aufmerksam gelesen, dass damit lediglich auf einen Bug im Mozilla-Browser eingegangen wurde, der aber mittlerweile schon lange der Vergangenheit angehört.

Hier hab ich einen Thread ausgegraben, der dir zeigt, dass es sehr wohl mit dem Listenelement möglich ist, ein zweispaltiges Formular zu erzeugen:


Wenn das alles für dich keine "Vorlagen" sind, in denen du problemlos deine Formular-Codeschnipsel unterbringen kannst, dann kann ich dir leider auch nicht weiterhelfen.

mfg Maik
 
Ja. Das habe ich gemeint. Soweit ok. Sieh es dir bitte mal an.

Kontakttest

Wie bekomme ich denn einen kleinn Abstand zwischen die Eingabefelder? Macht man das mit padding oder margin? Oder wie?

Wie kann ich die Buttons unter das Nachrichtentextfeld bringen? Gelingt mir nicht.

Das ist jetzt der entsprechende HTML-Code
Code: 
   <div id="konform">
<form action=/cgi-bin/formmail method=POST>
<input type=hidden name=email value="dark_rubber@arcor.de">
<input type=hidden name=url value="http://home.arcor.de/dark_rubber/mailok.html">
<!-- Hier beginnt die Tabelle -->
      <ul>
          <li><label>Name:</label><input type="text" name="name" value="" /></li>
          <li><label>Mail:</label><input type="text" name="mail" value="@" /></li>
          <li><label>Homepage:</label><input type="text" name="mail" value="http://" /></li>
		  <li><label>Betreff:</label><input type="text" name="mail" value="" /></li>
		  <li><label>Nachricht:</label><textarea name="Text" cols="40" wrap="VIRTUAL" rows="8"></textarea></li>
		  <li><input type=submit value="Abschicken"><input type=reset value="Löschen"></li>
      </ul>
</form>
   </div>


Und das hier ist mein CSS

Code: 
#konform {
background-color:#F6EBCA;
border:1px solid #643200;
width:500px;
margin:auto;
}
ul {
list-style:none;
margin:0;
padding:0;
}
li label {
float:left;
width:150px;
}
li input[type=submit], li input[type=reset] {
margin:10px 5px 0 0;
}

Wäre nett, wenn du mir beim Ausrichten helfen könntest.

Grüße,
kancorpse
 
Code: 
<textarea name="Text" cols="30" wrap="VIRTUAL" rows="8">
<!-- Damit das Eingabefeld nicht nach unten umbricht -->
CSS: 
#konform {
background-color:#F6EBCA;
border:1px solid #643200;
width:500px;
margin:auto;
}
ul {
list-style:none;
margin:0;
padding:0;
}
li {
margin-bottom:10px;
}
li label {
float:left;
width:150px;
}
li input[type=submit], li input[type=reset] {
margin:10px 5px 0 0;
}
li input[type=submit] {
margin-left:150px;
}


mfg Maik
 
Jepp: Das kommt dem verdammt nahe. :)

Die Bezeichnungen links stehen etwas zu hoch finde ich. Kann man die noch irgendwie in der Höhe mittig zum jeweiligen Eingabefeld ausrichten, sowie es im oberen Formular zu sehen ist?

Zum Rahmen des Formulars wäre etwas Abstande nötig, denke ich. Das sieht etwas komisch aus, so wie es jetzt ist. Das geht mit padding bei #konform, wenn ich mich nicht irre?

Grüße,
kanecorpse

Ok. Den Abstand zum Rahmen habe ich mit padding in #konform hinbekommen.
Dadurch ist das ganze größer geworden. Hat das Einfluß auf einen Umbruch im textarea?

Die Ausrichtung der bezeichnung gelingt mir nicht. Magst du das nochmal ansehen?

im IE6 sind die Buttons leider nicht unter dem Textfeld. Das funktioniert im FF 3.5 tadellos.

Grüße,
kanecorpse
 
Der veraltete IE6 unterstützt nicht den genutzen Attribut-Selektor - Abhilfe schafft in diesem Fall http://code.google.com/p/ie7-js/. Oder du verwendest Klassennamen für die unterschiedlichen <input>-Elementtypen.

Um den Text vertikal auszurichten, wäre die Eigenschaft vertical-align:middle in Verbindung mit einer Tabelleneigenschaft (table, table-cell) der display-Eigenschaft vonnöten.

Da diese Tabelleneigenschaften vom IE6 und IE7 aber auch nicht interpretiert werden, wäre auch hier ein Workaround erforderlich.

In dem Beispiel http://www.pmob.co.uk/temp/vertical-align9.htm wird der Text am unteren Rand ausgerichtet, und müsste entsprechend umformatiert werden, um ihn vertikal zu zentrieren.

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück