tabellenfreie/barrierefreie Module

[Halchteranerin]

Hier sollen Links zu tabellenfreien Modulen (fuer barrierefreie Seiten, aber nicht nur) zusammengetragen werden, weil eigentlich schon mehrfach Interesse bekundet wurde. Sollte mit der Zeit ganz viel zusammenkommen , kann man ueber die Einrichtung eines entsprechenden Unterforums nachdenken.

Artikelliste blaetterbar, Artikelliste kategorieuebergreifend, Mailformular, Navigation, doppelte Navigation, Formulargenerator

3fc arbeiten auch an so etwas

[i-fekt]

Wer ist 3fc?

Ich habe sämtliche Module meiner Seite tabellenfrei gemacht, arbeite ebenfalls an einer (weitgehend) barrierefreien Seite.

[Halchteranerin]

Wer ist 3fc?

Steht im Thread, von dem ich oben den Link angegeben habe, in Snoopys Posting.

Ich habe sämtliche Module meiner Seite tabellenfrei gemacht, arbeite ebenfalls an einer (weitgehend) barrierefreien Seite.

Moechtest du die nicht auch veroeffentlichen? Die tabellenfreien Module, meine ich ...

[i-fekt]

Werde sie zur Verfügung stellen sobald meine Seite läuft und ich dann Zeit habe.

[cyaneo]

vielleicht kann diese Module jemand verwenden

- css_volltextsuche
- css_text_mit_bild
- css_download

Gibt's hier

Konstruktive Verbesserungsvorschläge zu den Modulen sind herzlich willkommen...

[Halchteranerin]

Ein Beitrag von der Contenido-FAQ zum Thema tabellenfreie Layouts:
http://www.thilo-sommer.de/PHPMyFAQ/ind ... 87&lang=de

