Mary: "hängender" Einzug durch span-Element mit neg. margin??

SELF-Forum

"hängender" Einzug durch span-Element mit neg. margin??

Mary
– Informationen zu den Bewertungsregeln

Hallo!

Folgendes Problem: Ich möchte Spalten mit span-Elementen imitieren (für eine hierarchische Nummerierung mit "hängendem" Einzug).
Siehe hier:
http://www.uni-regensburg.de/Fakultaeten/phil_Fak_IV/Anglistik/SpW/Staff/Schneider/publications-test-mit-css.htm

In Mozilla und Netscape sieht es so aus, wie ich mir das vorstelle, aber im IE ist alles nach links verschoben.

WARUM??

Cheers,
Mary

Relevanter CSS-Ausschnitt:
.p-publications {margin-left:50px; margin-top:12px; font-size:14px; padding:0}
.span-number {display:block; float:left; margin-left:-50px; width:50px; padding:0}
.span-publications {margin:0, padding:0}
.p-reviewed {margin-left:50px; margin-top:6px; font-size:12px; line-height:115%}
.span-arrow {display:block; float:left; width:20px; margin-left:-20px; padding:0}
.span-reviewed {margin:0; padding:0}

Relevanter HTML-Code:
<p class="p-publications"><span class="span-number">1.1</span><span class="span-publications"><MEHRZEILIGER TEXT</span></p>
<p class="p-reviewed"><span class="span-arrow">-&gt;</span><span class="span-reviewed">MEHRZEILIGER TEXT<span></p>
<p class="p-reviewed"><span class="span-number">1.2</span><span class="span-reviewed">MEHRZEILIGER TEXT</span></p>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. "hängender" Einzug durch span-Element mit neg. margin??

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hello out there!

    Folgendes Problem: Ich möchte Spalten mit span-Elementen imitieren (für eine hierarchische Nummerierung mit "hängendem" Einzug).
    Siehe hier:
    http://www.uni-regensburg.de/Fakultaeten/phil_Fak_IV/Anglistik/SpW/Staff/Schneider/publications-test-mit-css.htm

    Siehe hier: http://forum.de.selfhtml.org/hilfe/bedienung.htm#verweise-einbinden

    Relevanter HTML-Code:
    <p class="p-publications"><span class="span-number">1.1</span><span class="span-publications"><MEHRZEILIGER TEXT</span></p>
    <p class="p-reviewed"><span class="span-arrow">-&gt;</span><span class="span-reviewed">MEHRZEILIGER TEXT<span></p>

    Frei nach wahsaga: „Ich will eine http://de.selfhtml.org/html/text/listen.htm#definition@title=Definitionsliste sein. Bitte, bitte, lass mich doch!!!11“

    Ist die CSS-Eigenschaft http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#text_indent@title=text-indent nicht was für dich? Diese darf auch negative Werte haben.

    See ya up the road,
    Gunnar

    --
    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. "hängender" Einzug durch span-Element mit neg. margin??

      Mary
      – Informationen zu den Bewertungsregeln

      Hi,

      Frei nach wahsaga: „Ich will eine http://de.selfhtml.org/html/text/listen.htm#definition@title=Definitionsliste sein. Bitte, bitte, lass mich doch!!!11“

      Unsere Rechenzentrumsleute hatten es mit einer Definitionsliste versucht, ging aber auch nicht. Wenn ich mich recht erinnere, war der Text eine Zeile tiefer als die Ziffer.

      Ist die CSS-Eigenschaft http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#text_indent@title=text-indent nicht was für dich? Diese darf auch negative Werte haben.

      Damit habe ich's auch schon versucht. Erfoglos... :-(

      Mary

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. "hängender" Einzug durch span-Element mit neg. margin??

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hello out there!

        Unsere Rechenzentrumsleute hatten es mit einer Definitionsliste versucht, ging aber auch nicht.
        Damit [text-indent] habe ich's auch schon versucht. Erfoglos... :-(

        Was soll da nicht gehen?

        <!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="zxx" lang="zxx">  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <title>TEST</title>  
    <style type="text/css">  
[code lang=css]      dl {  
        width: 40em;  
      }  
      dt {  
        margin-top: 1em;  
        margin-left: 3em;  
        text-indent: -3em;  
      }  
      dd {  
        margin-bottom: 1em;  
        margin-left: 3em;  
        text-indent: -1em;  
      }

        </style>
          </head>
          <body>
            <dl>
              <dt>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</dt>
              <dd>At vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</dd>
              <dt>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</dt>
              <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</dd>
            </dl>
          </body>
        </html>[/code]

        See ya up the road,
        Gunnar

        --
        “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. "hängender" Einzug durch span-Element mit neg. margin??

          Mary
          – Informationen zu den Bewertungsregeln

          Ja, aber das Problem ist der Abstand zwischen der hierarchischen Nummerierung (von 1.1. bis 1.45 -- damit wechselnder Abstand) und dem Text... Das klappt dann nicht mehr wohl.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. "hängender" Einzug durch span-Element mit neg. margin??

            Gunnar Bittersmann Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hello out there!

            Ja, aber das Problem ist der Abstand zwischen der hierarchischen Nummerierung (von 1.1. bis 1.45 -- damit wechselnder Abstand) und dem Text... Das klappt dann nicht mehr wohl.

            Das klappt dann auch wohl.

            Du kannst die Numerierung aus dem Fluss nehmen (absolute Positionierung):

            <!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">  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <title>TEST</title>  
    <style type="text/css">  
[code lang=css]      dl {  
        width: 40em;  
      }  
      dt {  
        margin-top: 1em;  
        margin-left: 3em;  
      }  
      dd {  
        margin-bottom: 1em;  
        margin-left: 3em;  
        text-indent: -1em;  
      }  
      .num {  
        position: absolute;  
        left: 1em;  
      }

            </style>
              </head>
              <body>
                <dl>
                  <dt><span class="num">1</span> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</dt>
                  <dd>At vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</dd>
                  <dt><span class="num">1.1.1</span> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</dt>
                  <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</dd>
                </dl>
              </body>
            </html>[/code]

            See ya up the road,
            Gunnar

            --
            “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln