• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

kontaktformular gestalten

C

Corraggiouno

Mitglied
hi,

kann mir jemand bei der "Verschönerung" meines Kontaktformulars helfen?
Code: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>J</title>
<link href="css/jk.css" rel="stylesheet" type="text/css" />
</head>

<body>
 <div id="wrapper">
  <h1>iber</h1>
   <ul id="navigation">
    <li class="none_bg"><a href="unternehmen.html">Unternehmen</a></li>
    <li><a href="leistungen.html">Leistungen</a></li>
    <li><a href="partner.html">Partner</a></li>    
    <li><a href="stellenangebote.html">Stellenangebote</a></li>
    <li><a href="kontaktformular.html">Kontakt</a></li>
   </ul>
  <div id="maintext">
  <h3>Kontaktformular</h3>
  <ul id="kontaktformular">
  <li>Firma: <input name="firma" type="text" size="50"/></li>
  <li>Vorname und Name: <input name="vornachname" type="text" size="50"/></li>
  <li>Straße und Haus-Nr. <input name="strassnr" type="text" size="50"/></li>
  <li>Telefon: <input name="telefon" type="text" size="50"/></li>
  <li>E-Mail: <input name="email" type="text" size="50"/></li>
  <li>Ihre Anfrage: <textarea name="anfrageeingabe" cols="50" rows="10"/></textarea></li>
  </ul>
  </div>
  <div id="sidebar">
    <h3>Kontakt</h3>
     Jaki und Klaiber<br />
     Weinbergweg 63<br />
     89075 Ulm<br />
     Telefon: 0731 - 551739<br />
     Telefax: 0731 - 551846<br />
     E-Mail: <a href="mailto:[email protected]">[email protected]</a>
 </div>
 </div>
</body>
</html>

Code: 
ul#kontaktformular
{
list-style-type:none;
}

ul#kontaktformular li
{
float:left;
display:block;
padding-bottom: 20px;
Jaki und Klaiber
ich hätte gerne das ich zwischen der Bezeichnung und Eingabefeld einen größeren Zwischenraum ergibt und das die Eingabefelder schön untereinander stehen.............beim freien Textfeld ist die Bezeichnung komplett nach unten gerutscht.........
Kann mir da jemand einen TIpp geben, wie man das besser machen kann?
 
besser wäre es wohl statt Listen, ein Fieldset zu verwenden.

Code: 
<form>
  <fieldset>
  <legend>Kontaktformular</legend>
    <label for="firma">Firma</label>
    <input type="text" name="firma" id="firma" />
    <br />
    <label for="vornachname">Vorname und Name</label>
    <input type="text" name="vornachname" id="vornachname" />
    <br />
    ......

  </fieldset>
</form>
und dann mit css optimieren z.B:

Code: 
fieldset {
  padding: 1em;
  font:80%/1 sans-serif;
  }
label {
  float:left;
  width:30%;
  margin-right:0.5em;
  padding-top:0.2em;
  text-align:right;
  font-weight:bold;
  }

gruß miwo
 
Also meine Formulare sehen meist so in etwa aus (Ohne autofill und Fehleranzeige etc...) und perfekten Style

HTML: 
<style type="text/css">
  label {
    display:block;
    float:left;
    width:100px;
  }
</style>

<form action="somewhere.php" method="post">
  <p>
    <label for="Vorname">Vorname:</label>
    <input type="text" id="Vorname" name="Vorname" />
  </p>
  <p>
    <label for="Nachname">Nachname:</label>
    <input type="text" id="Nachname" name="Nachname" />
  </p>
  <input type="submit" value="absenden" name="whatever" />
</form>
 
Und wozu ist da der Absatz? Der ist dort falsch angebracht.

Ich mache es ähnlich wie miwo oben, nur ohne überflüssigen Zeilenumbruch.

HTML: 
<form>
  <fieldset>
  <legend>Kontaktformular</legend>
    <label for="firma">Firma</label>
    <input type="text" name="firma" id="firma" />
    <label for="vornachname">Vorname und Name</label>
    <input type="text" name="vornachname" id="vornachname" />
    ......

  </fieldset>
</form>
 
Hm,

das hab ich so von nem Lehrbuch aus der Uni uebernommen... irgendwas aus dem O'reilly Verlag.
Hatte gedacht, dass das schon seinen Sinn hat, aber um ehrlich zu sein, ich bin kein Experte was
die perfekte Semantik angeht.
Aber wenn du meinst, es ist falsch werd ich das vllt nochmal ueberdenken ;)
 
