Moin,
Habe das Thema mit den Skip-Links mal ausgearbeitet, bin zu dem Endschluß gekommen den
Label-Tag dafür einzusetzen.
Vorteil ist das dieser in der Semantik keine Rolle spielt
(zweifel).
Funktioniert auch wunderbar, zumal mit TABs-Bewegung sofort der nächste Skip-Link im Focus ist.
Leider hat der oben beschreiben IE6 / XPsp2 da ein Problem den LINK auch anzuzeigen falls er im FOCUS / ACTIVE steht.
Auch hier dieses Phänomen, wird erst in die BOX geklickt funktioniert auch der Focus???
Schein mir das gleiche Thema wie bei der Galerie ohne JavaScript zu sein,
http://www.xhtmlforum.de/viewtopic.php?p=10398#10398
Aber im
Mozilla funktioniert es perfekt, was meint Ihr zu dieser Lösung.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>
<style type="text/css" media="screen" title="Druckvorschau-semantic-Test">
/*<![CDATA[*/
html,body {
margin: 0;
padding: 0;
background-color: #EECC33;
color: #000000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 100.01%;
}
.box {
height: 5em;
margin: 2em;
border: 1px solid #000000;
padding: 1em;
background-color: #EEEEEE;
}
pre { /* sichtbar-test */
background-color: #FF0000;
}
/* workaround WinXP SP2 */
a, a:link, a:visited, a:hover, a:focus, a:active {}
/* ENDE / workaround WinXP SP2 */
label { /* nicht notwendig */
display: block;
}
label a,
label a:link,
label a:visited,
label a:hover
{
color: #EEEEEE; /* = nicht sichtbar >> #box {background-color: inherit;} */
}
label a:focus,
label a:active {
color: #000000;
background-color: #FFAA22;
}
/*]]>*/
</style>
</head>
<body><pre><label id="top"></label></pre>
<h1>skip-Links mit label-Tag</h1>
<div class="box">
<label id="skip1">skip this</label>
link
link
link
link
</div>
<div class="box">
<label id="skip2">skip this</label>
link
link
link
link
</div>
<div class="box">
<label id="skip3">skip this</label>
link
link
link
link
</div>
<div class="box">
<label id="skip4">skip this</label>
link
link
link
link
</div>
zum Seitenanfang</p>
</body></html>
<edit 11.10.2004>
Quellcode entsprechend folgendem THREAD geändert !
</edit 11.10.2004>