Probleme mit CSS und Formular

Akoran · 02.02.2006

Irgendwie bekomm ich das Formular nicht so hin. Beschriftungen sollten eigentlich links stehen, die Felder rechts. Bezieht sich auf die Felder Name-PLZ/Ort. Wo liegt mein Fehler?

Hier der Quelltext:

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test - Kontakt</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/ 

h1 {
    font: bold 14px Helvetica,Arial;
    color: #7f0000;
}

#container {
    padding: 0;
    width: 810px;
    left: 50%;
    margin-left: -400px;
    position: absolute;
}

.content_big {
    margin: 5px;
    padding: 10px;
    float: left;
    width: 370px;
    background-color: #fff;
    border: 1px solid #7f0000;
    font: 12px Helvetica,Arial;
}   
form, input { 
    font: 12px Helvetica,Arial;
    line-height: 25px;
    padding: 1px;
    width: 370px;
}
.submit, .reset {
    background-color: #7f0000;
    border 1px solit #006699;
}
input:focus, input:hover {
    background-color: #ccccaa;
    border: 1px dashed #7f0000;
    font-weight: bold;
}
input, select {
    width: 200px;
    float: left;
    border: 1px solid #7f0000;
    background-color: #cccc99;
    margin: 5px;
    padding: 2px;
}
.radioinput {
    width: 1em;
    float: left;
    margin: 5px;
    padding: 2px;
}
.radiolabel {
    width: 5em;
    margin: 2px;
    padding: 2px;
    float: left;
    text-align: right;
}
.buttoninput {
    font-weight: bold;
    width: 100px;
    float: left;
    border: 1px solid #7f0000;
    background-color: #ccccaa;
    margin: 5px;
    padding: 2px;
}
label {
    width: 100px;
    margin: 2px;
    padding: 2px;
    float: left;
    text-align: left;
}

/*]]>*/
</style>
</head>
<body>
<div id="container">
<div class="content_big"><h1>Kontaktformular</h1><br /><br />
<form name="form1" method="post" action="">
<label for="betreff">Betreff:</label> 
    <select name="select">
      <option value="0" selected>bitte w&auml;hlen Sie</option>
      <option value="1">Produktanfrage</option>
      <option value="2">Anfrage zu Dienstleistungen</option>
      <option value="3">Support f&uuml;r Produkte</option>
      <option value="4">Support allgemein</option>
      <option value="5">Bestellung</option>
      <option value="6">Sonstiges</option>
    </select><br />
<label class="radiolabel" for="Anrede">Firma</label><input class="radioinput" type="radio" name="Optionsschaltergruppe1" value="1" />
<label class="radiolabel" for="Anrede">Herr</label><input class="radioinput" type="radio" name="Optionsschaltergruppe1" value="2" />
<label class="radiolabel" for="Anrede">Frau</label><input class="radioinput" type="radio" name="Optionsschaltergruppe1" value="3" /><br />
<label for="Name">Name:</label><input type="text" name="textfield" /><br />
<label for="EMail">E-Mail:</label><input type="text" name="textfield2" /><br />
<label for="Telefon">Telefon:</label><input type="text" name="textfield3" /><br />
<label for="Strasse">Strasse/Hausnr:</label><input type="text" name="textfield4" /><br />
<label for="Ort">PLZ/Ort:</label><input type="text" name="textfield5" /><br />
<label for="Text">Text:</label>
    <textarea name="textfield6" rows="10" ></textarea><br />
    <input type="submit" class="buttoninput" name="Submit" class="submit" value="Abschicken" />
    <input type="reset" class="buttoninput" name="Reset" class="reset" value="Zur&uuml;cksetzen" />  
</form></div>

</div>
</body>
</html>

Mal soweit geändert, bevor noch jemand weiter Fehler findet

Das Formular sieht bei der Ausgabe, aber leider immer noch so aus, wie auf dem Screenshoot (Posting 2)

Akoran · 02.02.2006

Hier noch ein Foto, wie es im Moment aussieht.

sparky · 02.02.2006

wo ist denn deine styles.css?
sonst lohnt das suchen nicht so recht.

msslovi0 · 02.02.2006

Erklär doch mal was diese display: block-Anweisungen für inline-Elemente sollen, die dann doch wieder einen float: left erhalten. Wenn du dein css diesbezüglich aufräumst sollte sich das Problem in Wohlgefallen auflösen.

Für Überschriften wurden im übrigen h1 bis h6 erfunden, nicht <b class="titel">.

Matt

Akoran · 02.02.2006

Danke schon mal. Das styles.css ist noch nicht in gebrauch, hab das ganze erstmal in die html-Datei geschrieben.
Das mit der block-Anweisung hab ich aus nem Buch kopiert, da ich schon am verzweifeln war. Das Löschen der Anweisungen bringt auch kein anderes Bild, sah auch ohne diesen genauso aus.
Das mit der Überschrift stimmt natürlich, muss ich noch ändern.

msslovi0 · 02.02.2006

Ich hab generell von Aufräumen geredet. Nicht vom bloßen löschen der block-Anweisung.

Dein Code hat zahlreiche Fehler und Umgereimtheiten:

Generell: Die Angabe von relativen Werten für die Schriftgröße ist besser als eine feste in Pixeln.

Das Konstrukt für #container habe ich nicht verstanden.

Code:

    left: 50%; 
    margin-left: -400px; 
    position: absolute;

Wenn es da nur um das zentrieren von #container geht, das geht auch einfacher (s.u.). Über die Angabe für body sollte auch die Win-IE das schlucken.

Du hast zwar Formatierungen für input und select, aber keine für textarea. Absicht? Zumindest sollte Textarea den gleichen padding und margin wie input und select haben, damit das vernünftig aussieht.

Bestimmte Buttontypen lassen sich einfacher ansprechen, mit

Code:

input[type="radio"]

für Radiobuttons z.B. Der Win-IE mag das möglicherweise aber nicht, kann das gerade nicht testen, dann kommst du um eine eigene Klasse, die dann innerhalb des <input> stehen muss, trotzdem nicht rum.

Für den Submit- und Resetbutton (wobei ich letzteren für absolut unnötig halte) hast du nochmal eigene Klassen definiert (anderer Hintergrund und andere Border). Und zusätzlich nochmal allgemeine Definitionen für Buttons angelegt, aber dann falsch eingebunden (zweimal class als Attribut geht nicht, siehe auch Kommentar im Beispiel, hätte dir aber auch der Validator gesagt). Durch den roten Hintergrund wäre aber weiß als Schriftfarbe für die Buttons nicht schlecht.

Wenn du mit <label> arbeitest brauchst du für die Angabe im for-Attribut eine Entsprechung in Form einer id für einen input, select oder textarea. Von daher machen gleiche Angaben im for ('Anrede') auch keinen Sinn, da id's ja eindeutig sein müssen.

Die verkürzte Schreibweise von Attributen (<option value="0" selected>) ist in XHTML nicht erlaubt.

Für die Radiogruppe gibt es keine Vorauswahl definiert. Kann aber auch Absicht sein.

Für die textarea fehlt das Attribut cols.

In XHTML müssen alle Tags auch entsprechende Endtags haben. Für Tags ohne korrespondierendes Endtag muss daher /> notiert werden. Das gilt nicht nur für <br />, sondern auch u.a. für <input />, <meta />, <area />, <hr />.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Test - Kontakt</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <link rel="stylesheet" type="text/css" href="styles.css" />  
<style type="text/css"> 
* {
  padding: 0;
  margin: 0;
}

body {
  text-align: center;
}

h1 { 
    font: bold 14px Helvetica,Arial; 
    color: #7f0000; 
} 

#container { 
    width: 810px; 
    margin: auto;  
    text-align: left;
} 

.content_big { 
    margin: 5px; 
    padding: 10px; 
    float: left; 
    width: 370px; 
    background-color: #fff; 
    border: 1px solid #7f0000; 
    font: 12px Helvetica, Arial, sans-serif; 
}    
form, input {  
    font: 12px Helvetica, Arial, sans-serif; 
    line-height: 25px; 
    padding: 1px; 
    width: 370px; 
} 
input:focus, input:hover { 
    background-color: #ccccaa; 
    border: 1px dashed #7f0000; 
    font-weight: bold; 
} 
input, select { 
    width: 200px; 
    border: 1px solid #7f0000; 
    background-color: #cccc99; 
    margin: 5px; 
    padding: 2px; 
} 
textarea {
    margin: 5px; 
    padding: 2px; 
}
input[type="radio"] { 
    display: block; 
    width: 1em; 
    float: left; 
    margin: 5px; 
    padding: 2px; 
} 
.radiolabel { 
    width: 5em; 
    margin: 2px; 
    padding: 2px; 
    float: left; 
    text-align: right; 
} 
input[type="submit"], input[type="reset"] {
    background-color: #7f0000; 
    border 1px solid #006699; 
    font-weight: bold; 
    display: block; 
    width: 100px; 
    float: left; 
    margin: 5px; 
    padding: 2px; 
} 
label { 
    width: 100px; 
    margin: 2px; 
    padding: 2px; 
    float: left; 
    text-align: left; 
} 

