Thema: Aktiven Link mit bestimmten Hintergrund hinterlegen (meine nicht a:active)

Hallo,

Wie schaffe ich es, dass ein gerade angeklickter Link eine von mir bestimmte Hintergrundfarbe (z.b. rot) bekommt, also nicht a:visited, weil dann sind nach ein paar Klicks die ganzen Links rot, wie z.b. hier: http://www.rockettheme.com

Denn bei a:active verändert sich der Link ja nur beim Mausklick darauf!

Also eigentlich ist a:active schon dafür da...

Hast wohl irgendwas falsch in Deiner CSS definiert.

Hallo,

das geht leider nicht richtig mit a:active.
Das geht soweit ich weiß nur bei Frames und bei bestimmten browsern.

Bei Joomla ist das eine extra id="active_menu" oder so bei mir class="chosen".

Wie auch in der geposteten Demoseite, wenn man sich den Quelltext anguckt.
Du kannst das bei Joomla in der in den Seiten Modulen beim entsprechenden Menü
einschalten..

Grüße, Sven.

oh man .. stimmt
a...#active_menu-...

Habs selber schon gemacht und schreib so einen Müll ... sorry und danke an xven für den Hinweis!

Danke xven...

Derexo könntest du kurz ein Bsp. posten, bitte?

//Edit: Brauchst du nicht mehr machen. Habs selber rausgefunden.

Code:

a#active_menu.mainlevel {
  
}

Doch wie macht man das mit dem Topmenü?
Da steht ja schon eine id...

Code:

ul#mainlevel-nav li a

Also ich hab da jetzt noch bissl rumgespielt - du kannst an den Container einen zweiten anhängen:

Code:

ul#mainlevel-nav {
  list-style       : none;
  padding          : 0;
  margin           : 0;
}

ul#mainlevel-nav #active_menu-nav {
background-color: #FF0000;
}
ul#mainlevel-nav li {
  display          : block;
  background-image : none;
  padding-left     : 0px;
  padding-right    : 0px;
  float            : right;
  margin           : 0;
  width            : auto !important;
  font-size        : 10px;
  line-height      : 22px;
  white-space      : nowrap;
  border-left      : 1px solid #cccccc;
}

ul#mainlevel-nav li a {
  font-size        : 10px;
  display          : block;
  padding-left     : 16px;
  padding-right    : 15px;
  text-decoration  : none;
  color            : #999999;
  background       : transparent;
  display: block;
float: left;
width: 50px;
text-align: center;
}

ul#mainlevel-nav li a:hover {
  font-size        : 10px;
  color            : #ffffff;
  background-color: #000000;
}

:-)

Schade bei mir funktioniert es mit beiden nicht!
Aber wenn es bei euch klappt, ist im Template bestimmt ein Fehler...
Ich poste die template_css.css mal hier:

Code:

* {
	margin: 0;
	padding: 0;
}
 
body {
	background: #FFFFFF url(../images/img01.gif) repeat-x;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #4A5157;
}
 
td, tr, p, div { 
font-family : Trebuchet MS, Verdana, sans-serif, Lucida Sans Unicode, Lucida Grande; 
 color : #4A5157; 
 font-size : 13px; 
} 
 
h1, h2, h3 {
	text-transform: lowercase;
	color: #292929;
}

h1 {
	letter-spacing: -1px;
	font-size: 30px;
}

h2 {
	font-size: 24px;
	color: #292929;
}

h3 {
	font-size: 13px;
	color: #292929;
}

div.moduletable a {
	color: #4A5157;
} 
 
div.moduletable { 
 width : 100%; 
 table-layout : auto; 
 margin : 0px 4px 15px 0px; 
 background: url(../images/img06.gif) repeat-x;
} 

div.moduletable h3 {
    height: 27px;
    padding: 6px 0 0 34px;
    background: #C80000 url(../images/img05.gif) no-repeat;
    text-transform: lowercase;
    font-size: 17px;
    color: #FFFFFF;
    margin: 0px 0 10px 0;
}

div.moduletable td { 
 padding : 0 0 0 15px; 
} 
 
ul 
{ 
margin-top: 7px; 
padding: 0; 
list-style: none; 
} 
 
 
li 
{ 
line-height: 15px; 
padding-left: 15px; 
padding-top: 0px; 
background-image: url(../images/arrow.png) ; 
background-repeat: no-repeat; 
background-position: 0px 3px; 
}

/*ul, ol {
	margin-bottom: 2em;
	text-align: justify;
	line-height: 200%;
}

ul {
}

ol {
}*/
 
.button { 
 background-color : #3B3B3B; 
 color : white; 
 margin : 5px; 
} 
 
.inputbox { 
 border : 1px solid #B8D1E8; 
 background : #FFFFFF; 
 color : #003366; 
 margin : 5px; 
} 
 
.sectiontableheader { 
 font-size : 11px; 
 font-weight : bold; 
 text-align : center; 
 color : #FFFFFF; 
 background : #3B3B3B; 
 vertical-align : middle; 
 height : 20px; 
 border-right : 1px solid #fff; 
 padding : 0px 10px; 
} 
 
.sectiontableentry1 { 
 background : #F9F9F9; 
 padding : 3px 5px; 
} 
 
.sectiontableentry2 { 
 background : #F0F0F0; 
 padding : 3px 5px; 
} 
 
a.mainlevel { 
 margin : 0px; 
 padding : 0px; 
 font-size : 12px; 
 width : 150px; 
 text-indent : 10px; 
} 
 
a.mainlevel:link { 
 text-indent : 10px; 
} 
 
a.mainlevel:link, a.mainlevel:visited { 
 display : block; 
 padding : 2px 0px 2px 0px; 
 margin : 1px; 
 text-indent : 10px; 
} 
 
a.mainlevel:hover { 
 text-decoration : none; 
 text-indent : 10px; 
 background : #e0e0e0; 
 border : 1px solid #d0d0d0; 
} 
 
#active_menu { 
 font-weight : bold; 
 color : #003366; 
}
 
a#active_menu:hover { 
} 
 
.sublevel { 
 font-size : 12px; 
} 
 
ul#mainlevel-nav { 
 padding : 0; 
 margin : 0; 
 list-style : none; 
} 
 
ul#mainlevel-nav li { 
 display : block; 
 padding-left : 0px; 
 padding-right : 0px; 
 margin : 0; 
 float : left; 
 font-size : 11px; 
 font-weight : bold; 
 line-height : 20px; 
 white-space : nowrap; 
/* border-left : 1px solid #FFFFFF;*/ 
 
} 
 
ul#mainlevel-nav li a { 
 display : block; 
 padding-left : 10px; 
 padding-right : 10px; 
 text-decoration : none; 
 color : #fff; 
 
} 

ul#mainlevel-nav #active_mainlevel-nav {
   background: #EC0000 url(../images/img03.gif) repeat-x left bottom;
}

ul#mainlevel-nav #active_menu-nav {
  background: #EC0000 url(../images/img03.gif) repeat-x left bottom;
}

ul#mainlevel-nav li a:active {
 background: #EC0000 url(../images/img03.gif) repeat-x left bottom;
}
 
ul#mainlevel-nav li a:hover { 
 background: #EC0000 url(../images/img03.gif) repeat-x left bottom;
} 
 
a:link, a:visited { 
 color : #FF0043; 
 text-decoration : none; 
} 
 
a:hover { 
 color : #FF0043; 
 text-decoration : underline; 
} 
 
a.category:link, a.category:visited { 
 font-weight : bold; 
} 
 
.readon { 
 font-weight : bold; 
} 
 
.pagenavbar { 
 background-color : #F0F0F0; 
 border : 1px solid #e0e0e0; 
 padding : 3px; 
 text-align : center; 
} 
 
.contenttoc { 
 width : 180px; 
 background-color : #F0F0F0; 
 border : 1px solid #e0e0e0; 
 padding : 2px; 
} 
 
.contenttoc th { 
 padding : 3px 5px; 
 font-size : 14px; 
 font-weight : bold; 
 text-align : left; 
 letter-spacing : 1px; 
 color : #003366; 
} 
 
.contenttoc td { 
 padding : 2px 5px; 
} 
 
.small { 
 font-size : 10px; 
 color : #336699; 
} 
 
.smalldark { 
 font-size : 10px; 
 color : #000000; 
} 
 
.createdate, .modifydate { 
 font-size : 10px; 
 color : #336699; 
} 
 
.content_rating { 
 font-size : 10px; 
 color : #FEC56A; 
} 
 
.content_vote { 
 font-size : 10px; 
 height : 22px; 
 padding-top : 2px; 
 padding-bottom : 2px; 
 padding-left : 10px; 
 padding-right : 10px; 
 background-color : #F0F0F0; 
 border : 1px solid #e0e0e0; 
} 
 
.pathway { 
 font-size : 12px; 
 color : #000000; 
 letter-spacing : 1px; 
 margin-left : 4px; 
} 
 
a.pathway:link, a.pathway:visited { 
 color : #ff9933; 
 font-size : 12px; 
} 
 
a.pathway:hover { 
 font-size : 12px; 
} 
 
.contentpane { 
 padding : 0px; 
} 
 
.contentpaneopen { 
 padding : 0px; 
 text-align : justify; 
} 
 
.contentheading, .componentheading {
	margin: 40px 0 25px 0;
	padding-left: 33px;
	background: url(../images/img07.gif) no-repeat left center;
	font-weight: bolder;
	font-size: 15px;
}
 
.contentpagetitle { 
 font-weight : bold; 
 color : #000; 
} 
 
a.contentpagetitle:link, a.contentpagetitle:visited, a.contentpagetitle:active { 
 text-decoration : none; 
} 
 
a.readon:link, a.readon:visited { 
 color : #FF0043; 
 font-family : "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; 
 font-size : 10px; 
 font-weight : normal; 
 white-space : nowrap; 
 float : left; 
 line-height : 10px; 
 text-decoration : none; 
} 
 
