juewi: 2 Listen-Elemente nebeneinander + gegenseitig vertikal zentriert

Ich hab hier eine Auflistung von Thumbnails und nebenstehendem Text wobei der Text aus 1 oder 2 oder 3 Zeilen bestehen kann und gegenüber dem Thumbnail vertikal zentriert sein soll.

Zur Zeit mit Tabellen, da mit CSS nicht geschafft, siehts so aus:
serien.html MIT TABELLEN
-> egal wieviel Zeilen: Text kann schön zentriert werden

Mit CSS hab ich das ganze nun mit UL und LI versucht und scheitere aber an der vert. Zentrierung der Zeilen:
serien.html MIT CSS
(die ganzen Versuche hab ich rausgenommen, war alles Käse)

div#serienbox ul {  
clear: both;  
list-style: none;  
height: 70px;  
margin-top: 20px;  
border: 1px dashed #0000ff;  
}  
div#serienbox ul li{  
margin-right: 20px;  
float: left;  
border: 1px dashed #00ff00;  
}  

Gibt´s da eine anständige CSS-Lösung oder soll ich hier einfach die Tabelle lassen?

Danke, Jürgen

  1. Gibt´s da eine anständige CSS-Lösung oder soll ich hier einfach die Tabelle lassen?

    inline-block

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    1. inline-block

      Aha. Kannst du vielleicht etwas konkreter werden anstatt nur einfach ein Wort in den Raum zu werfen?

      Mathias

      1. @@molily:

        »» inline-block

        Aha. Kannst du vielleicht etwas konkreter werden anstatt nur einfach ein Wort in den Raum zu werfen?

        Das von juewi vorgetellte Markup

        <ul class="photolist">  
          <li><img src="foo" alt="bar"/></li>  
          <li><p>Lorem ipsum dolor sit amet</p></li>  
        </ul>  
        <ul>  
          <li><img src="baz" alt="quz"/></li>  
          <li><p>Ut wisi enim ad minim veniam</p></li>  
        </ul>
        

        ist semantisch nicht korrekt, da es sich ja um _eine_ Liste handelt:

        <ul>  
          <li>  
            <img src="foo" alt="bar"/>  
            <span>Lorem ipsum dolor sit amet</span>  
          <li>  
          <li>  
            <img src="baz" alt="quz"/>  
            <span>Ut wisi enim ad minim veniam</span>  
          <li>  
        </ul>
        

        Stylesheet:

        ul.photolist  
        {  
            list-style: none;  
            margin: 0;  
            padding: 0;  
        }  
          
        ul.photolist li  
        {  
            border: 1px solid silver; /* nur zur Verdeutlichung */  
            margin: 10px 0;  
            padding: 10px; /* nur zur Verdeutlichung */  
        }  
          
        ul.photolist img, ul.photolist span  
        {  
            display: inline-block;  
            vertical-align: middle;  
        }  
          
        ul.photolist span  
        {  
            margin-left: 2em;  
            width: 10em; /* Breitenangabe muss wohl sein; der Wermutstropfen hier */  
        }  
          
        * html ul.photolist img, * html ul.photolist span /* für IE 6 */  
        {  
            display: inline;  
        }  
          
        *:first-child+html ul.photolist img, *:first-child+html ul.photolist span /* für IE 7 */  
        {  
            display: inline;  
        }
        

        Lediglich Firefox 2 bleibt auf der Strecke. Da wäre etwas mehr Aufwand zu betreiben, aber lohnt das noch? ↗http://bittersmann.de/articles/inline-block/

        Und wie du sagtest, manchmal ist eine Tabelle einfach nur eine Tabelle.

        Live long and prosper,
        Gunnar

        --
        Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
        1. @@Gunnar Bittersmann:

          Das von juewi vorgetellte Markup

          <ul class="photolist">

          Grmpf, da hab ich ' class="photolist"' an die falsche Stelle nachträglich eingefügt. Hier weg und da hin:

          <ul class="photolist">  
            <li>  
              <img src="foo" alt="bar"/>  
              <span>Lorem ipsum dolor sit amet</span>  
            <li>  
            <li>  
              <img src="baz" alt="quz"/>  
              <span>Ut wisi enim ad minim veniam</span>  
            <li>  
          </ul>
          

          @juewi: Schöne Fotos!

          Live long and prosper,
          Gunnar

          --
          Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
          1. @@Gunnar Bittersmann:
            ...
            Lediglich Firefox 2 bleibt auf der Strecke. Da wäre etwas mehr Aufwand zu betreiben, aber lohnt das noch? ↗http://bittersmann.de/articles/inline-block/

            Und wie du sagtest, manchmal ist eine Tabelle einfach nur eine Tabelle.

            ;-) Auch OHNE zusätzlichen FF2-Aufwand steht Deine Codierung wahrscheinlich in keinem Verhältnis zum Einsatzzweck. Sehr ausgetüftelt aber da ist table-tr-td vielleicht doch passender.

            @juewi: Schöne Fotos!,
            Gunnar

            Die Firma dankt und gibt ihr bestes ;-)

            LG, Jürgen

            1. @@juewi:

              ;-) Auch OHNE zusätzlichen FF2-Aufwand steht Deine Codierung wahrscheinlich in keinem Verhältnis zum Einsatzzweck. Sehr ausgetüftelt aber da ist table-tr-td vielleicht doch passender.

              ?? Aufwand?

              Das einzige „ausgetüftelte“, was da im Stylesheet steht, ist doch

              ul.photolist img, ul.photolist span  
              {  
                  display: inline-block;  
                  vertical-align: middle;  
              }
              

              und das Setzen von 'display: inline' für IEs.

              Die restlichen Regeln hättest du bei 'display: table-cell' auch.

              Live long and prosper,
              Gunnar

              --
              Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
  2. Gibt´s da eine anständige CSS-Lösung oder soll ich hier einfach die Tabelle lassen?

    Die einzig funktionsfähige CSS-Lösung wäre es, mit display:table und display:table-cell zu arbeiten - also Layouttabellen mit CSS zu emulieren. Da das der IE nicht kann und einige andere Browser nicht so richtig, ist das eine  sehr heikle Sache. »Anständig« würde ich das nicht nennen.

    Da es sich hier durchaus um eine Zuordnungsliste handelt, würde ich dir raten, bei der Tabelle zu bleiben, denn CSS-Hacks, die die Tabelle wieder durch die Hintertür einführen und dabei nicht halb so robust funktionieren, machen die Sache nicht besser.

    Mathias

    1. ... Da es sich hier durchaus um eine Zuordnungsliste handelt, würde ich dir raten, bei der Tabelle zu bleiben ...

      Ok hab ich so vermutet. Naja, ein bisschen Tabelle in einer Website wird die heutige Jugend hoffentlich aushalten ;-)

      Danke und LG, Jürgen

      PS: Danke an dieser Stelle nochmals für Deine Riesenmühe mit dem Script!