Wiesel: Warum die Meldung: Warnung: inserting implicit <p>

Hallo,
im folgenden abgespeckten Beispiel kommen die Warnungen:

line 12 column 1 - Warnung: inserting implicit <p>
line 12 column 1 - Warnung: trimming empty <p>

Warum?

Beispiel:

1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2: <html>
 3: <head>
 4:  <title>..........</title>
 5: </head>
 6: <body>
 7: <div id="Inhalt">
 8: <p>
 9: <img id="Bild" src="http://www.example.com/bilder/bild.jpg" width="400" height="300" alt=" ">
10: <div id="Titel">Bildtitel (rechts vom Bild)</div>
11: <div id="Text">Zeile1 (rechts vom Bild)<br>Zeile2 (rechts vom Bild)</div>
12: </p>
13: <h3 style="font-size:1.5em;color:red;clear:right;margin-top:0;">Ueb3 (Unter dem Bild)</h3>
14: <h4>Ueb4</h4>
15: </div>
16: </body>
17: </html>

  1. Hi,

    8: <p>
    9: <img id="Bild" src="http://www.example.com/bilder/bild.jpg" width="400" height="300" alt=" ">
    10: <div id="Titel">Bildtitel (rechts vom Bild)</div>

    P darf keine weiteren Block-Elemente enthalten, also wird es vor diesem Div implizit geschlossen

    12: </p>

    Da der Absatz bereits implizit wieder beendet wurde, hat dieses schliessende P kein oeffnendes mehr.

    MfG ChrisB

    --
    „This is the author's opinion, not necessarily that of Starbucks.“
    1. Hallo ChrisB,
      danke für die schnelle Antwort.
      Im Original standen die Texte
      10: <div id="Titel">Bildtitel (rechts vom Bild)</div>
      11: <div id="Text">Zeile1 (rechts vom Bild)<br>Zeile2 (rechts vom Bild)</div>
      rechts vom Bild.
      Allerdings auch der Text von
      13: <h3 style="font-size:1.5em;color:red;clear:right;margin-top:0;">Ueb3 (Unter dem Bild)</h3>.
      Wobei ich dachte, dass <H3> automatisch in neuer Zeile beginnt.
      Nachdem ich dann die <p>   </p eingefügt hatte rutschte der h3-Text wie gewünscht unter das Bild - allerdings jetzt mit den Warnungen.
      Wie kann ich anders erreichen, dass folgendes herauskommt?
      ...........
      .         .   Text1
      .  Bild   .   Text2
      .         .
      ...........

      H3-Überschrift

      Ich hoffe, dass obiges verständlich war?
      Gruß
      Wiesel

      1. Hi,

        Wie kann ich anders erreichen, dass folgendes herauskommt?
        ...........
        .         .   Text1
        .  Bild   .   Text2
        .         .
        ...........

        H3-Überschrift

        Informiere dich ueber floats "Gegenstueck" clear.

        MfG ChrisB

        --
        „This is the author's opinion, not necessarily that of Starbucks.“
        1. Hi,

          Informiere dich ueber floats "Gegenstueck" clear.

          Ach so, clear hattest du fuer H3 ja schon. Aber wenn du das Bild nach links floatest, war das clear natuerlich in die falsche "Richtung".

          MfG ChrisB

          --
          „This is the author's opinion, not necessarily that of Starbucks.“
          1. Danke!!!!!!!!!!!!

          2. Hallo ChrisB,
            ich habe zu früh gejubelt.
            Wenn ich clear:left angebe, rutscht die Zeile zwar unter das Bild, aber leider viel zu weit.
            Nachdem ich um die einzelnen Elemente Rahmen gelegt habe, bin auch auf folgende Ursache gestoßen.
            In der Datei (Beispiel unten) wird bei
              #Navigation und bei img#Bild1 jeweils float:left angegeben.
            Durch das clear:left (am Ende des Beispiels) rutscht der Text "Demnächst hier" nicht direkt unter das Bild, wie ich angenommen hatte, sondern unter das mit Navigation definierte Element.

            Wie kann ich erreichen, dass sich das clear nur auf das letzte float bezieht?
            Gruß
            Wiesel

              
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
            <html>  
            <head>  
            <title>Test</title>  
            <style type="text/css">  
              #Navigation {  
                                                                     float:left;  
                width:220px;  
              
            border-style:dashed;border-color:red;border-width:2px;  
              
              }  
              
              #Inhalt {  
                margin-left:240px; margin-top:0;  
              
            border-style:dashed;border-color:green;border-width:2px;  
              
              }  
              
              img#Bild1 {  
                                                                     float: left;  
                width:400px;  
                height:300px;  
              
            border-style:dotted;border-color:gray;border-width:1px;  
              
              }  
              div#Titel {  
                margin-left: 440px;  
              }  
              div#Text {  
                margin-left: 440px;  
              }  
            </style>  
            </head>  
            <body>  
            <div id="Navigation">  
            <ul>  
              <li>Aktuelle Informationen</li>  
              <li>----1-------</li>  
              <li>----2-------</li>  
              <li>----3-------</li>  
              <li>----4-------</li>  
              <li>----5-------</li>  
              <li>----6-------</li>  
              <li>----7-------</li>  
              <li>----8-------</li>  
              <li>----9-------</li>  
              <li>---10-------</li>  
              <li>---11-------</li>  
              <li>---12-------</li>  
              <li>---13-------</li>  
              <li>---14-------</li>  
              <li>---15-------</li>  
              <li>---16-------</li>  
              <li>---17-------</li>  
              <li>---18-------</li>  
              <li>---19-------</li>  
              <li>---20-------</li>  
              <li>---21-------</li>  
              <li>---22-------</li>  
              <li>---23-------</li>  
              <li>---24-------</li>  
              <li>---25-------</li>  
              <li>---26-------</li>  
              <li>---27-------</li>  
              <li>---28-------</li>  
              <li>---29-------</li>  
              <li>---30-------</li>  
              <li>---31-------</li>  
              <li>---32-------</li>  
              <li>---33-------</li>  
              <li>---34-------</li>  
              <li>---35-------</li>  
              <li>---36-------</li>  
              <li>---37-------</li>  
              <li>---38-------</li>  
              <li>---39-------</li>  
              
            </div>  
            <div id="header">  
            <div id="Inhalt">  
            <img id="Bild1" src="http://www.example.com/bild1.jpg" alt="Bild1">  
            <div id="Titel">Bildüberschrift</div>  
            <div id="Text">Bildtext1<br>Bildtext2<br>Bildtext3</div>  
              
            <h3 style="clear:left;">Demnächst hier!</h3>  
              
            </div>  
            </body>  
            </html>  
            
            
            1. Hi,

              Wie kann ich erreichen, dass sich das clear nur auf das letzte float bezieht?

              Stichwort: Block Formatting Context

              MfG ChrisB

              --
              „This is the author's opinion, not necessarily that of Starbucks.“
  2. [latex]Mae  govannen![/latex]

    8: <p>
    9: <img id="Bild" src="http://www.example.com/bilder/bild.jpg" width="400" height="300" alt=" ">
    10: <div id="Titel">Bildtitel (rechts vom Bild)</div>
    11: <div id="Text">Zeile1 (rechts vom Bild)<br>Zeile2 (rechts vom Bild)</div>
    12: </p>

    div darf nicht in p verschachtelt sein->Kindelemente

    Cü,

    Kai

    --
    Ash nazg durbatulûk, ash nazg gimbatul,ash nazg thrakatulûk, agh burzum-ishi krimpatul
    selfcode sh:( fo:| ch:? rl:( br:< n4:# ie:{ mo:| va:) js:) de:> zu:) fl:( ss:| ls:?
    Mein Selfhtml-Kram
    1. @@Kai345:

      div darf nicht in p verschachtelt sein->Kindelemente

      Ist es ja auch nicht. Die 'div'-Elemente sind Geschwister des 'p'-Elements.

      Falls der OP beabsichtigte, 'div' in 'p' zu schachteln, ist das mal wieder ein Paradebeispiel für die Vorzüge von XHTML 1.0 gegenüber HTML 4.01. Der XHTML-Validator hätte den Fehler aufgedeckt.

      Live long and prosper,
      Gunnar

      --
      Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)