[#ayshe]

Hallo zusammen,

gute Initiative, Christa!
Ich versuche auch mein Bestes, dem neuen Dogma "barrierefrei" entgegenzukommen
Zum Thema barrierefrei gehört m.E. auch eine Validierung des Codes.
Einen Strich durch diesen Plan macht mir aber immer das Backend, wenn jemand eine Seite editiert und ein Bild einfügen will. Da kann er dann im Contenido-Dialog auch ganz klasse Styles angeben, z.B. width oder height. Prima denke ich, dann wird das als Style in das img-Tag reingepackt, da kommen wir der Idealkombination von xhtml/css und der Validierung schon näher. ABER wenn ich später in den Quellcode schaue, hats mir die Styleangaben in GROSSBUCHSTABEN reingehauen und auch noch ohne Semikolon hinter der letzten Styledefinition. Damit ist die Validierung wieder im A....
Kennt jemand das Problem? Und noch besser: weiß jemand ne Lösung?


Und weil ich nicht nur fragen will, sondern auch beitragen , hier mein Code der guten alten Hauptnavigation, Output statt mit tables mit <ul> etc., also xhtml/css-konform.

Code: Alles auswählen

Hauptnavigation CSS (ohne contenido-templates, ohne tables)


######### Input #########

?> 
<table cellspacing="0" cellpadding="0" cellpadding="4">

    <tr>
        <td class="text_medium">Baum wählen:</td>
        <td>
            <select name="CMS_VAR[0]">
            <option value="0">-- kein --</option>
            <?php

                $sql = "SELECT
                            A.idcat,
                            C.name
                        FROM
                            ".$cfg["tab"]["cat_tree"]." AS A,
                            ".$cfg["tab"]["cat"]." AS B,
                            ".$cfg["tab"]["cat_lang"]." AS C
                        WHERE
                            A.idcat     = B.idcat AND
                            B.idcat     = C.idcat AND
                            C.idlang    = '".$lang."' AND
                            B.idclient  = '".$client."' AND
                            C.visible   = 1 AND
                            A.level     = '0'
                        ORDER BY
                            A.idtree";

                $db->query($sql);

                while ( $db->next_record() ) {

                    if ( "CMS_VALUE[0]" == $db->f("idcat") ) {
                        echo '<option selected="selected" value="'.$db->f("idcat").'">'.$db->f("name").'</option>';

                    } else {
                        echo '<option value="'.$db->f("idcat").'">'.$db->f("name").'</option>';

                    }
                }

            ?>
            </select>
        </td>
    </tr>

</table>
<?php

####### Output #######

<?php


if ( !is_object($db2) ) {
    $db2 = new DB_Contenido;
}

/**
 * Check if a category is child
 * of another category
 *
 * @return boolean true/false
 * @author Jan Lengowski <Jan.Lengowski@4fb.de>
 * @copyright four for business AG 2003
 * ergänzung: ohne Templates, nur css
 *            Frank Hoffmann - www.x28.de
 */
function catIsChildOf($id, $idparent) {

    global $cfg, $client, $lang;

    $db = new DB_Contenido;

    $parent = $id;

    while ( $parent != 0 ) {

        $sql = "SELECT
                    a.parentid
                FROM
                    ".$cfg["tab"]["cat"]." AS a,
                    ".$cfg["tab"]["cat_lang"]." AS b
                WHERE
                    a.idclient  = '".$client."' AND
                    b.idlang    = '".$lang."' AND
                    a.idcat     = b.idcat AND
                    a.idcat   = '".$parent."'";

        $db->query($sql);
        $db->next_record();

        $parent = $db->f("parentid");

        if ($parent == $idparent) {
            return true;
        }

    }

    return false;

}

if ( catIsChildOf($idcat, CMS_VALUE[0]) ) {
    $sel_idcat = $idcat;
} else {
    $sel_idcat = CMS_VALUE[0];
}

/**
 * Array storing alle the
 * navigation data
 */
$navitems = array();

/**
 * Recursive function for creating
 * the navigation array
 * @param Int $idcat Category id
 */
function nav($idcat) {

        global $navitems, $client, $lang, $cfg;

        $db  = new DB_Contenido;
        $db2 = new DB_Contenido;

        $sql = "SELECT parentid FROM ".$cfg["tab"]["cat"]." WHERE idcat = '$idcat'";

        $db->query($sql);
        $db->next_record();

        $parentid = $db->f("parentid");

        if ( $parentid == 0 ) {

           if ( $idcat != CMS_VALUE[0] ){

                $navitems = array();
              
                $sql = "SELECT
                            A.idcat,
                            C.name
                        FROM
                            ".$cfg["tab"]["cat_tree"]." AS A,
                            ".$cfg["tab"]["cat"]." AS B,
                            ".$cfg["tab"]["cat_lang"]." AS C
                        WHERE
                            A.idcat     = B.idcat   AND
                            B.idcat     = C.idcat   AND
                            B.idclient  = '$client' AND
                            C.idlang    = '$lang'   AND
                            C.visible   = '1'       AND
                            B.parentid  = 'CMS_VALUE[0]'
                        ORDER
                            BY A.idtree";

                      $db->query($sql);

                      while ($db->next_record()) {

                            /* Check for external redirects... */
                            $sql = "SELECT
                                        a.external_redirect AS ext
                                    FROM
                                        ".$cfg["tab"]["art_lang"]." AS a,
                                        ".$cfg["tab"]["cat_art"]." AS b,
                                        ".$cfg["tab"]["cat"]." AS c
                                    WHERE
                                        b.idcat     = '".$db->f("idcat")."' AND
                                        b.is_start  = '1' AND
                                        c.idclient  = '".$client."' AND
                                        c.idcat     = b.idcat AND
                                        a.idart     = b.idart AND
                                        a.idlang    = '".$lang."'";

                            $db2->query($sql);
                            $db2->next_record();

                            $target = ( $db2->f("ext") == 0 ) ? '_self' : '_blank';

                            $navitems[$db->f("idcat")] = array("idcat"      => $db->f("idcat"),
                                                                "name"      => $db->f("name"),
                                                                "target"    => $target);
                      }

           }
           
           return true;
        }

        $sql = "SELECT
                    A.idcat,
                    C.name
                FROM
                    ".$cfg["tab"]["cat_tree"]." AS A,
                    ".$cfg["tab"]["cat"]." AS B,
                    ".$cfg["tab"]["cat_lang"]." AS C
                WHERE
                    A.idcat     = B.idcat   AND
                    B.idcat     = C.idcat   AND
                    B.idclient  = '$client' AND
                    C.idlang    = '$lang'   AND
                    C.visible   = '1'       AND
                    B.parentid  = '$parentid'
                ORDER BY
                    A.idtree";

        $db->query($sql);

        while ($db->next_record()) {

                /* Check for external redirects... */
                $sql = "SELECT
                            a.external_redirect AS ext
                        FROM
                            ".$cfg["tab"]["art_lang"]." AS a,
                            ".$cfg["tab"]["cat_art"]." AS b,
                            ".$cfg["tab"]["cat"]." AS c
                        WHERE
                            b.idcat     = '".$db->f("idcat")."' AND
                            b.is_start  = '1' AND
                            c.idclient  = '".$client."' AND
                            c.idcat     = b.idcat AND
                            a.idart     = b.idart AND
                            a.idlang    = '".$lang."'";

                $db2->query($sql);
                $db2->next_record();


                $target = ( $db2->f("ext") == 0 ) ? '_self' : '_blank';
                
                $tmp_nav[$db->f("idcat")] = array("idcat"   => $db->f("idcat"),
                                                  "name"    => $db->f("name"),
                                                  "target"  => $target);
        }

        $tmp_nav[$idcat]["sub"] = $navitems;
        $navitems = $tmp_nav;

        /* Function call */
        nav($parentid);

}  // end function

$sql = "SELECT
            A.idcat,
            C.name
        FROM
            ".$cfg["tab"]["cat_tree"]." AS A,
            ".$cfg["tab"]["cat"]." AS B,
            ".$cfg["tab"]["cat_lang"]." AS C
        WHERE
            A.idcat     = B.idcat   AND
            B.idcat     = C.idcat   AND
            B.idclient  = '$client' AND
            C.idlang    = '$lang'   AND
            C.visible   = '1'       AND
            B.parentid  = '$sel_idcat'
        ORDER BY
            A.idtree";

$db->query($sql);

while ( $db->next_record() ) {

        /* Check for external redirects... */
        $sql = "SELECT
                    a.external_redirect AS ext
                FROM
                    ".$cfg["tab"]["art_lang"]." AS a,
                    ".$cfg["tab"]["cat_art"]." AS b,
                    ".$cfg["tab"]["cat"]." AS c
                WHERE
                    b.idcat     = '".$db->f("idcat")."' AND
                    b.is_start  = '1' AND
                    c.idclient  = '".$client."' AND
                    c.idcat     = b.idcat AND
                    a.idart     = b.idart AND
                    a.idlang    = '".$lang."'";

        $db2->query($sql);
        $db2->next_record();

        $target = ( $db2->f("ext") == 0 ) ? '_self' : '_blank';

        $navitems[$db->f("idcat")] = array("idcat"  => $db->f("idcat"),
                                           "name"   => $db->f("name"),
                                           "target" => $target);
}

/* Create Navigation Array */
nav($sel_idcat);

/* Start Output buffer */
ob_start();


echo  '<ul>';

foreach ($navitems as $key => $data) {

    /* 1. Navigations Ebene */
    if ($data['idcat'] == $idcat) {
      echo '<li><a href="'.$sess->url('front_content.php?idcat='.$data['idcat']).'" class="aktiv" target="'.$data['target'].'">'.$data['name'].'</a></li>';   
    }
    else {
      echo '<li><a href="'.$sess->url('front_content.php?idcat='.$data['idcat']).'" target="'.$data['target'].'">'.$data['name'].'</a></li>';   
    }
    if (is_array($data['sub'])) {
       
        foreach ($data['sub'] as $key => $data) {
            /* 2. Navigations Ebene */            
            if ($data['idcat'] == $idcat) {
               echo '<li style="margin-left:10px;"><a  href="'.$sess->url('front_content.php?idcat='.$data['idcat']).'" class="aktiv" target="'.$data['target'].'">'.$data['name'].'</a></li>';   
            }
            else {
            echo '<li style="margin-left:10px;"><a href="'.$sess->url('front_content.php?idcat='.$data['idcat']).'" target="'.$data['target'].'">'.$data['name'].'</a></li>';   
            }
          
            if (is_array($data['sub'])) {
               
                foreach ($data['sub'] as $key => $data) {
                    /* 3. Navigations Ebene */
                   if ($data['idcat'] == $idcat) {
                      echo '<li style="margin-left:20px;"><a href="'.$sess->url('front_content.php?idcat='.$data['idcat']).'" class="aktiv" target="'.$data['target'].'">'.$data['name'].'</a></li>';   
                   }
                   else {
                      echo '<li style="margin-left:20px;"><a href="'.$sess->url('front_content.php?idcat='.$data['idcat']).'" target="'.$data['target'].'">'.$data['name'].'</a></li>';   
                   }
                } // end foreach
             
            } // end if
         } // end foreach
    
     } // end if    
} // end foreach

echo '</ul>';


/* Read out buffer */
$html = ob_get_contents();

/* Clean buffer */
ob_end_clean();

/* Output buffer-contents */
echo $html;

?>

[Beleuchtfix]

Um die Sammlung zu kompletieren, bei
www.x28.de gibt es im Kochbuch einige Module für tabellenfreies Layout.
Hauptnavi / Hilfsnavi vertikal und horizontal und eine Artikelliste.

Gruß
Florian

[Halchteranerin]

Hauptnavigation mit 4 Ebenen von i-fekt (ehem. Craxx ):
http://www.contenido.org/forum/viewtopic.php?t=8562

[Dodger77]

Da ich mich auch ein wenig mit dem Thema beschäftige, möchte ich dann hier auch mal auf ein paar Module/Erweiterungen verweisen:

1. vpNavigation
Valide Dropdown-Navigation durch Einsatz von ungeordneten Listen, die in Firefox/Opera sogar ohne Einsatz von JavaScript funktioniert:

http://www.contenido.org/forum/viewtopic.php?t=8845

2. vpTransformationen
Erweiterung, die zur mandantenweiten logischen Auszeichnung von Textinhalten dient (zurzeit unter anderem ABBR- und ACRONYM-Tags) und dabei automatisch definierte Texte durch entsprechendes HTML zugänglicher gestaltet:

http://www.contenido.org/forum/viewtopic.php?t=8840

3. vpGuestbook
Templatebasiertes Gästebuch, das noch ein paar weitere Spielereien bietet (z.B. Umschalten zwischen Ausgabe von HTML/XHTML). Die Templates können natürlich auch ohne Tabellen gestaltet werden.

http://www.contenido.org/forum/viewtopic.php?t=9299


Gruß

Ingo

[i-fekt]

Das klingt alles schon sehr gut, wirklich klasse finde ich aber hauptsächlich dein Transformation Modul. Ich habe es noch nicht getestet aber liest sich ganz gut. Ich habs aber anders gelöst, per str_replace, da man nicht immer alles abkürzen will und manche Abkürzungen auch in einem Wort vorkommen könnten.

Aber hat beides Vor- und Nachteile. Im August werde ich mich näher damit befassen sobald mein Projekt gestemmt ist.

[Halchteranerin]

Aus dem Hause "vp" auch noch eine vertikale tabellenfreie Sitemap mit validem Code.
http://www.contenido.org/forum/viewtopic.php?t=8875

[Dodger77]

Aus dem Hause "vp" auch noch eine vertikale tabellenfreie Sitemap mit validem Code.
http://www.contenido.org/forum/viewtopic.php?t=8875

Ob vertikal, horizontal oder diagonal hängt nicht mit dem Modul, sondern nur mit dem richtigen Einsatz von CSS ab.

[Halchteranerin]

Diagonal waere nicht schlecht. Jaaaa, stimmt, hast recht ... meine ist jetzt vertikal.

[bascat]

Hi Comunitys!

Ich versuche gerade eine geteilte Navigation ohne Tabellen herzustellen. Als Basis der Subnavi könnte man eigentlich sehr gut das o. a. Modul von ayshe nutzen.

Nun die Frage: Ist es bei der tabellenfreien Navi auch möglich die 1. Navigationsebene in der Ausgabe zu unterdrücken? Die soll nämlich an einer anderen Stelle in einem anderen Modul sitzen! Wo muss man dafür in den Code eingreifen?

Danke für Eure Hilfe.

Grüße von der basCAT