Listen & CSS: barrierefrei, logisch formatiert, mehrere Spalten

Dieses Thema im Forum "Web-Design" wurde erstellt von dms, 10.04.2008.

  1. dms

    dms Thread Starter

    Hallo,

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

    Code:
    •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:

    Code:
    •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? :D
     
  2. iTob

    iTob Mitglied

    Beiträge:
    425
    Zustimmungen:
    17
    Mitglied seit:
    23.02.2005
    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
     
  3. mores

    mores Mitglied

    Beiträge:
    3.558
    Zustimmungen:
    106
    Mitglied seit:
    23.12.2003
    li mit width versehen und floaten.
     
  4. Darii

    Darii Mitglied

    Beiträge:
    2.065
    Zustimmungen:
    110
    Mitglied seit:
    24.02.2004
    Wieso so umständlich?

    Code:
    <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.
     
  5. dms

    dms Thread Starter

    Danke für euren Input.

    Genau.

    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. :)

    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. ;)
     
  6. Darii

    Darii Mitglied

    Beiträge:
    2.065
    Zustimmungen:
    110
    Mitglied seit:
    24.02.2004
    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 ;)
     
  7. dms

    dms Thread Starter

    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:
    Code:
    <!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. ;)
     

Diese Seite empfehlen

  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.