Naja, denk mal nach .. wozu ist der Zeilenumbruch da? Doch höchstens um künstlich einen Abstand zu erzeugen. Das ist aber der falsche Einsatz für Zeilenumbrüche. Abstände erreicht man per CSS, nicht so.
 
Ich hab immer das <p> gestyled per css , so wie ichs brauchte ;P
Aber irgendwie machts Sinn was du sagst, eigentlich unnoetig.
 
das kann man nun sehen wie man will ein <br /> kann auch einfach für ein zeilenumbruch da sein somit könnte
das p tag weggelassen werden. Allerdings kannst du das p tag auch nutzen wenn du kein <br /> haben willst
somit würde ich nicht behaupten das es unnoetig sei.
 
habe nun folgendes definiert:
Code: 
fieldset
{

}

label
{
float:left;
width:30%;
padding-top:0.2em;
text-align:right;
font-weight:bold;
}

Code: 
<div id="maintext">
  <h3>Kontaktformular</h3>
  <fieldset>
  <label for="firma">Firma</label><input name="firma" type="text"/>
  <label for="vornachname">Vor-/Nachname</label><input name="vornachname" type="text"/>
  
  </fieldset>
  </div>
mmh das Ergebnis sieht aber nicht so gut aus: J
Kann mir jemand einen Tipp geben, wie ich die Eingabefelder bzw. die Bezeichnungen untereinander bekomme ohne das <p>-Tag bzw. wie kann ich die Eingabefelder in ihrer Länge vergrößern?
 
ach so was ich vergessen habe zu erwähnen;
Die Bezeichnung des Feldes hätte ich gerne links, dann einen ca. 50px Abstand zum Eingabefeld, welches nicht unter der Bezeichung, sondern rechts neben der Bezeichnung stehen soll.
 
devilseye schrieb:
das kann man nun sehen wie man will ein <br /> kann auch einfach für ein zeilenumbruch da sein somit könnte
das p tag weggelassen werden. Allerdings kannst du das p tag auch nutzen wenn du kein <br /> haben willst
somit würde ich nicht behaupten das es unnoetig sei.
Zum Vergrößern anklicken....

Ein <p> ist dafür da Texte semantisch als Text auszuzeichnen. Ein Formularfeld ist kein Text.

Corraggiouno schrieb:
Kann mir jemand einen Tipp geben, wie ich die Eingabefelder bzw. die Bezeichnungen untereinander bekomme ohne das <p>-Tag bzw. wie kann ich die Eingabefelder in ihrer Länge vergrößern?
Zum Vergrößern anklicken....

floate label und input - dadurch stehen die Felder erstmal nebeneinander. Über die Angabe einer Breite und eines Außenabstands erreichst Du dann auch das:

Corraggiouno schrieb:
Die Bezeichnung des Feldes hätte ich gerne links, dann einen ca. 50px Abstand zum Eingabefeld, welches nicht unter der Bezeichung, sondern rechts neben der Bezeichnung stehen soll.
Zum Vergrößern anklicken....

Das sollte für dich als Einstieg genügen:

Code: 
input {
float: left;
margin: 0 0 8px 50px;
width: 200px;
}

Sieht bei meinem Test im Firebug im Firefox völlig ok aus.
 
Code: 
label
{
float:left;

}
input
{
float:left;
margin: 0 0 8px 50px;
width: 200px;
}
.........hab den Code mal so übernommen, den du mir empfohlen hast; leider will die Bezeichnung nicht in die nächste Zeile bzw. das ganze steht nicht bündig untereinander

aktuell: J
 
Du musst nach jedem Eingabefeld wieder clearen oder das ganze mit einem Wrapper umgeben, der einen Zeilenumbruch an der richtigen Stelle erzwingt
 
danke für den Tipp; das sieht schon viel besser aus J
Code: 
label
{
float:left;
clear:left;
}
input
{
margin-top:2px;
margin-left: 90px;
width: 300px;
}
.........jetzt ist es nur noch so, dass der Abstand zu der Bezeichnung immer 300 px ist; die eingabefelder sollen ja untereinander sein; muss ic? da jetzt seperate Klassen erstellen=
 
Gib dem label noch 100px Breite

Code: 
width: 100px;

Dann sind die Beschriftungen gleich lang.

Clearen ist eigentlich nicht notwendig, wenn man die Felder pro Zeile per Außenabstand und Breiten so breit macht, dass sie die ganze Zeile einnehmen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben