Aufzählungspunkte Tabulator

  • Hi, ich habe eine Frage zu meinem Code. Ich würde es gerne so machen, dass der Text unter dem Aufzählungspunkt, also "You never need to..." auf einer Linie mit dem Text hinter dem Aufzählungspunkt anfängt. Aktuell orientiert dieser sich leider am Punkt.

    <blockquote>, <pre>, &nbsp; haben leider nichts gebracht.

    Weiß jemand vielleicht einen Rat?




    <ul class="red-triangle">


    <li><strong>Automatic Built-In Die-Cutting</strong></li>

    <p>You never need to order custom die-cut media again. Just print and cut labels on your own, with one printer!</p>

    </ul>

  • Zunächst mal ist dieses HTML nicht valide. Der Validator sagt dazu:

    Zitat

    Error: Element p not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

    Als Kindelemente von ul sind nur li zulässig.


    Dann verstehe ich nicht richtig, was deine Absicht ist, wenn Du schreibst:

    Zitat

    Ich würde es gerne so machen, dass der Text unter dem Aufzählungspunkt, also "You never need to..." auf einer Linie mit dem Text hinter dem Aufzählungspunkt anfängt.

  • Zunächst mal ist dieses HTML nicht valide. Der Validator sagt dazu:

    Als Kindelemente von ul sind nur li zulässig.


    Dann verstehe ich nicht richtig, was deine Absicht ist, wenn Du schreibst:

    Hi, danke für den Tipp.

    Ich beabsichtige, dass beide Texte auf einer vertikalen Linie beginnen. Aktuell beginnt der Text "You never need to.." auf einer Linie mit dem red triangle.

  • Verstehe. Dein Code, so wie er ist, wird bei mir im Opera so dargestellt, wie Du es vorhast: Beide Texte links ausgerichtet. Es kann aber sein, dass andere Browser es anders machen.


    Ich schlage vor, das p-Element in das li hinein zu nehmen, so:

    Code
        <ul class="red-triangle">
            <li><strong>Automatic Built-In Die-Cutting</strong>
                <p>You never need to order custom die-cut media again. Just print and cut labels on your own, with one
                    printer!
                </p>
            </li>
        </ul>

    Dann ist es valide und wird wahrscheinlich so dargestellt, wie Du es möchtest.

  • Verstehe. Dein Code, so wie er ist, wird bei mir im Opera so dargestellt, wie Du es vorhast: Beide Texte links ausgerichtet. Es kann aber sein, dass andere Browser es anders machen.


    Ich schlage vor, das p-Element in das li hinein zu nehmen, so:

    Code
        <ul class="red-triangle">
            <li><strong>Automatic Built-In Die-Cutting</strong>
                <p>You never need to order custom die-cut media again. Just print and cut labels on your own, with one
                    printer!
                </p>
            </li>
        </ul>

    Dann ist es valide und wird wahrscheinlich so dargestellt, wie Du es möchtest.

    Vielen Dank für die Hilfe, allerdings hatte es am Ende keine Auswirkungen..

  • Für so eine Auflistung ist das dl-Element mit seinen Kindelementen dt und dd gedacht, eine ul-Liste ist nach den HTML-Regeln falsch.


    Zu dem HTML


    Code
    <dl class="red-triangle">
       <dt>Automatic Built-In Die-Cutting</dt>
       <dd>You never need to order custom die-cut media again. Just print and cut labels on your own, with one printer!</dd>
       <dt>Best Print Quality</dt>
       <dd>Produce professional-quality labels up to 4800 dpi.</dd>
       <dt>Software included</dt>
       <dd>eady for importing images and cutting a variety of label shapes.</dd>
       <dt>Wide Variety of Substrates</dt>
       <dd>Gloss or matte paper, polyester or even magnetic media is available. You can also easily change from dye to pigment ink.</dd>
    </dl>


    zum Beispiel das CSS



    Abstände, Größen und so weiter müssen natürlich noch deinen Vorstellungen und deiner Seite angepasst werden.

  • Die li-Elemente von ol- und ul-Listen sind für gleichartige / gleichwertige Einträge gedacht. Nicht für Informationen und Beschreibungen dazu.


    Dafür gibt es (übrigens bereits auf der allerersten Webseite der Welt) das dl-Element. Da der Einsatz des dl-Elements zu Zeiten von HTML4 häufig (auch damals schon) falsch gelehrt wurde, ist die vielfältige Verwendung in den HTML5-Regeln ausdrücklich klargestellt worden.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!