ComputerBase Menü
Aktuelles

CSS Aktiven Link andersfarbig gestalten

X

Xethon

Lieutenant
Registriert
Feb. 2005
Beiträge
533
Hi,

ich bin gerade am verzweifeln. Ich will einen Link, den der Besucher angeklickt hat und auf dessen Seite er sich befindet andersfarbig hervorheben, damit der Besucher weiß, auf welcher Seite er sich gerade befindet.

Ich habe durch meine ewige Sucherei eben bis jetzt nur herausgefunden, dass man den aktiven Links eine andere ID geben muss, aber wie soll das gehen? Ich benutze Wordpress in Verbindung mit dem Framework Thematic und mache dafür ein Child Theme.

Hier ein Link zur Veranschaulichung (Quelltext): http://www.logoyo.de/wp

Ich stehe echt auf dem Schlauch und weiß nicht,wie ich das umsetzen kann.
 
Nein, das geht auch gut mit CSS.

Hier mal mein alter Thread:
https://www.computerbase.de/forum/threads/unterstuetzung-bei-tab-menue.734897/

Die Links in #2 solltest du dir mal in Ruhe anschauen, da wird alles erklärt.

Hier nochmal meine jetzige Site, noch als Grundgerüst:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Arztpraxis Herrmann - Allgemein- und Arbeitsmedizin in Freiberg</title>
<meta name="editor" content="Windows Editor">
<link href="format.css" type="text/css" rel="stylesheet" />
<link rel="SHORTCUT ICON" href="bilder/icon.ico" type="image/x-icon">


	
	


</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">


<div id="inhalt" align="center">

 
 
<div id="bg_tabm">
<div id="ib">
    <div id="tabmenue">
	<h1 align="center">Arztpraxis Herrmann</h1>
        <ul>
            <li><a align="center" class="ca" title="Adresse, Telefon, Sprechzeiten, Aktuelles" href="#">Die Praxis</a></li>
            <li><a align="center" class="cb" title="Tätigkeitsspektrum" href="#">Allgemeinmedizin</a></li>
            <li><a align="center" class="cc" title="Seite 3" href="#">Arbeitsmedizin</a></li>
            <li><a align="center" class="cd" title="Anfahrt, Wegbeschreibung" href="#">Lageplan</a></li>
        </ul>
    </div>
 </div>	
 </div>
 
 
 
 <h1>Überschrift Überschrift Übersachrift</h1><br><br>CONTENT
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>CONTENT
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>CONTENT
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>CONTENT
 
 
</div>
<br>
<div id="bottom">
das wäre dann der Bottom DIV
</div>



</body>
</html>


Dazu das CSS-File:
Code: 
div#inhalt{
border: 2px solid #7a957a;
text-align: left;
width: 780px;
margin: 0 auto;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
 background-color: #f4f7f2;  
}

div#bottom{
border: 2px solid #7a957a;
text-align: left;
width: 780px;
margin: 0 auto;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
}

#bg_tabm{
border: 0px solid #7a957a;
text-align: left;
width: 780px;
margin: 0 auto;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
height: 130px; 
}

#tabmenue {
   background-color: transparent;
   text-align: center;
   margin: auto;
   position: absolute;
   }
   
#tabmenue LI {
   background-color: #be6;
   padding: 0;
   margin: 0;
   list-style: none;
   width: 195px;
   height: 30px;
   display:inline;
   }

#tabmenue UL {
   background-color: #6be;
   padding: 0;
   margin: 0;
   }   


#tabmenue A {
   font: bold 1em sans-serif;
   color: #000;
   text-decoration: none;
   display:block;
   padding: 0;
   margin: 5px;
   width: 181px;
   height: 26px;
   float:left;
   text-align: center;
   line-height:27px;
   }

#tabmenue A:link,
#tabmenue A:visited {
   background-color: #9c9;
   padding: 0;
   border: 2px solid #9c9;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   }

#tabmenue A:hover,
#tabmenue A:focus {
   background-color: #ded;
   padding: 0;
   border: 2px solid #7a957a;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   }
   
#ia #tabmenue A.ca,
#ib #tabmenue A.cb,
#ic #tabmenue A.cc,
#id #tabmenue A.cd {
   background-color: #ded;
   padding: 0;
   margin: 5px;
   }
 
Zuletzt bearbeitet:
@Pelzameise

Das mag vielleicht bei einer statischen Webseite funktionieren, aber nicht mit Wordpress. In deinem Fall hast du für jede Seite eine eigene Datei, nehme ich an?

@Xethon

Schon mal bei Wordpress nach einem möglichen Addon geschaut? Evtl. mal dort im Forum suchen. Nach dieser Option haben bestimmt schon mehrere gefragt.
 
Gut, das habe ich nicht bedacht, mit Wordpress hab ich noch nichts gemacht. Wenn du mit den Links wirklich nur den Inhalt änderst, dann würde ich auch auf PHP tippen.
 
@ Xethon:

"Stefan-" hat bereits die optimale Lösung für dich herausgesucht. Da sich der Quellcode-Aufwand sehr in Grenzen hält, wären da Worpdress-Plug-ins oder andere Mittel quasi der "Overkill" :)
 
mit current_page_item habe ich es hinbekommen :)

nur wird jetzt auch der Link in der Sidebar grün hinterlegt. Schaut es euch mal an. Das ist ärgerlich, weil beide Links über current_page_item gesteuert werden :(
 
Ahh wunderbar! :)

Nur ein Problem besteht jetzt noch, und zwar soll die Schriftfarbe der aktiven Links weiß sein und nicht in diesem grau.
Habe deshalb folgendes gemacht:

Code: 
ul.sf-menu li.current_page_item {
 background-color: #409f00;
 color: #FFF;
}

Aber die Schriftfarbe wird einfach nicht weiß. Irgendein CSS-Befehl aus dem Eltern-Theme "Thematic" färbt die Links trotzdem grau. Laut Firebug kommt das grau (#666666) vom Selektor

Code: 
.sf-menu a, .sf-menu a:visited {
color:#666666;
}

Alle Links in .sf-menu werden grau gemacht aber bei :hover werden sie auch weiß warum nicht auch bei current_page_item so wie ich es festgelegt habe?
 
HTML: 
ul.sf-menu li.current_page_item {
background-color:#409f00;
}

ul.sf-menu li.current_page_item a {
color:#ffffff;
}

So?
 
Ich danke dir!

Ich muss mich wohl nochn bisschen mit den ganzen Klassen in dem Framework beschäftigen. Die verwirren mich nämlich alle ein bisschen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 170 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz