petageh: Aufzählung mit Text

hiho,
ich hoffe jemand kann mir bei meinem problem helfen. ich acker mich schon seit stunden durch Foren und komme auf keine gescheite lösung!

Ich versuche eine Aufzählung mit Text als Aufzählungszeichen zu machen. Klingt erst einfach, isses dann aber doch nicht. :D
Im Detail heisst das, ich habe eine Liste mit Pressemeldungs-Teasern, wo das Datum sozusagen das Aufzählungszeichen ist. Der erklärende Text dahinter soll, beim Umbruch, nicht bündig mit dem Aufzählungszeichen, sondern mit dem Text wieder sein. o_O

Ich habe es als erstes mit list-style-position (darum die Realisierung über <ul>'s) gearbeitet, weil mir das am logischten erschien. Durch das flag outside/inside habe ich die Möglichkeit, den Text vor dem Aufzählungszeichen brechen zu lassen. Doch leider funzt das nicht, weil man dem list-style-type nur images und default-grafiken setzen kann.
Das list-style-* zum Einrücken hat ausserdem das Manko, dass es nur numerische Werte frisst, die beim Skalieren der Typo nicht mehr einheitlich funktionieren.

Das Emulieren von Tables (über display) hab ich mir ganz schnell abgewöhnt, weil der IE da Murks baut ohne Ende.

Ich hoffe ich habe mich einigermassen klar ausgedrückt was mein Problem ist und freue mich über Lösungsansätze zu dem Thema! :)

vielen lieben dank,
peter

  1. hi,

    Im Detail heisst das, ich habe eine Liste mit Pressemeldungs-Teasern, wo das Datum sozusagen das Aufzählungszeichen ist.

    wie geht sowas?

    Der erklärende Text dahinter soll, beim Umbruch, nicht bündig mit dem Aufzählungszeichen, sondern mit dem Text wieder sein.

    da kann ich erst mal kein grundsätzliches problem erkennen - bei einer geeigneten HTML-struktur.

    beispielsweise wäre hier eine definition list denkbar.
    datum als DT, links gefloatet, text als DD, mit margin-left auf passendem abstand gehalten.
    maßangaben dabei natürlich idealer weise in em.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. hiho,
      supi, es funzt schon fast! :D Vielen Dank für die schnelle Hilfe! Ich war auf einem völlig falschen Pfad, hatte die <dl>'s nicht mehr aufm Plan!
      Allerdings macht der IE einen leichten ca. 2px versatz in der 1.Zeile.

      .intenddatum { float: left; } .intendtext { margin-left: 6em; }

      source:
      <dl>
        <dt class="intenddatum">22.03.2993</dt>
        <dd class="intendtext">hier steht gaaaanz viel tüxt!! ... usw ...</dd>
      </dl>

      Gibts da nochn Trick?!

      1. hi,

        Allerdings macht der IE einen leichten ca. 2px versatz in der 1.Zeile.

        vermutlich eher drei?

        ein bekannter bug namens three pixel text jog.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. wow,
          danke schön. jetzt funkelt alles! :D

  2. Tachchen!

    Ich würde an deiner Stelle den Begriff der Definitionsliste weit
    auslegen, dann solltest du zügig glücklich werden. ;-)

    Gruß

    Die schwarze Piste

    --
    ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
    Smartbytes Webdesign in Oberhausen