Suse: Im Optionsfeld neues Feld öffnen?

Hallo,
ich bin neu hier und kenne mich leider noch nicht so gut mit HTML und was es da nicht alles gibt aus.

Ich hoffe ihr könnt mir helfen sonst werde ich hier noch verrückt.

Also zu meinem Problem.
Ich habe 2 Optionsfelder: Schritftart und Schriftfarbe

Schriftart:
  <label>
  <select name="Schrift[]" size="1" id="Schrift">
    <option selected="seminar">Wählen Sie die Schrift</option>
    <option>Comic</option>
    <option>Normal</option>
    <option>Kursiv</option>

</select>
  </label>
  </form>
        <br>
      Farbe:
  <label>
  <select name="Farbe[]" size="1" id="Farbe">
    <option selected="seminar">Wählen Sie die Farbe</option>
    <option>Rot</option>
    <option>Schwarz</option>
    <option>Braun</option>

</select>
  </label>
  </form>

Nun möchte ich das die Auswahl hier auch erscheint:
Also in der gewünschten Schrift und Farbe.

<br><br>
<font size="10"><font face="Comic Sans MS">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script type="text/javascript">

function schreibe() {var ausgabe1 = document.formular.ein.value;

document.getElementById('ausgabe').innerHTML = ausgabe1;

}

</script>

</head>

<body>
<form name="formular">
<input type="text" name="ein" />

<input onclick="schreibe();" type="button" value="Eintragen" />
</form>

<div id="ausgabe"style="position:absolute;top:10px;left:20px;z-index:4;"  font size="5;" body bgcolor="transparent;">

</div>
</body></font></font>

<html>
<head>
    <title></title>

Also das wenn ich normal und Farbe braun wähle auch in der Ausgabe erscheint.

