Element ul - inkl. einrücken - Probleme bei der Darstellung

[Mark]

Hallo Experten,

ich habe in meinem Text Aufzählungszeichen mit dem Element "ul" integriert. Dies funktioniert auch super, wenn das Browserfenster kleiner gemacht wird, sprich die Aufzählung wird dynamisch dargestellt.

Sobald ich aber das Ganze einrücke, funktioniert die Dynamik, wenn ich das Browserfenster kleiner mache, nicht mehr.

Ich würde gern das dynamische mit eingerückten Text haben 😀

Bilder siehe Anhang.

Vielen DANK schon mal!

Gruß Mark

CODE und DARSTELLUNG:

Ohne Einrücken - beim Spiegelstrich 4 wird das Wort Onlineportal korrekt platziert.

Code:

<div class="container-fluid bg-warning">
<h3>Ansprechpartner</h3>
<p>
<b><a class="homeLink" href="#" onclick="javascript:window.open('https://www.XXXX.de/fuer-partner/ansprechpartner-onlineportal/');">Hier</a>
</b> finden Sie Ihren Anprechpartner

<ul>
<li>für Fragen zur Bedienung,
<li>für Fragen zu einzelnen Vorgängen
<li>für die Terminvereinarung,
<li>bei technischen Problemen mit dem Onlineportal
<li>für Fragen zu Ihrer Registrierung
</ul>

</p>
</div>

Mit Einrücken - beim Spiegelstrich 4 wird das Wort Onlineportal aber nicht mehr korrekt platziert.

Code:

<div class="container-fluid bg-warning">
<h3>Ansprechpartner</h3>
<p>
<b><a class="homeLink" href="#" onclick="javascript:window.open('https://www.XXXX.de/fuer-partner/ansprechpartner-onlineportal/');">Hier</a>
</b> finden Sie Ihren Anprechpartner

<div style="text-indent:10px;"
<ul>
<li>für Fragen zur Bedienung
<li>für Fragen zu einzelnen Vorgängen
<li>für die Terminvereinarung
<li>bei technischen Problemen mit dem Onlineportal
<li>für Fragen zu Ihrer Registrierung
</ul>

</div>


</p>
</div>

[Raketenwilli]

text-indent ist "vererbbar".

Insoweit ist das Verhalten erwartbar. Willst Du das anders musst Du das text-indent für Deine li wieder herstellen.

Hint: Maßangaben in „px“ sind (regelmäßig) kontraproduktiv. Informiere Dich, welche Vorteile Dir „em“ oder besser „rem“ als Maßangabe bietet.

[Rolf B]

Hallo Mark,

• ein <div muss mit einem > beendet werden
• ein <li> muss mit einem </li> beendet werden
• ein <p> darf nur bestimmte Inhaltselemente enthalten, nämlich "phrasing content" - was wir im Wiki mangels besserer Ideen mit "Stil-Elementen" übersetzt haben. div und ul sind Flow Content und kein Phrasing Content. Deswegen beendet der Browser das <p> Element automatisch vor dem Einrückungs-div, bzw. vor dem ul.
• text-indent rückt Text ein, nicht die Listenpunkte. Ist das deine Absicht?
• text-indent rückt nur die erste Zeile ein, nicht den kompletten Abschnitt.

Wenn Du die ganze Liste nach rechts schieben willst, lass das div weg und gib dem ul Element einen margin-left, oder erhöhe das padding-left, das der Browser bereits setzt. Der Unterschied zwischen margin und padding ist relevant, wenn die Liste einen Rahmen oder eine Hintergrundfarbe hat. margin schiebt alles, padding lässt den linken Rand (und damit den linken Abschluss von Rahmen oder Hintergrund) gleich und schiebt nur die Listenpunkte ein.

Rolf

[Raketenwilli]

Hallo Mark,

• ein <li> muss mit einem </li> beendet werden

Muss es nicht. Aber besser ist es

[Rolf B]

Hallo Raketenwilli,

ja gut, stimmt. Weil <li> nicht direkt geschachtelt werden kann, beendet ein <li> das vorige <li> automatisch.

Rolf

[Raketenwilli]

Jetzt hast Du verhindert, dass ich erkläre, warum es besser ist, <li>-zu beenden.

