Listen & CSS: barrierefrei, logisch formatiert, mehrere Spalten

[dms]

Hallo,

ich grüble gerade darüber nach, wie man Listen per CSS in folgende optische Struktur bringen könnte:

•Element A    •Element E    •Element I
•Element B    •Element F    •Element J
•Element C    •Element G    •Element K
•Element D    •Element H

Das ganze soll eine logisch strukturierte Liste bleiben. Die Liste darf also nicht in 3 Listen geteilt werden und auch eine Verschachtelung wäre nicht sinnvoll. Die originale Reihenfolge muss dabei natürlich auch erhalten bleiben, also A, B, C, ...
Die Anzahl und Höhe der Elemente ist nicht bekannt bzw. variiert. Die Liste wird dynamisch erzeugt. Entsprechende Klassen könnten für die einzelnen Elemente also vergeben werden.

Hat da jemand eine Idee?

Bin gespannt, danke,

dms

Edit: Achso, mit "höhe nicht bekannt" meine ich dass ein Element auch mehrzeilig sein kann. In dem Fall sollte das ganze folgendermassen aussehen:

•Element A    •Element E       •Element I
•Element B    •Element F       •Element J
               ist zweizeilig
•Element C    •Element G       •Element K
•Element D    •Element H

Das ist doch nicht anspruchsvoll, oder?

 

[iTob]

Wie wird denn erstellt mit PHP?

Dann könntest du doch die Anzahl der Listenelemente abfragen und durch drei teilen. Dann machst du drei Schleifen, mit jeweils unterschiedlicher Positionierung der Elemente.
Wie genau der Quellcode aussehen müsste weiß ich nicht... aber ich könnte mir vorstellen, dass man mit diesem Lösungsansatz weiter kommt...

Gruß
iTob

 

[mores]

li mit width versehen und floaten.

 

[Darii]

Wieso so umständlich?

<div style="-webkit-column-count: 3; -moz-column-count: 3; column-count: 3;">
<ul>
.
.
.
</ul>
</div>

Führt zu wesentlich weniger Problem als sich das ganze mit CSS2 zusammenzuhacken und zu hoffen das ältere Browser das dann nicht völlig unleserlich darstellen.

Opera und IE Nutzer sehen halt eine normale Liste und fertig.

 

[dms]

Danke für euren Input.

Wie wird denn erstellt mit PHP?

Genau.

Dann könntest du doch die Anzahl der Listenelemente abfragen und durch drei teilen. Dann machst du drei Schleifen, mit jeweils unterschiedlicher Positionierung der Elemente.
Wie genau der Quellcode aussehen müsste weiß ich nicht... aber ich könnte mir vorstellen, dass man mit diesem Lösungsansatz weiter kommt...

Ja, der Ansatz ist gut. Das Problem dabei ist dass ich nicht ermitteln kann ob ein Element mehrzeilig ist. Wie gross ein Element ist, ist ja von der Länge des Textes in Kombination mit Schriftgrösse+Schriftstiel abhängig und das wird schon allein daran Scheitern dass unter Windows die Schriften eine leicht andere Grösse haben als unter OS X. Wenn es so einfach wäre, hätte ich den Thread nicht erstellt.

li mit width versehen und floaten.

Hast Du meinen Text oben auch gelesen? Nicht ein einziger meiner Wünsche wäre mit einem einfachen float umsetzbar.

@Darii Das sieht sehr interessant aus, werde ich mir definitiv anschauen. Naja, das Problem ist allerdings dass es sich hierbei nicht um irgendeine Geekseite handelt sondern um eine Seite des Bundesumweltamtes. Und der gemeine Nutzer hat leider den IE.

Ich habe hier gerade noch einen interessanten Ansatz gefunden. So müsste ich nur das CSS dynamisch anpassen. Das Problem mit mehrzeiligen Elementen bleibt. Na mal schaun was geht.

 

[Darii]

@Darii Das sieht sehr interessant aus, werde ich mir definitiv anschauen. Naja, das Problem ist allerdings dass es sich hierbei nicht um irgendeine Geekseite handelt sondern um eine Seite des Bundesumweltamtes. Und der gemeine Nutzer hat leider den IE.

Deswegen hatte ich das ja vorgeschlagen. Lieber eine Möglichkeit anwenden, die alte Browser ignorieren und stattdessen die Liste normal darstellen, statt zu riskieren, dass irgendein IE5 oder Netscape 4 das Layout zerhackt. Alternativ kann man natürlich auch jeden Urzeitbrowser testen. Trotzdem riskierst du, dass das rumgehacke irgendwelche Nebeneffekte hat, die du beim Testen evtl. übersiehst.

PS: Webentwicklung ist definitiv frustrierend

 

[dms]

PS: Webentwicklung ist definitiv frustrierend

Wie wahr, wie wahr.

Deine Lösung scheint wirklich die Beste zu sein. Gerade bastel ich noch eine Kleinigkeit mit JScript so dass es wenigstens noch im IE<8 wie gewünscht aussieht. IE8 kann dann ja hoffentlich ein wenig CSS3 (wers glaubt ) und Opera wird sicherlich bald nachziehen.

Edit:

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
      <title>3-spaltige Liste</title>
      <style type="text/css">
         #threeColList {
            -webkit-column-count:3;
           -moz-column-count:3;
            column-count:3;
            width:400px;
         }

         div.clear {
            font-size:1px;
            line-height:1px;
            clear:both;
            height:1px;   
         }
      </style>
      <!--[if lte IE 7]>
         <style type="text/css">
            #threeColList ul {
               float:left;
            }
         </style>
         <script type="text/jscript">
            /* <![CDATA[ */
            function splitList() {
               document.write('</li></ul><ul><li style="display:none;">');
            }
           /* ]]> */
         </script>
      <![endif]-->
   </head>
   <body>
      <div id="threeColList">
         <ul>
            <li>Element 1</li>
            <li>Element 2</li>
            <li>Element 3<br />zweizeilig</li>
            <li>Element 4<!--[if lte IE 7]><script type="text/jscript">splitList();</script><![endif]--></li>
            <li>Element 5</li>
            <li>Element 6</li>
            <li>Element 7</li>
            <li>Element 8</li>
            <li>Element 9<!--[if lte IE 7]><script type="text/jscript">splitList();</script><![endif]--></li>
            <li>Element 10</li>
            <li>Element 11</li>
            <li>Element 12</li>
         </ul>
         <div class="clear"></div>
      </div>
   </body>
</html>

Die zweizeiligen Elemente werden nicht so dargestellt wie ich mir das ursprünglich gewünscht habe. Aber ist erst mal OK so. Kann mich nicht den ganzen Tag mit einer kleinen Liste beschäftigen.