barrierefreie frames

      barrierefreie frames

      Hallo,

      hier mal ein kleines tutorial!
      frames sind normaler weise nicht barierefrei:
      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:

      Quellcode

      1. /* HTML als 100% definieren, dann klappt es auch mit %-Angaben!!!*/
      2. html, body {
      3. margin:0;
      4. padding:0;
      5. height:100%;
      6. overflow:hidden;
      7. }
      8. #Menue{font-size:100%;
      9. font-family:Verdana, Arial, Helvetica,sans-serif;
      10. color:white;
      11. background-color:#07B32B;
      12. Border-style:solid;
      13. border-color:black;
      14. border-width:1;
      15. top: 0px;
      16. height: 20%;
      17. width: 99%;
      18. text-align:center;
      19. padding-bottom:2px;
      20. }
      21. #Inhalt{font-size:100%;
      22. font-family:Verdana, Arial, Helvetica,sans-serif;
      23. color:black;
      24. background-color:#eeffee;;
      25. Border-style:solid;
      26. border-color:black;
      27. border-width:1;
      28. Height: 67%;
      29. width: 99%;
      30. overflow: auto;
      31. }
      32. #Statuszeile{font-size:100%;
      33. font-family:Verdana, Arial, Helvetica,sans-serif;
      34. color:black;
      35. background-color:#07B32B;
      36. border-style:solid;
      37. border-color:black;
      38. border-width:1;
      39. bottom: 0px;
      40. height: 13%;
      41. width: 99%;
      42. }
      43. .NormalerText{font-size:100%;font-weight:normal;
      44. font-family:Verdana, Arial, Helvetica, sans-serif;
      45. color:#000080; }
      46. ul.navigation { border-color: #07B32B;
      47. background-color: #07B32B;
      48. border-style:
      49. solid none;
      50. border-width: 0px;
      51. margin-left:0px;
      52. }
      53. ul.navigation, li.navigation { display: inline; }
      54. /*Padding: innenabstand. oben,rechts,unten links */
      55. li.navigation { padding: 1px 5px 1px 5px; }
      56. .zentriert{text-align:center;}
      57. .block{text-align:justify;}


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

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

      Quellcode

      1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      2. <HTML>
      3. <HEAD>
      4. <TITLE>
      5. Support of Handicapped GmbH
      6. </TITLE>
      7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      8. <link rel="stylesheet" type="text/css" href="style.css">
      9. </HEAD>
      10. <BODY>
      11. <div id="Menue">
      12. <h2 align="center">Support of Handicapped GmbH</h2>
      13. <ul class="navigation">
      14. <li class="navigation">
      15. <a href="index.htm" title="Startseite">Startseite</a>
      16. </li>
      17. <li class="navigation">
      18. <a href="produkte.htm" title="Produkte">Produkte</a>
      19. </li>
      20. <li class="navigation">
      21. <a href="" title="">wir &uuml;ber uns</a>
      22. </li>
      23. <li class="navigation">
      24. <a href="" title="">Forum</a>
      25. </li>
      26. <li class="navigation">
      27. <a href="" title="">Impressum</a>
      28. </li>
      29. <li class="navigation">
      30. <a href="" title="">AGBs</a>
      31. </li>
      32. <li class="navigation">
      33. <a href="" title="">Downloads</a>
      34. </li>
      35. </ul>
      36. </div>
      37. <div class="NormalerText" id="Inhalt">
      38. <h3>Produkte</h3>
      39. <b>Umfeldkontrolle</b><br>
      40. James<br>
      41. Nemo<br>
      42. Remo Boost<br>
      43. <br>
      44. Zubehör:<br>
      45. -Taster und Sensoren<br>
      46. -Halterungen<br>
      47. <br>
      48. <b>Patientenrufsystem</b><br>
      49. <br>
      50. <b>Kommunikation</b><br>
      51. <br>
      52. <b>Computerarbeitsplatz</b><br>
      53. <br>
      54. Blattwendegerät<br>
      55. Rampen<br>
      56. <br>
      57. Antidekubitus-Matratzen<br>
      58. </div>
      59. <div id="Statuszeile">
      60. S.o.H. GmbH - Vogelherd 16 - D-74937 Spechbach
      61. Tel. +49 6226 787155 - Fax. +49 06226 787156- e-mail SOH-MS@t-online.de
      62. </div>
      63. </BODY>
      64. </HTML>


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

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

      gruß


      Markus