a.readon:hover { 
 color : #336699; 
 font-family : "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; 
 font-size : 10px; 
 font-weight : normal; 
 white-space : nowrap; 
 float : left; 
 line-height : 10px; 
 text-decoration : none; 
} 
 
.back_button a:link, .back_button a:visited { 
 color : #999999; 
 font-family : "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; 
 font-size : 10px; 
 font-weight : normal; 
 white-space : nowrap; 
 float : left; 
 line-height : 10px; 
 text-decoration : none; 
} 
 
.back_button a:hover { 
 color : #336699; 
 font-family : "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; 
 font-size : 10px; 
 font-weight : normal; 
 padding : 2px 4px 2px 4px; 
 white-space : nowrap; 
 float : left; 
 line-height : 10px; 
 text-decoration : none; 
} 
 
.pagenav a:link, .pagenav a:visited, .buttonheading a:link, .buttonheading a:visited { 
 color : #999999; 
 font-family : "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; 
 font-size : 10px; 
 font-weight : normal; 
 background : #F0F0F0; 
 border : 1px solid #E0E0E0; 
 padding : 2px 4px 2px 4px; 
 white-space : nowrap; 
 float : left; 
 line-height : 10px; 
 text-decoration : none; 
} 
 
.pagenav a:hover, .buttonheading a:hover { 
 color : #336699; 
 font-family : "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; 
 font-size : 10px; 
 font-weight : normal; 
 background : #F0F0F0; 
 border : 1px solid #E0E0E0; 
 padding : 2px 4px 2px 4px; 
 white-space : nowrap; 
 float : left; 
 line-height : 10px; 
 text-decoration : none; 
} 

img {
	border: none;
}

img.left {
}

img.right {
}

.tn img {
	border: 8px solid #F5F5F5;
}

/* Logo */

#logo {
	width: 874px;
	height: 147px;
	margin: 0 auto;
}

#logo h1 {
	float: left;
	padding: 70px 37px 0 0;
	height: 54px;
	background: url(../images/img02.gif) no-repeat 100% 63px;
	font-size: 38px;
	font-weight: normal;
	letter-spacing: -2px;
}

#logo h2 {
	float: right;
	padding: 98px 0 0 0;
	text-transform: lowercase;
	font-weight: normal;
	font-size: 16px;
	color: #FFFFFF;
}

#logo a {
	text-decoration: none;
	color: #FFFFFF;
}

/* Menu */

#menu {
	width: 919px;
	height: 50px;
	margin: 0 auto;
}

#menu ul {
	margin: 0;
	padding: 10px 0 0 0;
	list-style: none;
	line-height: normal;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	height: 25px;
	margin: 0 10px;
	padding: 5px 20px 0 20px;
	text-transform: lowercase;
	text-decoration: none;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
}

/* Page */

#bg {
	background: url(../images/img04.gif) no-repeat center top;
}

#page {
	width: 918px;
	margin: 0 auto;
}

/* Content */

#content {
	float: left;
	width: 625px;
	padding: 12px 0 0 24px;
}

#content h1 {
	margin: 45px 0 20px 0;
	padding-left: 33px;
	background: url(../images/img07.gif) no-repeat left center;
}

#content .content {
	padding-left: 32px;
}

/* Sidebar */

#sidebar {
	float: right;
	width: 214px;
	padding: 0 1px 0 0;
}

/* Footer */

#footer {
	padding: 35px 0;
	background: url(../images/img08.gif) no-repeat center top;
	font-size: 12px;
}

#footer p {
	text-align: center;
}

Dan habe ich noch ein Problem und zwar fehlen anscheinend ein paar CSS Definitionen, denn der SocioTag und der AjaxVote Mambot
werden völlig verkehrt dargestellt: http://fishcode.fi.funpic.de/cms/index.php
Sowie werden werden die Spalten unter "Downloads" auch irgendwie nicht formatiert dargestellt!

ul#mainlevel-nav #active_mainlevel-nav {
background: #EC0000 url(../images/img03.gif) repeat-x left bottom;
}

Versuch hier mal stattdessen:
ul#mainlevel-nav #active_menu-nav {
background: #EC0000 url(../images/img03.gif) repeat-x left bottom;
}

Ansonsten poste bitte mal - falls möglich die Seite, damit man besser rumprobieren kann!

Oh, ich habe das zweite auch schon ausprobiert, hat aber nicht funktioniert,
Das ul#mainlevel-nav #active_mainlevel-nav steht nur drin, weil ich danach noch etwas rumprobiert habe...

Die Demo-Seite: http://fishcode.fi.funpic.de/cms/index.php

P.S.: Benutzt du Firebug für Firefox?

//Edit: Mit dem Code

Code:

ul#mainlevel-nav #active_menu-nav

funktioniert es doch. Ich habe nur die ganze Zeit auf Home geachtet...
Beim Klick auf fish board sieht man das aktive Menü!
Nochmals vielen Dank für alles!