Supportnet / Forum / Webseiten/HTML
Eine Frage zu a:active
Frage
Hallo
Wie schon im Betreff erwähnt habe ich eine Frage zu a:active.
Ich habe eine Web Site mit einer Navigationsleiste in einem separaten Frame. Also die Site insgesamt besteht aus 3 Frame´s Überschrift, Navigation und Hauptseite.
Ich habe dann mit a:active die Navigationsleiste so konfiguriert das immer der Aktuelle Link rot eingefärbt bleibt und mit a:hover das wenn man über die einzelnen Links geht sie ebenfalls rot werden.
Wenn ich nun einen Link anklicke wird er rot und bleibt es auch. Das Problem ist nur, das das die Markierung weggeht sobald ich irgendwo anders auf der Seite hinklicke. Sei es auf einen Link in der Hauptseite oder auch nur auf eine Stelle hinter der Nichtmahl ein Link liegt.
Ich möchte aber dass der aktive Link/Button in der Navigation solange rot bleibt bis ich einen anderen Link/Button in dieser Navigationsleiste angeklickt habe. Also egal wo ich auf der Seite hinklicke, ob nun auf einen Link in der Hauptseite oder irgendwo anders hin (außer die Button in der Navileiste), der aktive Link/Button soll rot bleiben. (war das jetzt doppeltgemoppelt :) )
Ich hoffe das sich jemand die Zeit und die Mühe macht meinen Beitrag zu lesen und noch mehr hoffe ich auf Tipps die mein Problem beheben können. Dafür möchte ich mich hier und jetzt schon einmal bedanken.
devilduck
Und um das ganze etwas vorstellbarer zu machen hier der HTML Code von der Navigationsleiste:
<html><head>
<title>Verzeichnisse</title>
<style type="text/css">
.menu {
text-decoration: none;
}
.sub {
display: none;
text-decoration: none;
}
div#menuLayer {
width: 10em;
margin: 0; padding: 0.8em;
}
* html div#menuLayer { /* Korrekturen fuer IE 5.x */
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
div#menuLayer li {
list-style: none;
margin: 0.4em; padding: 0;
}
div#menuLayer li ul {
margin: 0 0 0 1em; padding: 0;
}
div#menuLayer li ul li {
margin: 0.1em 0;
}
* html div#menuLayer li ul li { /* Korrektur fuer IE 5.x */
margin-left: 1em;
ma\rgin-left: 0;
}
div#menuLayer a {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #000000;
* html div#menuLayer a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 8.8em; /* Breitenangabe fuer IE 6 */
}
* html div#menuLayer li ul li a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 7.8em; /* Breitenangabe fuer IE 6 */
}
div#menuLayer a:hover {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
div#menuLayer a:active {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
</style>
<script language="JavaScript1.2">
function doMenu(id,display) {
document.getElementById(id).style.display = display;
}
</script>
</head>
<body>
<div id="menuLayer">
<b id="menu1" style=";cursor:hand;">
<a href="#" onmouseup="doMenu(´menu1sub´,´block´);doMenu(´menu2sub´,´none´);">
<div class="menu"><font size="4">Verzeichnis 1</font></div></a></b>
<div id="menu1sub" class="sub"></div>
<br>
<b id="menu2">
<a href="#" onmouseup="doMenu(´menu2sub´,´block´);doMenu(´menu1sub´,´none´);">
<div class="menu"><font size="4">Verzeichnis 2</font></div></a></b>
<div id="menu2sub" class="sub">
<li><a href="#">
<font size="3" face="Arial, Helvetica, sans-serif, font-size 8pt">Unterverzeichnis 2.1</font></a></li>
<li><a href="#">
<font size="3" face="Arial, Helvetica, sans-serif, font-size 8pt">Unterverzeichnis 2.2</font></a></li>
<li><a href="#">
<font size="3" face="Arial, Helvetica, sans-serif, font-size 8pt">Unterverzeichnis 2.3</font></a></li>
</div>
</div>
</body>
</html>
Antwort 1 von 007
Hi, füge mal noch a:visited und a.link hinzu.
Antwort 2 von devilduck
Also es klappt irgendwie nicht. Wenn ich wo anders hinklicke egal ob link oder irgendwo anders auf der seite sind die Markierten aktiven Button in der Navi Leiste wieder weg und sehen aus wie alle anderen.
Oder habe ich vieleicht was falsch gemacht beim einfügen von a:link und a: visited? Wie müsste ich sie einfügen?
ich habe das so gemacht:
div#menuLayer a:link {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
div#menuLayer a:visited {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
ist das falsch *grübel*
Oder habe ich vieleicht was falsch gemacht beim einfügen von a:link und a: visited? Wie müsste ich sie einfügen?
ich habe das so gemacht:
div#menuLayer a:link {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
div#menuLayer a:visited {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
ist das falsch *grübel*
Antwort 3 von rfb
hast du die korrekte Reihenfolge beachtet? Siehe: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_vis...
Antwort 4 von devilduck
Ja habe ich. Erst das ganze mit a:link dann mit a:visited dann a:hover und dann a:active.
Wenn ich das so mache sind alle Button von anfang an rot und bleiben auch rot egal wo ich hinklicke. es soll aber immer nur der Active Link rot sein bis ich einen anderen auswähle und alle anderen Linkkbutton sollen transparent sein.
Wenn ich das so mache sind alle Button von anfang an rot und bleiben auch rot egal wo ich hinklicke. es soll aber immer nur der Active Link rot sein bis ich einen anderen auswähle und alle anderen Linkkbutton sollen transparent sein.
Antwort 5 von rfb
und wie sieht dein Quellcode jetzt aus?
Antwort 6 von devilduck
so,
<html><head>
<title>Verzeichnisse</title>
<style type="text/css">
.menu {
text-decoration: none;
}
.sub {
display: none;
text-decoration: none;
}
div#menuLayer {
width: 10em;
margin: 0; padding: 0.8em;
}
* html div#menuLayer { /* Korrekturen fuer IE 5.x */
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
div#menuLayer li {
list-style: none;
margin: 0.4em; padding: 0;
}
div#menuLayer li ul {
margin: 0 0 0 1em; padding: 0;
}
div#menuLayer li ul li {
margin: 0.1em 0;
}
* html div#menuLayer li ul li { /* Korrektur fuer IE 5.x */
margin-left: 1em;
ma\rgin-left: 0;
}
div#menuLayer a {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #000000;
* html div#menuLayer a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 8.8em; /* Breitenangabe fuer IE 6 */
}
* html div#menuLayer li ul li a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 7.8em; /* Breitenangabe fuer IE 6 */
}
div#menuLayer a:link {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
div#menuLayer a:visited {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
div#menuLayer a:hover {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
div#menuLayer a:active {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
</style>
<script language="JavaScript1.2">
function doMenu(id,display) {
document.getElementById(id).style.display = display;
}
</script>
</head>
<body>
<div id="menuLayer">
<b id="menu1" style=";cursor:hand;">
<a href="#" onmouseup="doMenu(´menu1sub´,´block´);doMenu(´menu2sub´,´none´);">
<div class="menu"><font size="4">Verzeichnis 1</font></div></a></b>
<div id="menu1sub" class="sub"></div>
<br>
<b id="menu2">
<a href="#" onmouseup="doMenu(´menu2sub´,´block´);doMenu(´menu1sub´,´none´);">
<div class="menu"><font size="4">Verzeichnis 2</font></div></a></b>
<div id="menu2sub" class="sub">
<li><a href="#">
<font size="3" face="Arial, Helvetica, sans-serif, font-size 8pt">Unterverzeichnis 2.1</font></a></li>
<li><a href="#">
<font size="3" face="Arial, Helvetica, sans-serif, font-size 8pt">Unterverzeichnis 2.2</font></a></li>
<li><a href="#">
<font size="3" face="Arial, Helvetica, sans-serif, font-size 8pt">Unterverzeichnis 2.3</font></a></li>
</div>
</div>
</body>
</html>
Ich habe einfach nur die beiden Pseudoklassen hinzugefügt.
<html><head>
<title>Verzeichnisse</title>
<style type="text/css">
.menu {
text-decoration: none;
}
.sub {
display: none;
text-decoration: none;
}
div#menuLayer {
width: 10em;
margin: 0; padding: 0.8em;
}
* html div#menuLayer { /* Korrekturen fuer IE 5.x */
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
div#menuLayer li {
list-style: none;
margin: 0.4em; padding: 0;
}
div#menuLayer li ul {
margin: 0 0 0 1em; padding: 0;
}
div#menuLayer li ul li {
margin: 0.1em 0;
}
* html div#menuLayer li ul li { /* Korrektur fuer IE 5.x */
margin-left: 1em;
ma\rgin-left: 0;
}
div#menuLayer a {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #000000;
* html div#menuLayer a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 8.8em; /* Breitenangabe fuer IE 6 */
}
* html div#menuLayer li ul li a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 7.8em; /* Breitenangabe fuer IE 6 */
}
div#menuLayer a:link {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
div#menuLayer a:visited {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
div#menuLayer a:hover {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
div#menuLayer a:active {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
</style>
<script language="JavaScript1.2">
function doMenu(id,display) {
document.getElementById(id).style.display = display;
}
</script>
</head>
<body>
<div id="menuLayer">
<b id="menu1" style=";cursor:hand;">
<a href="#" onmouseup="doMenu(´menu1sub´,´block´);doMenu(´menu2sub´,´none´);">
<div class="menu"><font size="4">Verzeichnis 1</font></div></a></b>
<div id="menu1sub" class="sub"></div>
<br>
<b id="menu2">
<a href="#" onmouseup="doMenu(´menu2sub´,´block´);doMenu(´menu1sub´,´none´);">
<div class="menu"><font size="4">Verzeichnis 2</font></div></a></b>
<div id="menu2sub" class="sub">
<li><a href="#">
<font size="3" face="Arial, Helvetica, sans-serif, font-size 8pt">Unterverzeichnis 2.1</font></a></li>
<li><a href="#">
<font size="3" face="Arial, Helvetica, sans-serif, font-size 8pt">Unterverzeichnis 2.2</font></a></li>
<li><a href="#">
<font size="3" face="Arial, Helvetica, sans-serif, font-size 8pt">Unterverzeichnis 2.3</font></a></li>
</div>
</div>
</body>
</html>
Ich habe einfach nur die beiden Pseudoklassen hinzugefügt.
Antwort 7 von rfb
Zitat:
Ich habe einfach nur die beiden Pseudoklassen hinzugefügt.
aber mit identischen CSS-Eigenschaften! Wie sollen die sich da unterscheiden?Ich habe einfach nur die beiden Pseudoklassen hinzugefügt.
Antwort 8 von devilduck
hab den Code nun geändert mit dem Ergebnis das es genauso ausschaut wie vorher als ich a:link und a:visited noch nicht in den Code eingearbeitet hatte. Also entweder ist das der falsche Weg oder ich stelle mich arg dusselig an. :(
Antwort 9 von devilduck
mist den Code vergessen. hmpf. also Code ist nun wie folgt:
<html><head>
<title>Verzeichnisse</title>
<style type="text/css">
.menu {
text-decoration: none;
}
.sub {
display: none;
text-decoration: none;
}
div#menuLayer {
width: 10em;
margin: 0; padding: 0.8em;
}
* html div#menuLayer { /* Korrekturen fuer IE 5.x */
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
div#menuLayer li {
list-style: none;
margin: 0.4em; padding: 0;
}
div#menuLayer li ul {
margin: 0 0 0 1em; padding: 0;
}
div#menuLayer li ul li {
margin: 0.1em 0;
}
* html div#menuLayer li ul li { /* Korrektur fuer IE 5.x */
margin-left: 1em;
ma\rgin-left: 0;
}
div#menuLayer a {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #000000;
* html div#menuLayer a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 8.8em; /* Breitenangabe fuer IE 6 */
}
* html div#menuLayer li ul li a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 7.8em; /* Breitenangabe fuer IE 6 */
}
div#menuLayer a:link {
border: 1px solid black;
border-left-color: white; border-top-color: white;
}
div#menuLayer a:visited {
border: 1px solid black;
border-left-color: white; border-top-color: white;
}
div#menuLayer a:hover {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
div#menuLayer a:active {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
</style>
<script language="JavaScript1.2">
function doMenu(id,display) {
document.getElementById(id).style.display = display;
}
</script>
</head>
<body>
<div id="menuLayer">
<b id="menu1" style=";cursor:hand;">
<a href="#" onmouseup="doMenu(´menu1sub´,´block´);doMenu(´menu2sub´,´none´);">
<div class="menu"><font size="4">Verzeichnis 1</font></div></a></b>
<div id="menu1sub" class="sub"></div>
<br>
<b id="menu2">
<a href="#" onmouseup="doMenu(´menu2sub´,´block´);doMenu(´menu1sub´,´none´);">
<div class="menu"><font size="4">Verzeichnis 2</font></div></a></b>
<div id="menu2sub" class="sub">
<li><a href="#">
<font size="3" face="Arial, Helvetica, sans-serif, font-size 8pt">Unterverzeichnis 2.1</font></a></li>
<li><a href="#">
<font size="3" face="Arial, Helvetica, sans-serif, font-size 8pt">Unterverzeichnis 2.2</font></a></li>
<li><a href="#">
<font size="3" face="Arial, Helvetica, sans-serif, font-size 8pt">Unterverzeichnis 2.3</font></a></li>
</div>
</div>
</body>
</html>
<html><head>
<title>Verzeichnisse</title>
<style type="text/css">
.menu {
text-decoration: none;
}
.sub {
display: none;
text-decoration: none;
}
div#menuLayer {
width: 10em;
margin: 0; padding: 0.8em;
}
* html div#menuLayer { /* Korrekturen fuer IE 5.x */
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
div#menuLayer li {
list-style: none;
margin: 0.4em; padding: 0;
}
div#menuLayer li ul {
margin: 0 0 0 1em; padding: 0;
}
div#menuLayer li ul li {
margin: 0.1em 0;
}
* html div#menuLayer li ul li { /* Korrektur fuer IE 5.x */
margin-left: 1em;
ma\rgin-left: 0;
}
div#menuLayer a {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #000000;
* html div#menuLayer a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 8.8em; /* Breitenangabe fuer IE 6 */
}
* html div#menuLayer li ul li a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 7.8em; /* Breitenangabe fuer IE 6 */
}
div#menuLayer a:link {
border: 1px solid black;
border-left-color: white; border-top-color: white;
}
div#menuLayer a:visited {
border: 1px solid black;
border-left-color: white; border-top-color: white;
}
div#menuLayer a:hover {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
div#menuLayer a:active {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
</style>
<script language="JavaScript1.2">
function doMenu(id,display) {
document.getElementById(id).style.display = display;
}
</script>
</head>
<body>
<div id="menuLayer">
<b id="menu1" style=";cursor:hand;">
<a href="#" onmouseup="doMenu(´menu1sub´,´block´);doMenu(´menu2sub´,´none´);">
<div class="menu"><font size="4">Verzeichnis 1</font></div></a></b>
<div id="menu1sub" class="sub"></div>
<br>
<b id="menu2">
<a href="#" onmouseup="doMenu(´menu2sub´,´block´);doMenu(´menu1sub´,´none´);">
<div class="menu"><font size="4">Verzeichnis 2</font></div></a></b>
<div id="menu2sub" class="sub">
<li><a href="#">
<font size="3" face="Arial, Helvetica, sans-serif, font-size 8pt">Unterverzeichnis 2.1</font></a></li>
<li><a href="#">
<font size="3" face="Arial, Helvetica, sans-serif, font-size 8pt">Unterverzeichnis 2.2</font></a></li>
<li><a href="#">
<font size="3" face="Arial, Helvetica, sans-serif, font-size 8pt">Unterverzeichnis 2.3</font></a></li>
</div>
</div>
</body>
</html>
Antwort 10 von rfb
Zitat:
Code nun geändert mit dem Ergebnis das es genauso ausschaut wie vorher
wie geändert?Code nun geändert mit dem Ergebnis das es genauso ausschaut wie vorher
Antwort 11 von devilduck
so geändert ;)
div#menuLayer a:link {
border: 1px solid black;
border-left-color: white; border-top-color: white;
}
div#menuLayer a:visited {
border: 1px solid black;
border-left-color: white; border-top-color: white;
}
div#menuLayer a:hover {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
div#menuLayer a:active {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
div#menuLayer a:link {
border: 1px solid black;
border-left-color: white; border-top-color: white;
}
div#menuLayer a:visited {
border: 1px solid black;
border-left-color: white; border-top-color: white;
}
div#menuLayer a:hover {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
div#menuLayer a:active {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
Antwort 12 von rfb
Berauschend ist der Farb-Unterschied ja sowieso nicht bei den 1px-breiten Rähmchen.
Versuchst du einen inset/outset-Effekt nachzubauen?
Das geht effektiver: http://www.css4you.de/border-style.html
Versuchst du einen inset/outset-Effekt nachzubauen?
Das geht effektiver: http://www.css4you.de/border-style.html
Antwort 13 von devilduck
@rfb
Wer lesen kann ist klar im Vorteil.
Hallo, hast Du Dir überhaupt einmal die Zeit genommen, mein Anliegen bzw. meine Frage zu lesen? Anscheint nicht, denn sonst wäre Dir sicher aufgefallen das Dein vorletzter Post absolut überflüssig war, genauso wie Dein letzter.
Ich möchte Dich bitten Deine geistigen Ergüsse bei Dir zu behalten es sei denn sie tragen in irgendeiner Weise zur Lösung meines Problems bei.
Danke
Und an den Rest da draußen. Hat jemand von Euch eine Idee wie ich das bewerkstelligen könnte?
devilduck
Wer lesen kann ist klar im Vorteil.
Hallo, hast Du Dir überhaupt einmal die Zeit genommen, mein Anliegen bzw. meine Frage zu lesen? Anscheint nicht, denn sonst wäre Dir sicher aufgefallen das Dein vorletzter Post absolut überflüssig war, genauso wie Dein letzter.
Ich möchte Dich bitten Deine geistigen Ergüsse bei Dir zu behalten es sei denn sie tragen in irgendeiner Weise zur Lösung meines Problems bei.
Danke
Und an den Rest da draußen. Hat jemand von Euch eine Idee wie ich das bewerkstelligen könnte?
devilduck
Antwort 14 von 007
Entferne probeweise mal den gesamten Code
div#menuLayer a {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #000000;
da der block die restlichen Links beeinflusst evtl. umbenennen.
Bei a:link und a:hover in background-color: #FF0000; ändern
div#menuLayer a {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #000000;
da der block die restlichen Links beeinflusst evtl. umbenennen.
Bei a:link und a:hover in background-color: #FF0000; ändern
Antwort 15 von devilduck
Hallo 007
Also ich habe Deine Tipps befolgt aber ich konnte leider nicht den erhoften Erfolg feststellen. Wenn ich
div#menuLayer a {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #000000;}
rausnehme werden die Linkbeschriftungen normal in lila für einen bereits besuchten link angezeigt. Ich habe dann die zeilen unten wieder eingefügt
div#menuLayer a:link {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #FF0000;
}
div#menuLayer a:visited {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #000000;
}
div#menuLayer a:hover {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
div#menuLayer a:active {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
aber dann komme ich wieder auf das selbe Ergebnis wie vorher auch schon :(.
hmpf es muss doch eine Möglichkeit geben das der angeklickte Link in der NaviLeiste solange rot bleibt bis ich einen anderen link in der NaviLeiste anklicke.
Aber irgendwie werde ich das schon noch hinbekommen.
Dir aber ein großes Dankeschön für Deine Bemühungen mir zu helfen.
Ps.: weitere Tipps gern gesehen :)
Also ich habe Deine Tipps befolgt aber ich konnte leider nicht den erhoften Erfolg feststellen. Wenn ich
div#menuLayer a {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #000000;}
rausnehme werden die Linkbeschriftungen normal in lila für einen bereits besuchten link angezeigt. Ich habe dann die zeilen unten wieder eingefügt
div#menuLayer a:link {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #FF0000;
}
div#menuLayer a:visited {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: #000000;
}
div#menuLayer a:hover {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
div#menuLayer a:active {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: #FF0000;
}
aber dann komme ich wieder auf das selbe Ergebnis wie vorher auch schon :(.
hmpf es muss doch eine Möglichkeit geben das der angeklickte Link in der NaviLeiste solange rot bleibt bis ich einen anderen link in der NaviLeiste anklicke.
Aber irgendwie werde ich das schon noch hinbekommen.
Dir aber ein großes Dankeschön für Deine Bemühungen mir zu helfen.
Ps.: weitere Tipps gern gesehen :)
Antwort 16 von rfb
Zitat:
Ich möchte Dich bitten Deine geistigen Ergüsse bei Dir zu behalten es sei denn sie tragen in irgendeiner Weise zur Lösung meines Problems bei.
meinst du, so weiter zu kommen? Mit deiner wirren Fragestellung und dem noch chaotischeren Quellcode (bei dem man jedesmal nachfragen muss, bis du ihn endlich rausrückst) und nun auch noch Rummeckern?Ich möchte Dich bitten Deine geistigen Ergüsse bei Dir zu behalten es sei denn sie tragen in irgendeiner Weise zur Lösung meines Problems bei.
Na denn viel Spaß! Und Tschüß!
Antwort 17 von 007
Hi, ich habe einen Code gefunden, vielleicht kannst du ihn dir deinen Vorstellungen entsprechend anpassen.
<!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="fr" lang="fr">
<head>
<title>Menu droulant vertical</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById(´smenu´+i)) {document.getElementById(´smenu´+i).style.display=´none´;}
}
if (d) {d.style.display=´block´;}
}
function auf(tuer) {
if (document.all) {
document.all[tuer].style.display="block"}
}
function zu(tuer) {
if (document.all) {
document.all[tuer].style.display="none"}
}
//-->
</script>
<style type="text/css">
<!--
body { margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif; }
dl, dt, dd, ul, li { margin: 0;
padding: 0;
list-style-type: none; }
#menu_box { position: absolute;
top: 0;
left: 0; }
dl#menu_box { width: 15em; }
dl#menu_box dt { cursor: hand;
margin: 0px 0;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc; }
dl#menu_box dd { border-left: 1px solid gray; border-bottom: 1px solid gray; border-right: 1px solid gray;}
dl#menu_box li { text-align: center;
background: #fff; }
dl#menu_box li a, dl#menu_box dt a { color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%; }
dl#menu_box li a:hover, dl#menu_box dt a:hover { background: #eee; }
#mentions { font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd; }
#mentions a { text-decoration: none;
color: #222; }
#mentions a:hover { text-decoration: underline; }
-->
</style>
</head>
<body>
<dl id="menu_box">
<dt onclick="javascript:montre();"><a href="#">Download</a></dt>
<dt onclick="javascript:montre(´smenu2´);">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>
<!--<dt onclick="javascript:montre(´smenu3´);">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
</ul>
</dd>
-->
<dt onMouseOver="auf(´tuer1´)" onMouseOut="zu(´tuer1´)">Menu 4</dt>
<dd class="smenu4" id="tuer1" onMouseOver="auf(´tuer1´)" onMouseOut="zu(´tuer1´)">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.1</a></li>
</ul>
</dd>
</dl>
</body>
</html>
<!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="fr" lang="fr">
<head>
<title>Menu droulant vertical</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById(´smenu´+i)) {document.getElementById(´smenu´+i).style.display=´none´;}
}
if (d) {d.style.display=´block´;}
}
function auf(tuer) {
if (document.all) {
document.all[tuer].style.display="block"}
}
function zu(tuer) {
if (document.all) {
document.all[tuer].style.display="none"}
}
//-->
</script>
<style type="text/css">
<!--
body { margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif; }
dl, dt, dd, ul, li { margin: 0;
padding: 0;
list-style-type: none; }
#menu_box { position: absolute;
top: 0;
left: 0; }
dl#menu_box { width: 15em; }
dl#menu_box dt { cursor: hand;
margin: 0px 0;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc; }
dl#menu_box dd { border-left: 1px solid gray; border-bottom: 1px solid gray; border-right: 1px solid gray;}
dl#menu_box li { text-align: center;
background: #fff; }
dl#menu_box li a, dl#menu_box dt a { color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%; }
dl#menu_box li a:hover, dl#menu_box dt a:hover { background: #eee; }
#mentions { font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd; }
#mentions a { text-decoration: none;
color: #222; }
#mentions a:hover { text-decoration: underline; }
-->
</style>
</head>
<body>
<dl id="menu_box">
<dt onclick="javascript:montre();"><a href="#">Download</a></dt>
<dt onclick="javascript:montre(´smenu2´);">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>
<!--<dt onclick="javascript:montre(´smenu3´);">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
</ul>
</dd>
-->
<dt onMouseOver="auf(´tuer1´)" onMouseOut="zu(´tuer1´)">Menu 4</dt>
<dd class="smenu4" id="tuer1" onMouseOver="auf(´tuer1´)" onMouseOut="zu(´tuer1´)">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.1</a></li>
</ul>
</dd>
</dl>
</body>
</html>
Antwort 18 von 007
Nachtrag:
Wenn es nicht funktioniert liegt es an den nicht richtig kopierten ´ - Zeichen. Diese musst dann mal in gerade Anführungszeichen ändern.
Wenn es nicht funktioniert liegt es an den nicht richtig kopierten ´ - Zeichen. Diese musst dann mal in gerade Anführungszeichen ändern.
Antwort 19 von 007
Hier noch ein anderes Beispiel.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menue</title>
<meta name="author" content="">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<SCRIPT TYPE="text/javascript">
if (document.getElementById){
document.write(´<style type="text/css">\n´)
document.write(´.submenu{display: none;}\n´)
document.write(´</style>\n´)
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span");
if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar.className=="submenu")
ar.style.display = "none";
}
el.style.display = "block";
} else {
el.style.display = "none";
}
}
}
</SCRIPT>
<style type="text/css">
A:visited { text-decoration:none; color:#808080; }
A:link { text-decoration:none; color:#000000; }
A:active { text-decoration:none; color:#C00000; }
A:hover { text-decoration:underline; color:#009F00; font-weight:bold; }
.menutitle { cursor:hand;
margin-top:5px;
margin-bottom:0px;
background-color:#EBF0FF;
width:151px;
padding:2px;
text-align:center;
font-family:Arial, Tahoma, Helvetica, sans-serif;
font-size:10pt;
font-weight:bold;
color:#0000FF;
border:1px solid #000099;
}
.submenu { display: none;
width:151px;
font-family: Arial, Tahoma, Helvetica, sans-serif;
font-size:10pt;
padding:3px;
border-bottom:solid 1px #000099;
border-right:solid 1px #000099;
border-left:solid 1px #000099;
background-color:#FFFFFF;
}
</style>
</head>
<body bgcolor="#ADD8E6" text="#000000" link="#0000FF" vlink="#0000FF" alink="#FF0000" topmargin="0" leftmargin="0" background="">
<table border="0">
<tr valign="TOP" align="LEFT">
<td width="10"></td>
<td width="165">
<br>
<center><h2>Inhalt</h2></center>
<p><font face="Helvetica,Arial,sans-serif"></font></p>
<div id="masterdiv">
<div class="menutitle" onMouseOver="SwitchMenu(´sub1´)">Startseite</div>
<span class="submenu" id="sub1">
<b></b> <a href="03start.html" target="start">Startseite</a>
</span>
<div class="menutitle" onMouseOver="SwitchMenu(´sub2´)">ber mich</div>
<span class="submenu" id="sub2">
<b></b> <a href="04uebermich.html" target="start">Ich stelle mich vor</a>
</span>
<div class="menutitle" onMouseOver="SwitchMenu(´sub3´)">Sicherheit bei ebay</div>
<span class="submenu" id="sub3">
<b></b> <a href="05ebay.html" target="start">allgemein</a><br>
<b></b> <a href="060spoof.html" target="start">Spoof + Phishing</a><br>
<b></b> <a href="070praev.html" target="start">Prvention</a><br>
<b></b> <a href="071header.html" target="start">Headeranalyse</a><br>
<b></b> <a href="080take.html" target="start">Takeover</a><br>
</span>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menue</title>
<meta name="author" content="">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<SCRIPT TYPE="text/javascript">
if (document.getElementById){
document.write(´<style type="text/css">\n´)
document.write(´.submenu{display: none;}\n´)
document.write(´</style>\n´)
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span");
if(el.style.display != "block"){
for (var i=0; i<ar.length; i++){
if (ar.className=="submenu")
ar.style.display = "none";
}
el.style.display = "block";
} else {
el.style.display = "none";
}
}
}
</SCRIPT>
<style type="text/css">
A:visited { text-decoration:none; color:#808080; }
A:link { text-decoration:none; color:#000000; }
A:active { text-decoration:none; color:#C00000; }
A:hover { text-decoration:underline; color:#009F00; font-weight:bold; }
.menutitle { cursor:hand;
margin-top:5px;
margin-bottom:0px;
background-color:#EBF0FF;
width:151px;
padding:2px;
text-align:center;
font-family:Arial, Tahoma, Helvetica, sans-serif;
font-size:10pt;
font-weight:bold;
color:#0000FF;
border:1px solid #000099;
}
.submenu { display: none;
width:151px;
font-family: Arial, Tahoma, Helvetica, sans-serif;
font-size:10pt;
padding:3px;
border-bottom:solid 1px #000099;
border-right:solid 1px #000099;
border-left:solid 1px #000099;
background-color:#FFFFFF;
}
</style>
</head>
<body bgcolor="#ADD8E6" text="#000000" link="#0000FF" vlink="#0000FF" alink="#FF0000" topmargin="0" leftmargin="0" background="">
<table border="0">
<tr valign="TOP" align="LEFT">
<td width="10"></td>
<td width="165">
<br>
<center><h2>Inhalt</h2></center>
<p><font face="Helvetica,Arial,sans-serif"></font></p>
<div id="masterdiv">
<div class="menutitle" onMouseOver="SwitchMenu(´sub1´)">Startseite</div>
<span class="submenu" id="sub1">
<b></b> <a href="03start.html" target="start">Startseite</a>
</span>
<div class="menutitle" onMouseOver="SwitchMenu(´sub2´)">ber mich</div>
<span class="submenu" id="sub2">
<b></b> <a href="04uebermich.html" target="start">Ich stelle mich vor</a>
</span>
<div class="menutitle" onMouseOver="SwitchMenu(´sub3´)">Sicherheit bei ebay</div>
<span class="submenu" id="sub3">
<b></b> <a href="05ebay.html" target="start">allgemein</a><br>
<b></b> <a href="060spoof.html" target="start">Spoof + Phishing</a><br>
<b></b> <a href="070praev.html" target="start">Prvention</a><br>
<b></b> <a href="071header.html" target="start">Headeranalyse</a><br>
<b></b> <a href="080take.html" target="start">Takeover</a><br>
</span>
</body>
</html>
Antwort 20 von devilduck
@ rfb
Ich frage mich ernsthaft was an meiner Fragestellung nicht zu verstehen ist? Ich habe doch eindeutig beschrieben was mein Problem ist. Dafür das Du nicht schlau daraus wirst, dass liegt nicht an mir.
Und warum sollte ich den Code mehrmals Posten? Er steht doch oft genug da auch die Änderungen.
Ps.: Ich meckere nicht rum, ich habe nur keine Lust mich veräppeln zu lassen.
Ich frage mich ernsthaft was an meiner Fragestellung nicht zu verstehen ist? Ich habe doch eindeutig beschrieben was mein Problem ist. Dafür das Du nicht schlau daraus wirst, dass liegt nicht an mir.
Und warum sollte ich den Code mehrmals Posten? Er steht doch oft genug da auch die Änderungen.
Ps.: Ich meckere nicht rum, ich habe nur keine Lust mich veräppeln zu lassen.
Antwort 21 von rfb
@teufelentchen:
nu wenn du dich nicht veräppeln lassen willst, dann eben noch einen ernstgemeinten Hinweis:
Die dynamische Pseudo-Klasse :active bestimmt das Aussehen von akti...
nu wenn du dich nicht veräppeln lassen willst, dann eben noch einen ernstgemeinten Hinweis:
Die dynamische Pseudo-Klasse :active bestimmt das Aussehen von akti...
Antwort 22 von devilduck
Die dynamische Pseudo-Klasse :active bestimmt das Aussehen von aktivierten Elementen, also von Elementen, die von einem Mauszeiger angeklickt werden.
Genau das will ich und das passiert ja auch. Also ich klicke einen Link an und der Link wird rot und er bleibt es auch wenn ich den Mauszeiger von dem Link runter bewege. Soweit ist alles super.
Nur will ich dass der angeklickte Link solange rot bleibt bis ich einen anderen Link in der Navigationsleiste anklicke, egal wo ich sonst auf der Site hinklicke.
Ob es nun auf eine nicht verlinkte Stelle auf der Site ist oder ob es ein Link auf der Hauptseite ist, der mich zu einer anderen Seite bringt z.B.: ein Word Dokument.
So wie das jetzt ist wird der rot markierte Link wieder transparent sobald ich irgendeinen Klick mit der Maus auf der Site mache.
Ich hoffe jetzt habe ich das etwas verständlicher beschrieben.
Genau das will ich und das passiert ja auch. Also ich klicke einen Link an und der Link wird rot und er bleibt es auch wenn ich den Mauszeiger von dem Link runter bewege. Soweit ist alles super.
Nur will ich dass der angeklickte Link solange rot bleibt bis ich einen anderen Link in der Navigationsleiste anklicke, egal wo ich sonst auf der Site hinklicke.
Ob es nun auf eine nicht verlinkte Stelle auf der Site ist oder ob es ein Link auf der Hauptseite ist, der mich zu einer anderen Seite bringt z.B.: ein Word Dokument.
So wie das jetzt ist wird der rot markierte Link wieder transparent sobald ich irgendeinen Klick mit der Maus auf der Site mache.
Ich hoffe jetzt habe ich das etwas verständlicher beschrieben.
Antwort 23 von rfb
Zitat:
Ich hoffe jetzt habe ich das etwas verständlicher beschrieben.
sagen wir mal: selbst ich habs nun verstanden.Ich hoffe jetzt habe ich das etwas verständlicher beschrieben.
Antwort: mit CSS gehts nicht, da in dem Moment, wo du irgendwo anders hinklickst, der Link nicht mehr aktiv ist.
Abhilfe: per JavaScript dem Link diese Eigenschaft verpassen, das könnte dann z.B. gesteuert werden per
onload