Andi: Tabellenfreie zweispaltige Absatzformatierung. Geht das?

Hallo Leute,

http://www.kolping-legau.de

es geht um die obige Seite. Mir gefallen die orangenen Boxen in der Mitte auf der Startseite sehr gut. Aber die sind leider mit Tabellen umgesetzt, was mir widerstrebt. Habe jetzt auch schon einige Versuche gemacht, das möglichst einfaches CSS umzuschreiben, aber es ist nichts brauchbares herausgekommen.

Ich habe noch die zusätzliche Anforderung, dass ich es am liebsten so hätte, dass es nur ein Absatz ist, der mit CSS dann so formatiert wird, also:

<p class="box">##Datum##: Inhalt</p>

Hat jemand eine tolle Idee dazu? Aber ich wäre auch froh, wenn es etwas umständlicher ist!

Grüße! Andi

  1. Om nah hoo pez nyeetz, Andi!

    <p class="box">##Datum##: Inhalt</p>

    Hat jemand eine tolle Idee dazu? Aber ich wäre auch froh, wenn es etwas umständlicher ist!

    Als Absatz geht es IMHO nicht. Verwende eine Definitionsliste.

    Matthias

    --
    http://www.billiger-im-urlaub.de/kreis_sw.gif
    1. @@apsel:

      nuqneH

      Als Absatz geht es IMHO nicht. Verwende eine Definitionsliste.

      Als Definitionsliste geht es IMHO nicht. Verwende eine Liste oder eine Tabelle.

      Wegen unsinniger HTML-Spec wird das Layout mit 'dl' nicht umsetzbar sein; es fehlt das 'dt' und 'dd' gruppierende Element 'di'.

      Qapla'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
      1. Als Definitionsliste geht es IMHO nicht.

        Doch, man muss nur etwas tricksen - das geht schon sofern das Layout nicht zu komplex wird.

        Wegen unsinniger HTML-Spec wird das Layout mit 'dl' nicht umsetzbar sein; es fehlt das 'dt' und 'dd' gruppierende Element 'di'.

        Ja, damit wäre es einfacher.

        1. @@suit:

          nuqneH

          Als Definitionsliste geht es IMHO nicht.

          Doch, man muss nur etwas tricksen - das geht schon sofern das Layout nicht zu komplex wird.

          Da bin ich gespannt, wie du das hinbekommen willst.

          Variabel viel Inhalt von 'dt' und 'dt' sollet noch nicht unter „Layout zu komplex“ fallen.

          Qapla'

          --
          Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
          (Mark Twain)
      2. Om nah hoo pez nyeetz, Gunnar Bittersmann!

        was spricht gegen

        <dl>                          // Hier ein Rahmen
        <dt>foo</dt>                 // Border-bottom
        <dd>bar</dd>                // Border-bottom
        </dl>
        

        und last-of-type kein border-unten,

        abgesehen von der etwas komplizierteren Positionierung der <dd>s?

        Matthias

        --
        http://www.billiger-im-urlaub.de/kreis_sw.gif
        1. @@apsel:

          nuqneH

          was spricht gegen

          <dl>                          // Hier ein Rahmen

          <dt>foo</dt>                 // Border-bottom
          <dd>bar</dd>                // Border-bottom
          </dl>

            
          Unerlaubte Vereinfachung.  
            
          ~~~html
          <dl>  
            <dt>foo</dt>  
            <dd>bar</dd>  
            <dt>baz</dt>  
            <dd>quz</dd>  
          </dl>
          

          Wie willst du einen Rahmen um foo und bar und einen anderen um bar und baz hinbekommen?

          Und nein,

          <dl>  
            <dt>foo</dt>  
            <dd>bar</dd>  
          </dl>  
          <dl>  
            <dt>baz</dt>  
            <dd>quz</dd>  
          </dl>
          

          ist kein sinnvolles Markup.
          Qapla'

          --
          Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
          (Mark Twain)
          1. Om nah hoo pez nyeetz, Gunnar Bittersmann!

            @@apsel:

            nuqneH

            was spricht gegen

            <dl>                          // Hier ein Rahmen
            
            > > <dt>foo</dt>                 // Border-bottom
            > > <dd>bar</dd>                // Border-bottom
            > > </dl>
            
            

            Unerlaubte Vereinfachung.

            <dl>
            
            >   <dt>foo</dt>
            >   <dd>bar</dd>
            >   <dt>baz</dt>
            >   <dd>quz</dd>
            > </dl>
            
            

            Wie willst du einen Rahmen um foo und bar und einen anderen um bar und baz hinbekommen?

            Und nein,

            <dl>
            
            >   <dt>foo</dt>
            >   <dd>bar</dd>
            > </dl>
            > <dl>
            >   <dt>baz</dt>
            >   <dd>quz</dd>
            > </dl>
            
            

            ist kein sinnvolles Markup. Qapla'

            zugegeben, das nicht sinnvolle Markup ist mir zuerst eingefallen.

            dl bekommt den Border,

            dd und dt bekommen Border-bottom

            last-of-type von dd und dt bekommen kein Border-bottom

            Matthias

            --
            http://www.billiger-im-urlaub.de/kreis_sw.gif
            1. @@apsel:

              nuqneH

              zugegeben, das nicht sinnvolle Markup ist mir zuerst eingefallen.

              Das zählt nicht. Es ist EINE Liste, also ein 'dl'-Element.

              Qapla'

              --
              Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
              (Mark Twain)
              1. Om nah hoo pez nyeetz, Gunnar Bittersmann!

                ...
                <head>
                  <style>
                    dl {border: 5px solid red;}
                    dt {border-bottom: 5px solid blue; margin: auto 5px; text-indent: 10px;}
                    dd {margin-top: -1.55em; margin-left: 25em;}
                  </style>
                </head>
                <body>
                <dl>
                  <dt>foo</dt>
                  <dd>bar</dd>
                  <dt>noch foo</dt>
                  <dd>barer</dd>
                </dl>
                ...
                

                leistet das Verlangte.

                Matthias

                --
                http://www.billiger-im-urlaub.de/kreis_sw.gif
                1. @@apsel:

                  nuqneH

                  ...[/code]
                  leistet das Verlangte.

                  Mitnichten.

                  Qapla'

                  --
                  Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                  (Mark Twain)
  2. Hi,

    Aber die sind leider mit Tabellen umgesetzt, was mir widerstrebt.

    warum? Mindestens dort, wo Ereignisse Terminen zugeordnet sind, handelt es sich um tabellarische Daten. Dass die Struktur an sich noch immer dämlich ist (einzelne Tabellen für jeden Datensatz, leere Absätze dazwischen), steht auf einem anderen Blatt.

    Hat jemand eine tolle Idee dazu?

    Siehe apsels Vorschlag.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes