Probleme mit CSS und Formular

Dieses Thema im Forum "Web Page Design" wurde erstellt von Akoran, 02.02.2006.

  1. Akoran

    Akoran Thread Starter MacUser Mitglied

    Beiträge:
    134
    Zustimmungen:
    0
    MacUser seit:
    04.03.2003
    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 {
        
    fontbold 14px Helvetica,Arial;
        
    color#7f0000;
    }

    #container {
        
    padding0;
        
    width810px;
        
    left50%;
        
    margin-left: -400px;
        
    positionabsolute;
    }

    .
    content_big {
        
    margin5px;
        
    padding10px;
        
    floatleft;
        
    width370px;
        
    background-color#fff;
        
    border1px solid #7f0000;
        
    font12px Helvetica,Arial;
    }   
    forminput 
        
    font12px Helvetica,Arial;
        
    line-height25px;
        
    padding1px;
        
    width370px;
    }
    .
    submit, .reset {
        
    background-color#7f0000;
        
    border 1px solit #006699;
    }
    input:focusinput:hover {
        
    background-color#ccccaa;
        
    border1px dashed #7f0000;
        
    font-weightbold;
    }
    inputselect {
        
    width200px;
        
    floatleft;
        
    border1px solid #7f0000;
        
    background-color#cccc99;
        
    margin5px;
        
    padding2px;
    }
    .
    radioinput {
        
    width1em;
        
    floatleft;
        
    margin5px;
        
    padding2px;
    }
    .
    radiolabel {
        
    width5em;
        
    margin2px;
        
    padding2px;
        
    floatleft;
        
    text-alignright;
    }
    .
    buttoninput {
        
    font-weightbold;
        
    width100px;
        
    floatleft;
        
    border1px solid #7f0000;
        
    background-color#ccccaa;
        
    margin5px;
        
    padding2px;
    }
    label {
        
    width100px;
        
    margin2px;
        
    padding2px;
        
    floatleft;
        
    text-alignleft;
    }

    /*]]>*/
    </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 :D Das Formular sieht bei der Ausgabe, aber leider immer noch so aus, wie auf dem Screenshoot (Posting 2)
     
    Zuletzt bearbeitet: 02.02.2006
  2. Akoran

    Akoran Thread Starter MacUser Mitglied

    Beiträge:
    134
    Zustimmungen:
    0
    MacUser seit:
    04.03.2003
    Hier noch ein Foto, wie es im Moment aussieht.
     

    Anhänge:

    • foto.jpg
      foto.jpg
      Dateigröße:
      22 KB
      Aufrufe:
      30
  3. sparky

    sparky MacUser Mitglied

    Beiträge:
    521
    Zustimmungen:
    19
    MacUser seit:
    29.04.2003
    wo ist denn deine styles.css?
    sonst lohnt das suchen nicht so recht.
    ;)
     
  4. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    MacUser seit:
    20.03.2005
    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
     
  5. Akoran

    Akoran Thread Starter MacUser Mitglied

    Beiträge:
    134
    Zustimmungen:
    0
    MacUser seit:
    04.03.2003
    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.
     
  6. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    MacUser seit:
    20.03.2005
    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
     
  7. Akoran

    Akoran Thread Starter MacUser Mitglied

    Beiträge:
    134
    Zustimmungen:
    0
    MacUser seit:
    04.03.2003
    Danke Dir! Hab <p>-Tags eingefügt, jetzt geht es (auch mit meinem Chaoscode :D). 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 :D
     
Die Seite wird geladen...
Ähnliche Themen - Probleme CSS Formular
  1. SignoreRossi
    Antworten:
    6
    Aufrufe:
    864
    SignoreRossi
    28.06.2011
  2. mac$imon
    Antworten:
    2
    Aufrufe:
    546
    mac$imon
    30.07.2008
  3. schuschain
    Antworten:
    5
    Aufrufe:
    562
    msslovi0
    07.02.2006
  4. joedelord
    Antworten:
    10
    Aufrufe:
    1.515
    KonBon
    15.08.2006
  5. maceis
    Antworten:
    2
    Aufrufe:
    556
    maceis
    22.04.2004