Also wenn die ListenItems durch ein Programm (z.B. PHP) eingefügt werden weiß der Programmierer nicht genau, was danach kommt. (Auch wenn das hier theoretisch klar sein sollte: Nur <li> oder </ul>, </ol> kommen nach der HTML-Spec in Frage.

Hat man das Listenelement sauber mit </li> beendet ist man auf der sicheren Seite.

[Gunnar Bittersmann]

@@Raketenwilli

Auch wenn das hier theoretisch klar sein sollte: Nur <li> oder </ul>, </ol> kommen nach der HTML-Spec in Frage.

Nein. Wenn du die HTML-Spec erwähnst, solltest du auch in die HTML-Spec reinschauen.

Die besagt, dass auch <script> und <template> infragekommen.

Nachtrag: Steht ja auch auf der von dir verlinkten Seite: Der Inhalt […] kann daher veraltet sein.“ Die englische Seite ist aktuell.

😷 LLAP

[Rolf B]

Hallo Gunnar und Raketenwilli,

wir meinen ja alle das gleiche, aber...

Hinter einem <li> Element (also dem </li> Tag) darf nur Whitespace, Kommentar, ein neues <li>, <script> oder <template> Tag kommen oder die Liste geschlossen werden, aber hinter dem <li> Tag kann theoretisch und praktisch fast der ganze HTML Elementzoo herumkreuchen und -fleuchen, weil ein <li> Flow Content enthalten darf.

Deswegen kann der Browser ein <li> erst dann automagisch schließen, wenn er ein neues <li> antrifft (es sei denn, in einer geschachtelten Liste) oder - hm, wie formuliert man das - ein Ende-Tag findet, dessen matchendes Start-Tag vor dem <li> Tag steht. Es dürfte wenig Spaß machen, die Parser-Regeln dafür zu formulieren.

Rolf

[Der Martin]

Hallo Mark,

eine Bitte vorab: Wenn du hier im Forum Code-Auszüge postest, dann zeichne sie bitte auch als Code aus (dazu ist der Button </> über dem Eingabefeld da). Optional sogar mit Angabe der Sprache nach dem einleitenden ~~~. Dann wird der Abschnitt auch sauber als Code und mit Syntax-Highlighting formatiert.
Ich habe das mal für dich repariert.

ich habe in meinem Text Aufzählungszeichen mit dem Element "ul" integriert. Dies funktioniert auch super, wenn das Browserfenster kleiner gemacht wird, sprich die Aufzählung wird dynamisch dargestellt.

Sobald ich aber das Ganze einrücke, funktioniert die Dynamik, wenn ich das Browserfenster kleiner mache, nicht mehr.

Textblöcke einrücken kann man auf unterschiedliche Art und Weise. Du hast hier die für deinen Fall ungünstigste gewählt.

<div class="container-fluid bg-warning">
<h3>Ansprechpartner</h3>
<p>
<b><a class="homeLink" href="#" onclick="javascript:window.open('https://www.XXXX.de/fuer-partner/ansprechpartner-onlineportal/');">Hier</a>
</b> finden Sie Ihren Anprechpartner

<div style="text-indent:10px;"
<ul>
<li>für Fragen zur Bedienung
<li>für Fragen zu einzelnen Vorgängen
<li>für die Terminvereinarung
<li>bei technischen Problemen mit dem Onlineportal
<li>für Fragen zu Ihrer Registrierung
</ul>

</div>


</p>
</div>

Nehmen wir mal an, die fehlende spitze Klammer beim öffnenden div-Tag ist ein Copy&Paste-Fehler. Der Knackpunkt ist, dass die Eigenschaft text-indent an Kindelemente vererbst wird. Damit bekommen das ul und die li-Elemente in deinem Codebeispiel auch alle text-indent: 10px. Eigentlich hätten ul und/oder li aber einen anderen Wert für text-indent durch das browserinterne Stylesheet bekommen, mit dem die korrekte Einrückung der Listenpunkte realisiert wird. Das machst du damit kaputt.

Eine alternative Möglichkeit, die gesamte Liste einzurücken, wäre zum Beispiel margin-left für das ul-Element. Dann brauchst du auch kein zusätzliches, ansonsten nutzloses Containerelement.

Möge der Kaffee gut und der Montag kurz sein
 Martin

[Tabellenkalk]

Hallo,

Der Knackpunkt ist, dass die Eigenschaft text-indent an Kindelemente vererbst wird.

liebe Grüße an Woyzeck!

Gruß
Kalk

[Der Martin]

Hi,

Der Knackpunkt ist, dass die Eigenschaft text-indent an Kindelemente vererbst wird.

liebe Grüße an Woyzeck!

um das zu verstehen, fehlen mir wohl literarische Kenntnisse, die ich gerade nur ansatzweise auffüllen konnte. Aber ich ahne, was du meinst.

Möge der Kaffee gut und der Montag kurz sein
 Martin

[Tabellenkalk]

Hallo,

Der Knackpunkt ist, dass die Eigenschaft text-indent an Kindelemente vererbst wird.

liebe Grüße an Woyzeck!

um das zu verstehen, ...

... hab ich im Zitat die Stelle kenntlich gemacht.

Gruß
Kalk