Zur Navigation

aktiver Link mit anderer Farbe

1 uwe

Hallo,
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>

08.01.2008 19:39

2 Jörg

Hallo Uwe,

wie wär's hiermit:

/* Optional zur Anzeige der aktuellen Rubrik
*/
#listbox ul a.aktiv { background-color: #5b7a97;
color: #fff;
border-left: 7px solid #fc9;
}

Der betreffende Link muss dann nur noch das Attribut class="aktiv" erhalten..

08.01.2008 21:40

3 uwe

Hallo Jörg,
danke für den Hinweis.

Ich hatte das mit dem
class="aktiv" Attribut nicht gemacht.

Gruss
Uwe

09.01.2008 07:28

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]