+- net-board.net Archiv (https://net-board.net)
+-- Forum: Deine eigene Homepage (https://net-board.net/forumdisplay.php?fid=26)
+--- Forum: Scriptsprachen (+Datenbanksysteme) (https://net-board.net/forumdisplay.php?fid=19)
+---- Forum: Tutorials und Artikel: Programmieren und Datenbanken (https://net-board.net/forumdisplay.php?fid=15)
+---- Thema: barrierefreie frames (/showthread.php?tid=5156)
barrierefreie frames - marlem - 20.08.2005
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 ü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