Verständnisfrage zu Listen-Blöcke

[probleme]

Hier habt ihr mal einen kleinen Code:

  
<ul style="list-style:none;padding:0;margin:0">  
 <li style="display:inline;background-color:yellow;background-color:red">  
  Hallo  
  <p>  
  Tschüss  
 </li>  
</ul>  

Warum ist "Tschüss" ausserhalb der li-box??? Ich blick einfach nicht durch. Scheinbar zerstöre ich mit einem <p> das komplette Listen-Element.

[Michi]

Hallo,

Warum ist "Tschüss" ausserhalb der li-box??? Ich blick einfach nicht durch. Scheinbar zerstöre ich mit einem <p> das komplette Listen-Element.

Zunächst solltest Du einen Blick auf das werfen: http://de.selfhtml.org/html/referenz/elemente.htm#li. Ferner solltest Du in Erwägung ziehen Deine öffnenden Elemente auch wieder zu schließen (</p>), wenn Du sauberes HTML schreiben willst. Sauberes HTML funktioniert dann auch so wie es soll und ob es wirklich sauber ist kannst Du dann schnell und einfach hier prüfen: <validator.w3.org>.

Viele Grüße

Michi

[probleme]

Das verstehe ich aber jetzt nicht.

Laut http://de.selfhtml.org/html/referenz/elemente.htm#li darf <li> Block,- und Inline-Elemente enthalten. P ist aber ein Block-Element!!

[Marc]

Hallo zusammen,

Das verstehe ich aber jetzt nicht.

Laut http://de.selfhtml.org/html/referenz/elemente.htm#li darf <li> Block,- und Inline-Elemente enthalten. P ist aber ein Block-Element!!

Das hat dir ein früherer Poster auch schon gesagt. Und dass es validiert, hast du selber schon rausgefunden? Was also verstehst Du nicht?

Schließe Deine Elemente und wenn Du in ein <li></li> ein <p style="display:inline"></p> packst, sollte es auch gehen.

Hinweise darauf haben Dir hier schon einige gegeben (z. B. wahsaga)...

Du solltest Dir schon ein wenig mehr Mühe geben, wenn es gut werden soll!

ich hoffe, in der endgültigen Version benutzt Du keine inline-Styles...

Viele Grüße,
Marc.

[Probleme]

Sorry wenn ich etwas schwer von Begriff bin.
Aber ich verstehe einfach nicht, warum er im unten genannten Beispiel das inline nicht darstellt, stattdessen sich wie display:block verhält und immer wenn ich ein <div> innerhalb von <li> verwende, eine neue Zeile beginnt.

  
<ul style="list-style:none;padding:0;margin:0">  
 <li style="display:inline;background-color:yellow;background-color:red">  
  <div>Hallo</div>  
 </li>  
 <li style="display:inline;background-color:yellow;background-color:red">  
  <div>hallo2</div>  
 </li>  
</ul>  

anstatt nebeneinander, werden die blöden div's untereinander dargestellt.

[Der Martin]

Hallo,

Sorry wenn ich etwas schwer von Begriff bin.

also nochmal langsam zum Mitdenken. ;-)
Du hast die Struktur

<ul>
  <li>
   <div></div>
  </li>
 </ul>

Der HTML-Validator kümmert sich nicht um die CSS-Angaben, er sieht nur eine Verschachtelung aus lauter Block-Elementen. Das findet er in Ordnung.

Nun machst du mit CSS das li zum inline-Element, aber das div darin ist immer noch ein Block-Element. Von der Philosophie her ist das eine nicht erlaubte Schachtelung, obwohl sie streng formal erlaubt ist. Aber das div-Element erzeugt hier auf jeden Fall einen Block, und ich vermute, dass der Browser damit das umgebende li-Element implizit auch wieder zum Block-Element macht, weil er nicht anders kann.

Anders gesagt: Eine Plastiktüte (inline) hat keine eigene, stabile Form, du kannst sie durch eine dünne Öffnung quetschen. Steckst du aber jetzt einen Karton (Block) hinein, nimmt auch die Tüte die Eigenschaften, zumindest die Form und Stabilität, des Kartons an.

So long,
 Martin

[Christoph Schnauß]

hallo,

Warum ist "Tschüss" ausserhalb der li-box?

Weil du ein <p> davorgesetzt hast. Das ist ebenfalls, genauso wie <li>, ein Blockelement, das seinen eigenen Absatz erzeugt. Laß das weg, oder formatiere einen Zwischenraum mit CSS, falls der dir so wichtig ist.

Scheinbar zerstöre ich mit einem <p> das komplette Listen-Element.

"Zerstören" kannst du es nicht. Aber da du Blockelemente nicht ineinander verschachteln kannst und <li> als eines der sehr wenigen HTML-Elemente nicht unbedingt "geschlossen" werden muß, reagieren die Browser so, als sei deine Liste nunmehr beendet und als fange darunter nun ein neuer Absatz an.

Grüße aus Berlin

Christoph S.

[Joachim]

Hi,

Aber da du Blockelemente nicht ineinander verschachteln kannst...

Hmm. p in Div ist ok, p in li ebenso, zumindestens laut w3c-validator. Sein Problem dürfte eher das nicht abgeschlossene p sein.