form p {
  clear: both;
}
</style> 
</head> 
<body> 
<div id="container"> 
  <form name="form1" method="post" action="" class="content_big"> 
    <h1>Kontaktformular</h1>
    
    <p>
      <label for="betreff">Betreff:</label>  
        <select id="betreff" name="select"> 
          <option value="0" selected="selected">bitte w&auml;hlen Sie</option> 
          <option value="1">Produktanfrage</option> 
          <option value="2">Anfrage zu Dienstleistungen</option> 
          <option value="3">Support f&uuml;r Produkte</option> 
          <option value="4">Support allgemein</option> 
          <option value="5">Bestellung</option> 
          <option value="6">Sonstiges</option> 
        </select>
    </p> 
    <p>
        <label class="radiolabel" for="Firma">Firma</label><input id="Firma" type="radio" name="Optionsschaltergruppe1" value="1" /> 
        <label class="radiolabel" for="Herr">Herr</label><input id="Herr" type="radio" name="Optionsschaltergruppe1" value="2" /> 
        <label class="radiolabel" for="Frau">Frau</label><input id="Frau" type="radio" name="Optionsschaltergruppe1" value="3" />
    </p>
    <p>
        <label for="Name">Name:</label><input id="Name" type="text" name="textfield" />
    </p>
    <p>
        <label for="EMail">E-Mail:</label><input id="EMail" type="text" name="textfield2" />
    </p>
    <p>
        <label for="Telefon">Telefon:</label><input id="Telefon" type="text" name="textfield3" />
    </p>
    <p>
        <label for="Strasse">Strasse/Hausnr:</label><input id="Strasse" type="text" name="textfield4" />
    </p>
    <p>
        <label for="Ort">PLZ/Ort:</label><input id="Ort" type="text" name="textfield5" />
    </p>
    <p>
        <label for="Text">Text:</label> 
        <textarea id="Text" name="textfield6" cols="20" rows="10" ></textarea>
    </p>
    <p>
      <!--
      Zweimal Attribut class funktioniert nicht, zusätzlich, wie bei fast allen <input>-Feldern, keine XHTML-Notifikation!
      Deshalb funktioniert auch die alternative Hintergrundfarbe für submit/reset nicht. Warum eigentlich überhaupt zwei Klassen?
      <input type="submit" class="buttoninput" name="Submit" class="submit" value="Abschicken"> 
      Was funktioniert ist
      <input type="submit" class="buttoninput submit" name="Submit" value="Abschicken" /> 
      -->
      <input type="submit" name="Submit" value="Abschicken" /> 
      <input type="reset" name="Reset" value="Zur&uuml;cksetzen" />   
    </p>
  </form>
</div> 
</body> 
</html>

Matt

Akoran · 02.02.2006

Danke Dir! Hab <p>-Tags eingefügt, jetzt geht es (auch mit meinem Chaoscode

). Aber hast recht, muss da noch einiges ausbessern.

Das mit der falschen XHTML-Notation hatte ich schon ausgebessert, war mir auch eben erst aufgefallen (hatte das Formular ursprünglich im Dreamweaver erstellt und dann den Code rüber kopiert).
Das Textfeld ist noch nicht formatiert, weil ich soweit noch nicht gekommen war, wollte erst die Ausrichtung passend haben. Und das mit der doppelten class-Anweisung bei den Buttons war auch nicht so geplant. Bin auch erst drauf gekommen, dass SubEthaEdit in der Webvorschau keine farbigen Buttons macht, hab es dann aber vergessen wieder rauszulöschen - meine TryAndError-Methode ist wohl nicht immer die beste

Ach ja das mit dem Container ist nur, weil ich das ganze auf die schnelle auf das nötigste geschrumpft hab. Das ganze ist ursprünglich nicht nur horizontal zentriert, sondern auch vertikal. Wusste da keine andere Lösung.

Aber wie gesagt, danke noch mal, jetzt funktionierts - und versprochen, ich räum' erst auf, bevor ich weitermach

Probleme mit CSS und Formular

Akoran

Aktives Mitglied

Akoran

Aktives Mitglied

Anhänge

sparky

Aktives Mitglied

msslovi0

Aktives Mitglied

Akoran

Aktives Mitglied

msslovi0

Aktives Mitglied

Akoran

Aktives Mitglied