Ist das irgendwie machbar? Ich habe schon alles versucht aber irgendwie ist das zu hoch für mich. Wäre über jede Hilfe dankbar.
Danke schonmal im vorraus.

  1. Hi,

    <option>Comic</option>
        <option>Normal</option>
        <option>Kursiv</option>

    verwende das value-Attribut, um dem Klartext den technischen Bezeichner zuzuordnen.

    <font size="10"><font face="Comic Sans MS">

    Für die Darstellung ist CSS da. Verwende *NICHT* das <font>-Element.

    <head>

    Sowieso wäre <font> nur weit innerhalb des <body> erlaubt, keinesfalls außerhalb von <head>.

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    Verwendest Du HTML4, HTML5 oder XHTML1?

    <div id="ausgabe"style="position:absolute;top:10px;left:20px;z-index:4;"  font size="5;" body bgcolor="transparent;">

    Wo zur Hölle hast Du diese Attribute her?

    </body></font></font>
         <html>
    <head>
        <title></title>

    Und diese Schachtelung? Zweiköpfiger Oger?

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Danke schonmal für deine schnelle Antwort.

      Hi,

      <option>Comic</option>
          <option>Normal</option>
          <option>Kursiv</option>

      verwende das value-Attribut, um dem Klartext den technischen Bezeichner zuzuordnen.

      Ich verstehe schon wieder nur Bahnhof *sorry* ich sag ja ich bin voll der Anfänger. Ist alles garnicht so leicht. Wo muss ich das value denn dann hinsetzen?

      <font size="10"><font face="Comic Sans MS">

      Für die Darstellung ist CSS da. Verwende *NICHT* das <font>-Element.

      Hab ich mal versucht, siehe Beispiel - ich hoffe so ist es richtig?

      <head>

      Sowieso wäre <font> nur weit innerhalb des <body> erlaubt, keinesfalls außerhalb von <head>.

      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

      Verwendest Du HTML4, HTML5 oder XHTML1?

      ähmmmm *sorry*

      <div id="ausgabe"style="position:absolute;top:10px;left:20px;z-index:4;"  font size="5;" body bgcolor="transparent;">

      Wo zur Hölle hast Du diese Attribute her?

      Irgendwo hier im selfhtml gefunden :o) Warum? Ist das etwa so schlimm? :o) Ich dachte das wäre so okay, weil es ja auch funzt.

      </body></font></font>
           <html>
      <head>
          <title></title>

      Und diese Schachtelung? Zweiköpfiger Oger?

      *hööö, ähm, ich weiß es leider auch nicht. Irgendwo hab ich das wohl gefunden.

      Cheatah

      Sorry,  mir ist das voll peinlich, tut mir leid das ich so unwissend bin. Ich fange gerade erst an mich damit zu beschäftigen und bin echt dankbar über Hilfe.

      So, hier jetzt nochmal:

      <head> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01  
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
      <title>Test</title>  
      <script type="text/javascript">  
        
      function schreibe() {var ausgabe1 = document.formular.ein.value;  
        
      document.getElementById('ausgabe').innerHTML = ausgabe1;  
        
          }  
        
      </script>  
        
      <style type="text/css">  
      s1 {  
      font-family: Comic;  
      }  
      s2 {  
      font-family: Arial;  
      }  
      s3 {  
      font-family: Monotype Corsiva;  
      }  
        
      F1 {  
      color: #FF0000;  
      }  
      F2 {  
      color: #000000;  
      }  
      F3 {  
      color: #840000;  
      }  
      </style>  
      </span>  
        
        
      <body>  
      <form name="formular">  
      <input type="text" name="ein" />  
        
      <input onclick="schreibe();" type="button" value="Eintragen" />  
      </form>  
        
      <div id="ausgabe"style="position:absolute;top:120px;left:10px;z-index:4;"  font size="5;" body bgcolor="transparent;">  
        
      </div>  
      </body></font></font>  
        
        
           <html>  
      <head>  
        
      Schriftart:  
        <label>  
        <select name="Schrift[]" size="1" id="Schrift">  
          <option selected="Schrift">Wählen Sie die Schrift</option>  
          <option>Comic</option> <  
          <option>Normal</option>  
          <option>Kursiv</option>  
        
        </select>  
        </label>  
        
              <br>  
            Farbe:  
        <label>  
        <select name="Farbe[]" size="1" id="Farbe">  
          <option selected="Farbe">Wählen Sie die Farbe</option>  
          <option>Rot</option>  
          <option>Schwarz</option>  
          <option>Braun</option>  
        
        </select>  
        </label>  
        </form>  
        
      
      
      1. verwende das value-Attribut, um dem Klartext den technischen Bezeichner zuzuordnen.

        Ich verstehe schon wieder nur Bahnhof *sorry* ich sag ja ich bin voll der Anfänger. Ist alles garnicht so leicht. Wo muss ich das value denn dann hinsetzen?

        http://de.selfhtml.org/html/formulare/auswahl.htm#listen

        Das ist vor allem Wichtig, weil sich dein Bezeichner dann ändern kann, der Wert aber gleich bleibt (und z.B. nur eine abstrakte Nummer sein kann). Nichts ist dämlicher als ein Tippfehler in einem Bezeichner den man später ändern muss und an 10 Stellen weiterkorrigieren darf.

        Selbstverständlich macht es auch das Übersetzen leichter.

        <font size="10"><font face="Comic Sans MS">

        Für die Darstellung ist CSS da. Verwende *NICHT* das <font>-Element.

        Hab ich mal versucht, siehe Beispiel - ich hoffe so ist es richtig?

        Besser - aber immer noch perfekt.

        <head>

        Sowieso wäre <font> nur weit innerhalb des <body> erlaubt, keinesfalls außerhalb von <head>.

        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

        Verwendest Du HTML4, HTML5 oder XHTML1?

        ähmmmm *sorry*

        http://de.selfhtml.org/html/allgemein/grundgeruest.htm

        Empfehlenswert ist, wenn du dich an XHTML 1.0 oder an HTML5 mit XML-Syntax hältst.

        <div id="ausgabe"style="position:absolute;top:10px;left:20px;z-index:4;"  font size="5;" body bgcolor="transparent;">

        Wo zur Hölle hast Du diese Attribute her?
        Irgendwo hier im selfhtml gefunden :o) Warum? Ist das etwa so schlimm? :o) Ich dachte das wäre so okay, weil es ja auch funzt.

        Ja, irgendwo stehen diese sicher, aber in dieser Kombination sind sie weder erlaubt noch sinnvoll - dass es "funzt" ist in XHTML 1.0 oder HTML 4.01 "Zufall" (aber sicher nicht in jedem Browser), in HTML5 ist es eine Seuche, weil es funktioniert, aber man nicht genau weiß warum (wenn man nicht das exakte Verhalten der HTML5-Fehlerkorrektur kennt).

        Ignorieren also den Zusatz weiter oben und halte dich an XHTML 1.0.

        </body></font></font>
             <html>
        <head>
            <title></title>

        Und diese Schachtelung? Zweiköpfiger Oger?

        *hööö, ähm, ich weiß es leider auch nicht. Irgendwo hab ich das wohl gefunden.

        Siehe oben - schau dir nochmal das Grundgerüst an.

        Cheatah

        Sorry,  mir ist das voll peinlich, tut mir leid das ich so unwissend bin. Ich fange gerade erst an mich damit zu beschäftigen und bin echt dankbar über Hilfe.

        So, hier jetzt nochmal:

        <head> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

        Die Zeile ist Unvollständig (Grundgerüst ansehen und XHTML 1.0 verwenden) - wie das Grundgerüst auszusehen hat, findest du im bereits verlinkten Artikel.

        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

        Bitte nutze in eigenem Interesse UTF-8:
        [link:http://wiki.selfhtml.org/wiki/Themen:Zeichencodierung/Webdokumente]

        <title>Test</title>
        <script type="text/javascript">

        Wenigstens das ist richtig :)

        function schreibe() {var ausgabe1 = document.formular.ein.value;

        document.getElementById('ausgabe').innerHTML = ausgabe1;

        }

        </script>

        Lass das JavaScript vorerst mal komplett weg und beschäftige dich erst damit, dein Formular zu erstellen.

        <style type="text/css">
        s1 {
        font-family: Comic;
        }
        s2 {
        font-family: Arial;
        }
        s3 {
        font-family: Monotype Corsiva;
        }

        F1 {
        color: #FF0000;
        }
        F2 {
        color: #000000;
        }
        F3 {
        color: #840000;
        }
        </style>

        Dasselbe gilt für das Stylesheet - komplett weg damit (vorerst), bis das HTML-Dokument gültig ist - sonst hat das formatieren nicht viel Sinn

        </span>

        Wo kommt das her?

        <body>
        <form name="formular">

        Das Action-Attribut fehlt.

        <input type="text" name="ein" />

        <input onclick="schreibe();" type="button" value="Eintragen" />
        </form>

        <div id="ausgabe"style="position:absolute;top:120px;left:10px;z-index:4;"  font size="5;" body bgcolor="transparent;">

        Bitte entferne hier alle Attribute - das gehört ins Stylesheet.

        </div>
        </body></font></font>

        Und das hier gehört ins restliceh Dokument an geeignete Stellen. Und die Font-Tags weg.

        <html>
        <head>

        Schriftart:
          <label>
          <select name="Schrift[]" size="1" id="Schrift">
            <option selected="Schrift">Wählen Sie die Schrift</option>
            <option>Comic</option> <
            <option>Normal</option>
            <option>Kursiv</option>

        </select>
          </label>

        <br>
              Farbe:
          <label>
          <select name="Farbe[]" size="1" id="Farbe">
            <option selected="Farbe">Wählen Sie die Farbe</option>
            <option>Rot</option>
            <option>Schwarz</option>
            <option>Braun</option>

        </select>
          </label>
          </form>

        
        > 
        
        1. @@suit:

          nuqneH

          Das ist vor allem Wichtig, weil sich dein Bezeichner dann ändern kann, der Wert aber gleich bleibt (und z.B. nur eine abstrakte Nummer sein kann). Nichts ist dämlicher als ein Tippfehler in einem Bezeichner den man später ändern muss und an 10 Stellen weiterkorrigieren darf.

          Selbstverständlich macht es auch das Übersetzen leichter.

          s.a. [qa-select-sorting]

          Empfehlenswert ist, wenn du dich an XHTML 1.0

          in der Strict-Variante

          oder an HTML5 mit XML-Syntax hältst.

          Qapla'

          --
          Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
          (Mark Twain)
          1. Morgen,
            so ich habe jetzt mal versucht alles so zumachen wie ihr mir gesagt habt.

            <head> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
            <meta charset="utf-8">  
            <title>Test</title>  
            <script type="text/javascript">  
              
            function schreibe() {var ausgabe1 = document.formular.ein.value;  
              
            document.getElementById('ausgabe').innerHTML = ausgabe1;  
              
                }  
              
              
              
            <style type="text/css">  
            s1 {  
            font-family: Comic;  
            }  
            s2 {  
            font-family: Arial;  
            }  
            s3 {  
            font-family: Monotype Corsiva;  
            }  
              
            F1 {  
            color: #FF0000;  
            }  
            F2 {  
            color: #000000;  
            }  
            F3 {  
            color: #840000;  
            }  
              
              
              
            <body>  
            <form action="formular">  
            <input type="text" name="ein" />  
              
            <input onclick="schreibe();" type="button" value="Eintragen" />  
              
              
            <div id="ausgabe"style="position:absolute;top:120px;left:10px;"  >  
              
              
              
              
              
              
                <html>  
            <head>  
            <title>Schriftart</title>  
            </head>  
            <body>  
              
              
              
            <form action="select.htm">  
              <p>Schriftart:</p>  
              <p>  
                <select name="Schrift" size="1"  
                    onchange="alert(this.form.Schrift.options[this.form.Schrift.selectedIndex].value)">  
                  <option value="?">Comic</option>  
                  <option value="?">Normal</option>  
                  <option value="?">Kursiv</option>  
              
                </select>  
              </p>  
            </form>  
              
            </body>  
            </html>    <html>  
            <head>  
            <title>Farbe</title>  
            </head>  
            <body>  
              
              
            <form action="select.htm">  
              <p>Farbe:</p>  
              <p>  
                <select name="Farbe" size="1"  
                    onchange="alert(this.form.Farbe.options[this.form.Farbe.selectedIndex].value)">  
                  <option value="?">Schwarz</option>  
                  <option value="?">Braun</option>  
                  <option value="?">Rot</option>  
              
                </select>  
              </p>  
            </form>  
              
            </body>  
            </html>  
               </div>  
            </body>  
            
            

            Und? Hab ich es einigermaßen hinbekommen?
            Danke nochmal für eure Hilfe.

            1. @@Suse:

              nuqneH

              Und? Hab ich es einigermaßen hinbekommen?

              Frag das mal den Validator.

              Oder diesen, der kann auch Deutsch und stüplt sich auch mal die SELFHTML-Mütze über.

              Qapla'

              --
              Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
              (Mark Twain)
              1. Da ist ja alles falsch :o(
                Oh man - ich gebe es bald auf *heul*

                1. @@Suse:

                  nuqneH

                  Da ist ja alles falsch :o(

                  Ach was, nicht alles.

                  Oh man - ich gebe es bald auf *heul*

                  Nicht aufgeben, richtig machen!

                  Den DOCTYPE als allererstes angeben, 'style'- und 'script'-Elemente durch End-Tags schließen, überzählige End-Tags am Ende entfernen, schon bist du einen großen Schritt weiter.

                  Qapla'

                  --
                  Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                  (Mark Twain)
                  1. Jetzt weiß ich garnicht mehr was ich alles schon irgendwie verändert habe.
                    Hier bin ich jetzt wieder gelandet ? ! ?

                    <?xml version="1.0" encoding="UTF-8"?>  
                    <!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" xml:lang="de">  
                      <head>  
                    <title>Test</title>  
                    <script type="text/javascript">  
                    </head>  
                    </script>  
                      
                    <style type="text/css">  
                    s1 {  
                    font-family: Comic;  
                    }  
                    s2 {  
                    font-family: Arial;  
                    }  
                    s3 {  
                    font-family: Monotype Corsiva;  
                    }  
                      
                    F1 {  
                    color: #FF0000;  
                    }  
                    F2 {  
                    color: #000000;  
                    }  
                    F3 {  
                    color: #840000;  
                    }  
                    </style>  
                      
                    <script type="text/javascript">  
                      
                    function schreibe() {var ausgabe1 = document.formular.ein.value;  
                      
                    document.getElementById('ausgabe').innerHTML = ausgabe1;  
                      
                        }  
                      
                    </script>  
                    </style>  
                      
                    <body>  
                    <form name="formular">  
                    <input type="text" name="ein" />  
                      
                    <input onclick="schreibe();" type="button" value="Eintragen" />  
                    </form>  
                      
                    <div id="ausgabe"style="position:absolute;top:120px;left:10px;z-index:4;" >  
                      
                    </div>  
                    </body>  
                      
                      
                    <html>  
                    <head>  
                      
                    Schriftart:  
                      <label>  
                      <select name="Schrift[]" size="1" id="Schrift">  
                        <option selected="Schrift">Wählen Sie die Schrift</option>  
                        <option>Comic</option> <  
                        <option>Normal</option>  
                        <option>Kursiv</option>  
                      
                      </select>  
                      </label>  
                      
                            <br>  
                          Farbe:  
                      <label>  
                      <select name="Farbe[]" size="1" id="Farbe">  
                        <option selected="Farbe">Wählen Sie die Farbe</option>  
                        <option>Rot</option>  
                        <option>Schwarz</option>  
                        <option>Braun</option>  
                      
                      </select>  
                      </label>  
                      </form>  
                      
                      </body>  
                    </html>  
                      
                      
                      
                      
                      
                      
                      
                    
                    
                    1. Wie bekomme ich das hin das in der Ausgabe die gewünschte Schrift und Farbe erscheinen? Vielleicht komme ich dann da ein wenig weiter.
                      Wenn ich alle codes  erstmal habe kann ich dann das ganze in Form bringen. Ist für mich wahrscheinlich einfacher.

                      1. Schriftart:
                          <label>
                          <select name="Schrift[]" size="1" id="Schrift">
                            <option selected="Schrift">Wählen Sie die Schrift</option>
                            <option>Comic</option> <

                        Hier ist ein Fehler, den solltest du eigentlich selbst finden - ohne Validator.

                        Zu spät gesehen - hab ihn rausgemacht :o)

                    2. Jetzt weiß ich garnicht mehr was ich alles schon irgendwie verändert habe.
                      Hier bin ich jetzt wieder gelandet ? ! ?

                      <?xml version="1.0" encoding="UTF-8"?>

                      Die Zeile weg, das schickt alter Internet Explorer in den Quirksmode

                      <!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" xml:lang="de">
                        <head>
                      <title>Test</title>
                      <script type="text/javascript">
                      </head>
                      </script>

                      <style type="text/css">
                      s1 {
                      font-family: Comic;
                      }
                      s2 {
                      font-family: Arial;
                      }
                      s3 {
                      font-family: Monotype Corsiva;
                      }

                      F1 {
                      color: #FF0000;
                      }
                      F2 {
                      color: #000000;
                      }
                      F3 {
                      color: #840000;
                      }
                      </style>

                      <script type="text/javascript">

                      function schreibe() {var ausgabe1 = document.formular.ein.value;

                      document.getElementById('ausgabe').innerHTML = ausgabe1;

                      }

                      </script>
                      </style>

                      <body>
                      <form name="formular">
                      <input type="text" name="ein" />

                      <input onclick="schreibe();" type="button" value="Eintragen" />
                      </form>

                      <div id="ausgabe"style="position:absolute;top:120px;left:10px;z-index:4;" >

                      </div>
                      </body>

                      <html>
                      <head>

                      Schriftart:
                        <label>
                        <select name="Schrift[]" size="1" id="Schrift">
                          <option selected="Schrift">Wählen Sie die Schrift</option>
                          <option>Comic</option> <

                      Hier ist ein Fehler, den solltest du eigentlich selbst finden - ohne Validator.

                      <option>Normal</option>
                          <option>Kursiv</option>

                      </select>
                        </label>

                      <br>
                            Farbe:
                        <label>
                        <select name="Farbe[]" size="1" id="Farbe">
                          <option selected="Farbe">Wählen Sie die Farbe</option>
                          <option>Rot</option>
                          <option>Schwarz</option>
                          <option>Braun</option>

                      </select>
                        </label>
                        </form>

                      </body>
                      </html>

                        
                      Das label-Element setzt du übrigens falsch ein. Aussehen sollte das eher so.  
                        
                      ~~~html
                         <label for="Farbe">Farbe</label>  
                         <select name="Farbe[]" size="1" id="Farbe">  
                           <option selected="selected">Wählen Sie die Farbe</option>  
                           <option>Rot</option>  
                           <option>Schwarz</option>  
                           <option>Braun</option>  
                         </select>
                      

                      1. So?

                        <!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" xml:lang="de">  
                          <head>  
                        <title>Test</title>  
                        <script type="text/javascript">  
                        </head>  
                        </script>  
                          
                        <style type="text/css">  
                        s1 {  
                        font-family: Comic;  
                        }  
                        s2 {  
                        font-family: Arial;  
                        }  
                        s3 {  
                        font-family: Monotype Corsiva;  
                        }  
                          
                        F1 {  
                        color: #FF0000;  
                        }  
                        F2 {  
                        color: #000000;  
                        }  
                        F3 {  
                        color: #840000;  
                        }  
                        </style>  
                          
                        <script type="text/javascript">  
                          
                        function schreibe() {var ausgabe1 = document.formular.ein.value;  
                          
                        document.getElementById('ausgabe').innerHTML = ausgabe1;  
                          
                            }  
                          
                        </script>  
                        </style>  
                          
                        <body>  
                        <form name="formular">  
                        <input type="text" name="ein" />  
                          
                        <input onclick="schreibe();" type="button" value="Eintragen" />  
                        </form>  
                          
                        <div id="ausgabe"style="position:absolute;top:120px;left:10px;z-index:4;" >  
                          
                        </div>  
                        </body>  
                          
                          
                        <html>  
                        <head>  
                          
                           <label for="Farbe">Schriftart</label>  
                           <select name="Farbe[]" size="1" id="Farbe">  
                             <option selected="selected">Wählen Sie die Schriftfarbe</option>  
                            <option>Comic</option> <  
                            <option>Normal</option>  
                            <option>Kursiv</option>  
                          
                          </select>  
                          </label>  
                          
                                <br>  
                          
                           <label for="Farbe">Farbe</label>  
                           <select name="Farbe[]" size="1" id="Farbe">  
                             <option selected="selected">Wählen Sie die Farbe</option>  
                             <option>Rot</option>  
                             <option>Schwarz</option>  
                             <option>Braun</option>  
                           </select>  
                          </label>  
                          </form>  
                          
                          </body>  
                        </html>
                        

                    3. @@Suse:

                      nuqneH

                      [code lang=html]<?xml version="1.0" encoding="UTF-8"?>

                      Die XML-Deklaration muss bei UTF-8 oder UTF-16 nicht vorhanden sein. Wenn vor der DOCTYPE-Angabe irgendetwas anderes steht, versetzt das ältere Browser wie IE 6 in den Quirks-Modus. Deshalb: XML-Deklaration weglassen! [XHTML1 §C.1, http://de.selfhtml.org/html/xhtml/unterschiede.htm#xml_deklaration@title=SELFHTML]

                      Die Zeichencodierung solltest du aber im Dokument per Pragma-Direktive (meta-Element) angeben. [qa-html-encoding-declarations, http://de.selfhtml.org/html/kopfdaten/meta.htm#zeichenkodierung@title=SELFHTML]

                      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

                      @xml:lang wirkt nur bei Verarbeitung als XML; das tut man XHTML-Dokumenten i.A. nicht an. Deshalb die Sprache zusätzlich auch mittels @lang-Attribut angeben! [XHTML1 §C.7, i18n-html-tech-lang, tutorial-language-decl, http://de.selfhtml.org/html/xhtml/unterschiede.htm#lang@title=SELFHTML]

                      <script type="text/javascript">
                      </head>
                      </script>

                      Unzulässige Verschachtelung.

                      <style type="text/css">
                      s1 {
                      font-family: Comic;
                      }
                      s2 {
                      font-family: Arial;
                      }
                      s3 {
                      font-family: Monotype Corsiva;
                      }

                      F1 {
                      color: #FF0000;
                      }
                      F2 {
                      color: #000000;
                      }
                      F3 {
                      color: #840000;
                      }
                      </style>

                      Das kann nichts bewirken; es gibt keine Elementtypen s1, s2, s3, F1, F2, F3.

                      <form name="formular">

                      @action-Attrubut fehlt. [http://de.selfhtml.org/html/formulare/definieren.htm@title=SELFHTML]

                      <div id="ausgabe"style="position:absolute;top:120px;left:10px;z-index:4;" >

                      Dazu hatte ich schon etwas gesagt.

                      </body>

                      <html>
                      <head>

                      Hunh??

                      Qapla'

                      --
                      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                      (Mark Twain)
                2. Da ist ja alles falsch :o(
                  Oh man - ich gebe es bald auf *heul*

                  Wie ich schon sagte: beschäftige dich vorerst nicht mit JavaScript oder CSS, das kommt "morgen"

                  Bring' dein HTML in ordnung und beginne mit dem Grundgerüst. Füge ein Stück hinzu (und nicht gleich 20 Zeilen) und jage das durch den Validator. Wenn es funktioniert, gehts weiter mit der nächsten Zeile.

                  Und natürlich zwischen drin auch immer wieder im Browser nachschauen, was denn die zusätzliche Zeile bewirkt. Ganz wichtig: wie es aussieht ist vorerst völlig egal.

                  Ein vollständiges Dokument aus dem Ärmel schütteln kann (ohne entsprechednes Vorwissen) nur fehlschlagen.

            2. Om nah hoo pez nyeetz, Suse!

              Und? Hab ich es einigermaßen hinbekommen?

              nein. Dein HTML ist kaputt.

              Grundgerüst

              Matthias

              --
              1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
              1. Om nah hoo pez nyeetz, Suse!

                Und? Hab ich es einigermaßen hinbekommen?

                nein. Dein HTML ist kaputt.

                Grundgerüst

                Matthias

                ahhh
                Kaputt!!! - oh Nein *heul*

            3. Hallo,

              so ich habe jetzt mal versucht alles so zumachen wie ihr mir gesagt habt.

              dann hast du entweder manches noch nicht verstanden, oder warst nicht sorgfältig.

              <head> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

              Der DOCTYPE gehört ganz an den Dokumentanfang! Davor hat nichts zu stehen.
              Ob man ihn in einer Zeile zusammenhängend schreibt, oder auf zwei Zeilen splittet, ist Geschmackssache; ich bevorzuge die Schreibung in *einer* Zeile.

              Das head-Element beginnst du schon, ohne vorher das html-Element zu öffnen.

              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
              <meta charset="utf-8">

              Diese Elemente sind nicht geschlossen. Du gibst im DOCTYPE an, dass du XHTML schreibst; dann musst du aber auch leere Elemente schließen, etwa mit der Kurzschreibweise <element />.

              <title>Test</title>
              <script type="text/javascript">

              function schreibe() {var ausgabe1 = document.formular.ein.value;

              document.getElementById('ausgabe').innerHTML = ausgabe1;

              }

              <style type="text/css">

              Fehler: Das End-Tag des script-Elements fehlt.

              F3 {
              color: #840000;
              }

              <body>

              Fehler: Das End-Tag des style-Elements fehlt. Das des umschließenden head-Elements auch.

              <form action="formular">
              <input type="text" name="ein" />

              Hier sind die leeren Elemente (input) korrekt geschlossen. Allerdings darf inline-Inhalt wie Text oder Formularelemente in den Strict-Varianten nicht direkt als Kind von form auftreten, du brauchst ein Blockelement außenrum. Das kann ein p, ein div, oder vorzugsweise ein fieldset sein.

              <div id="ausgabe"style="position:absolute;top:120px;left:10px;"  >

              <html>

              Dem div-Element fehlt auch wieder das End-Tag. Dafür fängst hier plötzlich dein html-Element an, was eigentlich ganz am Anfang hätte sein sollen.

              <head>
              <title>Schriftart</title>
              </head>
              <body>

              Und dann nochmal ein head-Element? Cheatah hat das mit "Zweiköpfiger Oger" treffend auf den Punkt gebracht.

              <form action="select.htm">
                <p>Schriftart:</p>
                <p>
                  <select name="Schrift" size="1"
                      onchange="alert(this.form.Schrift.options[this.form.Schrift.selectedIndex].value)">
                    <option value="?">Comic</option>
                    <option value="?">Normal</option>
                    <option value="?">Kursiv</option>

              </select>
                </p>
              </form>

              Warum haben die option-Elemente alle denselben Wert? Erlaubt ist das, sinnvoll eher nicht.

              </body>
              </html>

              So, hier ist body zu Ende, und das HTML-Dokument zu Ende. Danach dürfte eigentlich nichts mehr kommen; wenn doch, sollte ein Browser das ignorieren.

              <html>
              <head>
              <title>Farbe</title>
              </head>
              <body>

              Aber juchhe, da kommt *nochmal* ein komplettes Dokument mit html-Element, head und body. Nee, oder?

              </div>
              </body>

              Au weia, ist das hier noch das verlorene End-Tag des div-Elements, das du ganz oben mal geöffnet hast?

              Und? Hab ich es einigermaßen hinbekommen?

              Du scheinst keinen Blick dafür zu haben, wie die Elemente verschachtelt sein müssen bzw. dürfen.

              So long,
               Martin

              --
              Lebensmotto der Egoisten:
              Was ist so schlimm daran, dass jeder nur an sich selbst denkt? Dann ist doch an alle gedacht!
              Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        2. Om nah hoo pez nyeetz, suit!

          Besser - aber immer noch perfekt.

          Ein Fall für die Zitatesammlung. Ich stell mir gerade vor, dass sich die Entwickler des IE7 so über ihr Werk geäußert haben.

          Matthias

          --
          1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
      2. @@Suse:

        nuqneH

        Wo zur Hölle hast Du diese Attribute her?
        Irgendwo hier im selfhtml gefunden :o) Warum? Ist das etwa so schlimm? :o) Ich dachte das wäre so okay, weil es ja auch funzt.

        Das hast du nur der Gutmütigkeit einiger(?) Browser zu verdanken. Verlassen solltest du dich darauf nicht, denn …

        <div id="ausgabe"style="position:absolute;top:120px;left:10px;z-index:4;"  font size="5;" body bgcolor="transparent;">


        Zwischen zwei Attributen muss ein Leerzeichen (o.a. Whitespace) stehen. Es gibt in HTML kein @font-Attribut, auch kein @body-Attribut. Für 'div'-Elemente gibt es auch weder @size noch @bgcolor. (Übrigens wären deren Werte wegen der Semikolons auch falsch.)

        Und natürlich solltest du – wie suit schon sagte – sämtliche Darstellungsangaben aus dem Markup (HTML) entfernen und per CSS im Stylesheet tätigen.

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)