Gruesse, Joachim

[Probleme]

Hmm. p in Div ist ok, p in li ebenso, zumindestens laut w3c-validator. Sein Problem dürfte eher das nicht abgeschlossene p sein.

Gruesse, Joachim

Nein,

das Problenm hat etwas mit display:inline zu tun!

  
<ul style="list-style:none;padding:0;margin:0">  
 <li style="display:inline;background-color:yellow;background-color:red">  
  Name<p>Thomas</p>  
 </li>  
 <li style="display:inline;background-color:yellow;background-color:red">  
  Name<p>Thomas</p>  
 </li>  
</ul>  

das liegt nur an display:inline !
Kann es vielleicht daran liegen, dass display:inline den Listenblock zu einem Listen-Inline-Block macht, der dann kein normaler Block mehr ist?
In diesem Fall wäre das li dann doch theoretisch vergleichbar mit <span>, <b> usw. innerhalb denen man ja auch keine Blöcke darstellen kann.

[Joachim]

Hi,

das Problenm hat etwas mit display:inline zu tun!

scheint mir ein seltsamer Ansatz, eher ein Fall für float. Du kannst auch sowas mal testen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<style type="text/css">
    li {display: inline;}
</style>
</head>
<body>
    <ul>
        <li>
            <div style="float:left; border: 1px solid red;">
            <p>erster Absatz</p>
            <p>zweiter Absatz</p>
            <p>dritter Teil</p>
            </div>
        </li>
        <li>lala</li>
        <li>lulu</li>
    </ul>
</body>
</html>

Gruesse, Joachim

[Probleme]

Darauf bin ich auch schon gekommen.
Aber das beantwortet nicht die Frage, _warum_ es mit display:inline im Listenblock nicht möglich ist.
Ich fühle mich in meiner These noch nicht bestätigt, als dass der Listenblock durch display:inline zu einem Inlineblock wird.

[Marc]

Hallo zusammen,

Aber da du Blockelemente nicht ineinander verschachteln kannst...
Hmm. p in Div ist ok, p in li ebenso, zumindestens laut w3c-validator. Sein Problem dürfte eher das nicht abgeschlossene p sein.

Natürlich dürfen Block-Element in Block-Elementen stehen - aber nicht innerhalb von inline-Elementen.

Dass Du das li mittels CSS in ein inline-Elememt umwandelst, merkt der HTML-Validator natürlich nicht.

Dass man ALLE Elemente schließen soll, dürfte sich außerdem inzwischen bis in die letzten Ecken der Republik rumgesprochen haben. Einiziger Grund das nicht zu tun wäre Faulheit. Und die ist nie ein guter Ratgeber...

Viele Grüße,
Marc.

[wahsaga]

hi,

Natürlich dürfen Block-Element in Block-Elementen stehen - aber nicht innerhalb von inline-Elementen.

Dass Du das li mittels CSS in ein inline-Elememt umwandelst, merkt der HTML-Validator natürlich nicht.

Und selbst wenn, wäre es ihm herzlich egal.
display wandelt die HTML-Klassifizierung eines Elementes als Block, Inline, ... nicht um, sondern beeinflusst lediglich die Darstellung.

gruß,
wahsaga

[Joachim]

Hi,

Dass Du das li mittels CSS in ein inline-Elememt umwandelst, merkt der HTML-Validator natürlich nicht.

hat Wahsaga bereits kommentiert...

Dass man ALLE Elemente schließen soll, dürfte sich außerdem inzwischen bis in die letzten Ecken der Republik rumgesprochen haben.

Das ist wünschenswert aber - zumindestens bei 4.0.1 - nicht bei allen Elementen erforderlich. Ein nicht abgeschlossenes li erzeugt dementsprechend keine Fehldarstellung, ein p hingegen unbedingt.

Gruesse, Joachim

[Marc]

Hallo zusammen,

Das ist wünschenswert aber - zumindestens bei 4.0.1 - nicht bei allen Elementen erforderlich. Ein nicht abgeschlossenes li erzeugt dementsprechend keine Fehldarstellung, ein p hingegen unbedingt.

In Fließtexten ist ein nicht geschlossenes p (gefolgt z. B. von einem hx oder p oder ul) überhaupt kein Problem...

Trotzdem: es nicht zu schließen ist unverständlich. Zumal es Editoren gibt, die das automatisch tun...

Viele Grüße,
Marc.

[Probleme]

Und wie soll dieser Zwischenraum aussehen?

  
<ul style="list-style:none;padding:0;margin:0">  
 <li style="background-color:yellow;background-color:red">  
  <div>Name<p>Thomas</div>  
 </li>  
 <li style="background-color:yellow;background-color:red">  
  <div>Alter<p>18</div>  
 </li>  
</ul>  

Außerdem schreibt er die Listenblöcke untereinander, anstatt wie mit display:inline erwünscht, nebeneinander.

[wahsaga]

hi,

Außerdem schreibt er die Listenblöcke untereinander, anstatt wie mit display:inline erwünscht, nebeneinander.

Natürlich - weil darin ja immer noch ein Element liegt, welches als Block dargestellt wird (Div oder im Eingangsbeispiel P).

gruß,
wahsaga