Seite 1 von 2
tabellenfreie/barrierefreie Module
Verfasst: Mi 26. Jan 2005, 16:26
von 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 
Verfasst: Mi 26. Jan 2005, 18:13
von i-fekt
Wer ist 3fc?
Ich habe sämtliche Module meiner Seite tabellenfrei gemacht, arbeite ebenfalls an einer (weitgehend) barrierefreien Seite.
Verfasst: Mi 26. Jan 2005, 18:32
von Halchteranerin
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 ...
Verfasst: Mi 26. Jan 2005, 20:41
von i-fekt
Werde sie zur Verfügung stellen sobald meine Seite läuft und ich dann Zeit habe.
Verfasst: Mi 26. Jan 2005, 22:02
von 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...
Verfasst: Sa 12. Feb 2005, 12:54
von Halchteranerin
Ein Beitrag von der Contenido-FAQ zum Thema tabellenfreie Layouts:
http://www.thilo-sommer.de/PHPMyFAQ/ind ... 87&lang=de
Verfasst: Mi 11. Mai 2005, 15:51
von #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;
?>
Verfasst: Mi 11. Mai 2005, 22:18
von 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
Verfasst: Fr 10. Jun 2005, 20:01
von Halchteranerin
Hauptnavigation mit 4 Ebenen von i-fekt (ehem. Craxx
):
http://www.contenido.org/forum/viewtopic.php?t=8562
Verfasst: Do 7. Jul 2005, 23:37
von 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
Verfasst: Do 7. Jul 2005, 23:56
von 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.
Verfasst: Mo 11. Jul 2005, 20:11
von Halchteranerin
Aus dem Hause "vp"
auch noch eine vertikale tabellenfreie Sitemap mit validem Code.
http://www.contenido.org/forum/viewtopic.php?t=8875
Verfasst: Mo 11. Jul 2005, 20:22
von Dodger77
Ob vertikal, horizontal oder diagonal hängt nicht mit dem Modul, sondern nur mit dem richtigen Einsatz von CSS ab.
Verfasst: Mo 11. Jul 2005, 20:38
von Halchteranerin
Diagonal waere nicht schlecht.
Jaaaa, stimmt, hast recht ... meine ist jetzt vertikal.
Verfasst: Mo 1. Aug 2005, 21:41
von 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