1
Hallo,
wo wird bei diesem Script der active Link im Menue mit
einer anderen Farbe eingestellt?
Gruss
Uwe
wo wird bei diesem Script der active Link im Menue mit
einer anderen Farbe eingestellt?
Gruss
Uwe
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html
lang="de-de"><head> <meta http-equiv="content-type"
content="text/html;charset=iso-8859-1"><title>Workshop
- Menue-Variationen</title> <script type="text/javascript">
<!--
if (document.layers)
document.write('\<link rel="stylesheet" type="text/css" href="css/mager.css">');
//fuer Netscape 4
//-->
</script>
<style type="text/css">
<!--
/* @import url("css/listmenue.css");
Styles fuer Menues aus verschachtelter Liste
http://barrierefrei.e-workers.de/
Stand: September 03
*/
html {
margin: 0;
padding: 0;
}
body {
background-color: #223546;
color: #fff;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: 101%; /* fuer Opera */
}
/*
Margins und Paddings generell auf 0 setzen
*/
h1, h2, h3, h4, p, ul, li, a {
margin: 0;
padding: 0;
}
/*
===================
ID CONTENT
Alles umschliessende Box, zentriert;
Hintergrundbild hier zusaetzlich einbinden, damit die Menue-"Spalte" durchgehend erscheint (siehe auch Zeile 48).
*/
#content {
position: relative;
width: 780px;
background-image: url(bg-5.jpg);
margin: 10px auto;
padding: 0;
background-color: #47637e;
color: #ccc;
}
/*
===================
ID LISTBOX
*/
#listbox {
position: absolute;
top: 10px;
left: 0;
width: 230px;
background-image: url(bg-5.jpg);
margin: 0;
padding: 0px 6px 6px 6px;
background-color: #47637e;
color: #ccc;
}
/*
Allgemein
*/
#listbox ul {
list-style: none outside;
}
#listbox ul ul {
margin-left: 30px;
}
#listbox ul li {
margin-top: 4px;
background-color: #304e6a;
color: #fff;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
/*
In dieses LI wird die naechste Liste eingeschachtelt
*/
#listbox ul li.ohne { margin: 0;
background-color: transparent;
color: #ccc;
border: 0 none;
}
/*
Allgemeines Aussehen der Links
*/
#listbox ul a {
display: block;
background-color: transparent;
color: #ccc;
padding: 1px 0px 1px 8px; /* 8px Abstand zu border-left (definiert ab Zeile 117) */
font-family: Verdana, sans-serif;
font-size: 85%;
font-variant: small-caps;
font-weight: normal;
text-decoration: none;
}
#listbox ul a:hover {
background-color: #5b7a97;
color: #fff;
border-left: 7px solid #fc9; /* siehe auch Zeile 117 */
}
/* Optional zur Anzeige der aktuellen Rubrik
*/
#listbox ul a.aktiv { background-color: #5b7a97;
color: #fff;
border-left: 7px solid #fc9;
}
/* Erste Ebene
Steuern der verschiedenen Breiten je nach Verschachtelung;
Borders und Paddings jeweils einrechnen;
falls 'transitional': Conditional Comments fuer MSIE notwendig.
*/
#listbox ul li {
width: 230px;
}
#listbox ul a {
width: 215px;
border-left: 7px solid #c0b090;
}
/*
Zweite Ebene
*/
#listbox ul ul li {
width: 200px;
}
#listbox ul ul a {
width: 185px;
border-left: 7px solid #d0c0a0;
}
/*
Dritte Ebene
*/
#listbox ul ul ul li {
width: 170px;
}
#listbox ul ul ul a {
width: 155px;
border-left: 7px solid #e0d0b0;
}
/*
===================
ID TEXTBOX
*/
#textbox {
position: relative; /* MSIE will es so - warum auch immer ... */
margin-left: 245px;
background-color: #e0d0b0;
color: #000;
padding:1em;
border-width:3px; border-style:solid; border-color: white #999 #999 white;
border-top-width:3px; border-bottom-width:3px;
}
#textbox p {
margin-top: 10px;
padding: 0 30px 10px 40px;
font-size: 85%;
line-height: 150%;
}
/*
Headings
*/
#textbox h1 {
font-size: 150%;
letter-spacing: 2pt;
padding: 30px 0px 20px 20px;
background-color: #d0c0a0;
color: #666;
}
#textbox h2 {
font-size: 130%;
letter-spacing: 1pt;
padding: 15px 0px 10px 30px;
background-color: #d9c9a9;
color: #666;
}
#textbox h3 {
font-size: 115%;
letter-spacing: 1pt;
padding: 10px 0px 10px 35px;
background-color: #d9c9a9;
color: #666;
}
#textbox h4 {
font-size: 100%;
letter-spacing: 1pt;
padding: 10px 0px 10px 40px;
background-color: #d9c9a9;
color: #333;
}
/*
Links
*/
#textbox a {
text-decoration: none;
border-bottom: 1px solid #c0b090;
border-left: 1px solid #c0b090;
padding: 0px 3px;
}
#textbox a:link {
background-color: #e9d9b9;
color: #600;
}
#textbox a:visited {
background-color: #e9d9b9;
color: #600;
}
#textbox a:hover {
background-color: #e9d9b9;
color: #900;
}
#textbox a:active {
background-color: #e9d9b9;
color: #900;
}
/*
Seitenanfang
*/
#textbox div.topper {
padding: 10px 0px 10px 0px;
background-color: #d9c9a9;
color: #333;
}
/*
===================
Sonstige
*/
.invis, hr {
display: none;
}
img {
border: none;
}
/*
Getestet mit:
Moz, IE6, Opera7 unter Win
*/
-->
</style></head><body><div style="width: 900px;"
id="top">
<a name="top" class="invis"> </a><a
href="#listbox" class="invis">Zum Menü
springen</a>
</div><hr><div style="width: 832px;" id="content"><div
style="width: 600px;" id="textbox"><h1>3.2.2
Headline</h1>
<br><hr><div class="topper"><p><a
href="menues.php">Menue-Variationen</a>
|
<a href="../../p_workshops.php">Workshop-Übersicht</a>
|
<a href="../impressum.html" class="sub">Impressum</a>
</p><p><a href="#top">Seitenanfang</a><br>
<small>(c) 200 www.</small>
</p></div><hr></div><!-- id=textbox --><div
id="listbox"><a name="listbox" class="invis"></a><h3
class="invis">Hauptmenü</h3>
<ul id="navi"> <span class="invis">RubrikMenue</span>
<li><a href="../test3.html">Startseite</a></li>
<li class="ohne"><span class="invis">SubMenue</span><ul>
<li><a href="../test3.html">Starti</a></li>
<li><a href="../test3.html">Starting Side</a></li>
</ul></li><li><a href="../test3.html">AAA</a></li>
<li><a href="../test3.html">BBB</a></li>
<li class="ohne"><span class="invis">SubMenue</span>
<ul> <li><a href="../test3.html">CCC
Küche</a></li>
<li><a href="../test3.html">1111i</a></li>
<li><a href="../test3.html">2222</a></li>
</ul> </li> <li><a href="../test3.html">Links</a></li>
<li class="ohne"><span class="invis">SubMenue</span><ul>
<li><a href="../test3.html">eins</a></li>
<li><a href="../test3.html">zwei</a></li>
</ul></li><li><a href="../test3.html">E-Mail</a></li>
<li><a href="../test3.html">Impressum</a></li>
<li class="ohne"><span class="invis">SubMenue</span><ul></ul></li>
<li><a href="../test3.html">buch</a></li>
<li><a href="../test3.html">prospekt</a></li>
<li><a href="../test3.html">plan</a></li>
</ul><hr><p class="invis"><a href="#top">Seitenanfang</a>
</p><hr></div><!-- id=listbox --></div><!-- id=content --></body></html>