aktuelle Seite in der Navigation hervorheben

darkjumper

Hallo zusammen,

falls ich versehentlich ein altes Thema neu erstelle, würde ich mich über den link zu diesem thema bedanken.

Wenn nicht, hier mein Problem:

Ich habe eine Navigation und wenn man über die einzelnen "Themen" (z.b. Home) geht, werden sie farbig hinterlegt. Ziel ist es, dass die farbige Hinterlegung bleibt und nicht sofort nach dem Anklicken wieder verschwindet.

Für eine einfache Erklärung wäre ich sehr dankbar, da ich noch kaum Erfahrungen mit programmieren gemacht habe

Bleistift

da sowas das einfachste in CSS ist schätz ich mal das du davon noch nie etwas gehört hast !?
füg einfach folgendes im html-dokument ein:

HTML

<style type="text/css">
a:visited {
background-color: #XXXXXX;
}
</style>

XXXXXX durch Wunschfarbe ersetzen
Beispiel Schwarz: #000000; Beispiel Weiß: #FFFFFF;
solltest du mit css vertraut sein fügst du alles ab a:visited.. in deine css ein

:visited ist der zustand nach dem anklicken

darkjumper

hallo, erstmal danke für deine Antwort

mein css code sieht jetzt so aus:

CSS

/* ###################################################### */
/* ####################### NAVIGATION ################### */
/* ###################################################### */








#vpnavigation a:visited {
background-color: #4e43f9;
}




#vpnavigation a:hover { /* Strich oben, unten weg + Farbe hervorhebung */
    text-decoration: none;
    color: yellow; /* wenn man draufgeht (schriftfarbe)*/
    background: #4e43f9 /* wenn man draufgeht (hintergrund)*/
}








#vpnavigation, #vpnavigation ul { /* alle Listen */
   padding: 0;
   margin: 0;
   font-family:'Cambria';
   /*font-size: 14px;*/
    /*background: blue;*/
   background-image:url('http://neu.geschichtsverein-sachsenheim.de/cms/upload/Design/backimage_Navi.png');
    background-repeat:x-repeat;
   list-style: none;
   line-height: 3;
    font-weight: bold;
}




#vpnavigation a {
   display: block;
   width: 8em;
   color: white;
}








#vpnavigation li { /* alle Listenelemente */ /*Einzelner Button*/

   float: left;
   width: 100px;
   text-align: center;
}












#vpnavigation li li {
   position: relative;
}












#vpnavigation li:hover ul ul, #vpnavigation li.sfhover ul ul {
   left: -999em;
}




#vpnavigation li:hover ul, #vpnavigation li li:hover ul, #vpnavigation li.sfhover ul, #vpnavigation li li.sfhover ul { /* Listen, die unterhalb von "gehoverten" Menüpunkte liegen */
   left: auto;
}




#vpnavigation li#active { /* Listen zur aktuellen Kategorie */
   font-style: italic!important;

}

Alles anzeigen

Stimmt das jetzt so?

p.s. Ich möchte, dass die andere Hintergrundfarbe so bleibt, und nicht sofort wieder verschwindet (nach dem Anklicken)

Bleistift

also erstmal sieht man aufn ersten blick das der code ausm internet gezogen wurde
nicht so praktisch

die :visited definition ist so richtig musst nur schauen ob dann die schriftfarbe bleibt oder nicht.
entweder ist es inherit sprich empfängt infos von :hover oder nicht
Wenn also deine schriftfarbe nun nicht richtig angezeigt wird oder der link unterstrichen ist,
sollte deine css für den angeklickten link so aussehen:

Code

#vpnavigation a:visited {
    text-decoration: none;
    color: Yellow; 
    background-color: #4e43f9
}

darkjumper

also 1. ist das nur ein Beispiel, dass ich verändert habe 8und später komplett veränder)
2. wenn mann mit der Maus drauf geht, stimmt alles! aber wenn man wieder mit der Maus "weggeht" verschwindet der Hintergrund wieder ...

Was ich aber möchte, ist, dass die andere Hintergrundfarbe so bleibt, und nicht sofort wieder verschwindet (nach dem Anklicken)

Bandit

Ich mache eine Wette, das mit visited nicht erreicht wird, was im Endeffekt erwünscht wird. Visited sagt aus, auf welchen Links ich schon war, sprich, wenn ich auf drei Menü-Links war, sind die alle visited. Hier möchte man aber den Menüpunkt hervorheben, auf dessen Seite man gerade ist. Deshalb: http://www.ohne-css.gehts-gar.net/0016.php

Bleistift

Ok dann habe ich das falsch verstanden sorry

darkjumper

danke Bandit, der Meinung bin ich auch...

trotzdem danke Bleistift

aktuelle Seite in der Navigation hervorheben

Tags

Benutzer online in diesem Thema