barrierefreie frames

20.08.2005, 23:57

Hallo,

hier mal ein kleines tutorial!
frames sind normaler weise nicht barierefrei:
http://www.marlem-software.de/behindirh.html#Frames

wer aber auf frames nicht verzichten will, braucht nicht traurig sein, den mit dem guten css ist es möglich barrierefreie frames zu schaffen:

Code:
/* HTML als 100% definieren, dann klappt es auch mit %-Angaben!!!*/
html, body {
    margin:0;
    padding:0;
    height:100%;
    overflow:hidden;
    }

#Menue{font-size:100%;
       font-family:Verdana, Arial, Helvetica,sans-serif;
       color:white;
       background-color:#07B32B;
       Border-style:solid;
       border-color:black;
       border-width:1;
       top: 0px;
       height: 20%;
       width: 99%;
       text-align:center;
       padding-bottom:2px;
       }


#Inhalt{font-size:100%;
       font-family:Verdana, Arial, Helvetica,sans-serif;
       color:black;
       background-color:#eeffee;;
       Border-style:solid;
       border-color:black;
       border-width:1;
       Height: 67%;
       width: 99%;
       overflow: auto;
       }

#Statuszeile{font-size:100%;
             font-family:Verdana, Arial, Helvetica,sans-serif;
             color:black;
             background-color:#07B32B;
             border-style:solid;
             border-color:black;
             border-width:1;
             bottom: 0px;
             height: 13%;
             width: 99%;
             }


.NormalerText{font-size:100%;font-weight:normal;
              font-family:Verdana, Arial, Helvetica, sans-serif;
              color:#000080; }






 ul.navigation { border-color: #07B32B;
                 background-color: #07B32B;
                 border-style:
                 solid none;
                 border-width: 0px;
                 margin-left:0px;

               }
 ul.navigation, li.navigation { display: inline; }

 /*Padding: innenabstand. oben,rechts,unten links */
 li.navigation { padding: 1px 5px 1px 5px; }

.zentriert{text-align:center;}
.block{text-align:justify;}

wichtig für die frames sind die ids:
#Menue
#Inhalt
#Statuszeile

die html-seite kann dann z.b. so aussehen:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>
Support of Handicapped GmbH
</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</HEAD>
<BODY>

<div id="Menue">
<h2 align="center">Support of Handicapped GmbH</h2>
 <ul class="navigation">
    <li class="navigation">
    <a href="index.htm" title="Startseite">Startseite</a>
    </li>
    <li class="navigation">
    <a href="produkte.htm" title="Produkte">Produkte</a>
    </li>
    <li class="navigation">
    <a href="" title="">wir &uuml;ber uns</a>
    </li>
    <li class="navigation">
    <a href="" title="">Forum</a>
    </li>
    <li class="navigation">
    <a href="" title="">Impressum</a>
    </li>
    <li class="navigation">
    <a href="" title="">AGBs</a>
    </li>
    <li class="navigation">
    <a href="" title="">Downloads</a>
    </li>
  </ul>
</div>
<div class="NormalerText" id="Inhalt">
<h3>Produkte</h3>
<b>Umfeldkontrolle</b><br>
James<br>
Nemo<br>
Remo Boost<br>
<br>
Zubehör:<br>
-Taster und Sensoren<br>
-Halterungen<br>
<br>
<b>Patientenrufsystem</b><br>
<br>
<b>Kommunikation</b><br>
<br>
<b>Computerarbeitsplatz</b><br>
<br>
Blattwendegerät<br>
Rampen<br>
<br>
Antidekubitus-Matratzen<br>
</div>
<div id="Statuszeile">
S.o.H. GmbH - Vogelherd 16 - D-74937 Spechbach
Tel. +49 6226 787155 - Fax. +49 06226 787156- e-mail SOH-MS@t-online.de
</div>

</BODY>
</HTML>

das ergebnis sieht dann z.b. so aus:
http://marlem-software.de/SOH/produkte.htm

scrollbalken kommen im ie und opera und firefox! eben wie bei frames, aber mit CSS!!!

gruß

Markus