tabellenfreie/barrierefreie Module

Halchteranerin
Beiträge: 5478
Registriert: Di 2. Mär 2004, 21:11
Wohnort: Halchter, wo sonst? ;-)
Kontaktdaten:

tabellenfreie/barrierefreie Module

Beitrag von Halchteranerin » Mi 26. Jan 2005, 16:26

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 :wink:, kann man ueber die Einrichtung eines entsprechenden Unterforums nachdenken.

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

3fc arbeiten auch an so etwas :)
Zuletzt geändert von Halchteranerin am Fr 15. Jul 2005, 07:31, insgesamt 1-mal geändert.

i-fekt
Beiträge: 1520
Registriert: Mo 3. Jan 2005, 02:15
Wohnort: Chemnitz
Kontaktdaten:

Beitrag von i-fekt » Mi 26. Jan 2005, 18:13

Wer ist 3fc?

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

Halchteranerin
Beiträge: 5478
Registriert: Di 2. Mär 2004, 21:11
Wohnort: Halchter, wo sonst? ;-)
Kontaktdaten:

Beitrag von Halchteranerin » Mi 26. Jan 2005, 18:32

Craxx hat geschrieben:Wer ist 3fc?
Steht im Thread, von dem ich oben den Link angegeben habe, in Snoopys Posting.
Craxx hat geschrieben: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
Beiträge: 1520
Registriert: Mo 3. Jan 2005, 02:15
Wohnort: Chemnitz
Kontaktdaten:

Beitrag von i-fekt » Mi 26. Jan 2005, 20:41

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

cyaneo
Beiträge: 76
Registriert: Mi 5. Jan 2005, 19:42
Wohnort: Das findet ihr sowieso nicht, weils so klein ist...
Kontaktdaten:

Beitrag von cyaneo » Mi 26. Jan 2005, 22:02

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...
Zuletzt geändert von cyaneo am Do 27. Jan 2005, 11:17, insgesamt 2-mal geändert.
**************************************************
Gruss
cyaneo
Zen Cart - The Art of e-Commerce
--------------------------------------------------------------------------------
Wenn jeder dem anderen helfen wollte, wäre allen geholfen.
--------------------------------------------------------------------------------
Ein Problem ist halb gelöst, wenn es klar formuliert ist.
**************************************************

Halchteranerin
Beiträge: 5478
Registriert: Di 2. Mär 2004, 21:11
Wohnort: Halchter, wo sonst? ;-)
Kontaktdaten:

Beitrag von Halchteranerin » Sa 12. Feb 2005, 12:54

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

#ayshe
Beiträge: 445
Registriert: Do 25. Mär 2004, 10:04
Kontaktdaten:

Beitrag von #ayshe » Mi 11. Mai 2005, 15:51

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
Beiträge: 1082
Registriert: Di 22. Jul 2003, 10:14
Wohnort: Hessen
Kontaktdaten:

Beitrag von Beleuchtfix » Mi 11. Mai 2005, 22:18

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
Beiträge: 5478
Registriert: Di 2. Mär 2004, 21:11
Wohnort: Halchter, wo sonst? ;-)
Kontaktdaten:

Beitrag von Halchteranerin » Fr 10. Jun 2005, 20:01

Hauptnavigation mit 4 Ebenen von i-fekt (ehem. Craxx :)):
http://www.contenido.org/forum/viewtopic.php?t=8562
Zuletzt geändert von Halchteranerin am Do 7. Jul 2005, 10:29, insgesamt 1-mal geändert.

Dodger77
Beiträge: 3625
Registriert: Di 12. Okt 2004, 20:00
Wohnort: Voerde (Niederrhein)
Kontaktdaten:

Beitrag von Dodger77 » Do 7. Jul 2005, 23:37

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
Zuletzt geändert von Dodger77 am Di 30. Aug 2005, 16:42, insgesamt 1-mal geändert.

i-fekt
Beiträge: 1520
Registriert: Mo 3. Jan 2005, 02:15
Wohnort: Chemnitz
Kontaktdaten:

Beitrag von i-fekt » Do 7. Jul 2005, 23:56

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. Bild

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

"Keep on riding this Bike!" (Jackson Mulham)

Halchteranerin
Beiträge: 5478
Registriert: Di 2. Mär 2004, 21:11
Wohnort: Halchter, wo sonst? ;-)
Kontaktdaten:

Beitrag von Halchteranerin » Mo 11. Jul 2005, 20:11

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

Dodger77
Beiträge: 3625
Registriert: Di 12. Okt 2004, 20:00
Wohnort: Voerde (Niederrhein)
Kontaktdaten:

Beitrag von Dodger77 » Mo 11. Jul 2005, 20:22

Halchteranerin hat geschrieben:Aus dem Hause "vp" :wink: 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. :wink:

Halchteranerin
Beiträge: 5478
Registriert: Di 2. Mär 2004, 21:11
Wohnort: Halchter, wo sonst? ;-)
Kontaktdaten:

Beitrag von Halchteranerin » Mo 11. Jul 2005, 20:38

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

bascat
Beiträge: 2
Registriert: Sa 28. Aug 2004, 17:52
Wohnort: NRW
Kontaktdaten:

Beitrag von bascat » Mo 1. Aug 2005, 21:41

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

Gesperrt