a:active niet aan te passen

gijsbertvs · 17 nov 2011

Ik heb voor Joomla een clean template gedownload en deze naar eigenhad aangepast.
Nu wil ik via a:active een kleur mee gegeven.
Maar wat ik ook doe de kleur komt niet op de website, de link blijf zwart.
Heeft iemand een idee wat ik verkeerd doe?

Code:

________________________________________________________ 
 Reset       line 25
 Basis       line 50
 Header       line 166
 Leftmargin      line 217
 Mainbody      line 231
 Rightmargin      line 461
 Footer       line 475
 Modules       line 514
 Formulieren      line 561
 Joomla! overig     line 593
 aanvulling Joomla! 1.6   line 659
________________________________________________________ 
 
 
====================================================================================
 RESET STIJLEN
 In dit bestand staat de reset stylesheet van Eric Meyer. [URL]http://meyerweb.com/eric/tools/css/reset/[/URL]
 Deze stylesheet zorgt er voor dat alle HTML-elementen worden gereset, zodat ze in alle 
 browsers (zelfs IE) nagenoeg gelijk staan. Hiermee voorkomen we de meeste problemen die 
 ontstaan tussen browsers bij het maken van CSS.
 
================================================================================ */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0;} 
table { border-collapse:collapse; border-spacing:0; } 
address,caption,cite,code,dfn,em,strong,th,var  
ol,ul { list-style:none; } 
caption,th { text-align:left; } 
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } 
q:before,q:after { content:''; } 
abbr,acronym { border:0; }
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
p { line-height: 18px; }
/* 
====================================================================================
 BASIS STIJLEN
 De basis van een Joomla! template
 
================================================================================ */
 
html,body {
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 font-size: 8.5pt; 
 margin: 0px;
 background-image: url('../images/bg.png');
 padding-top: 5px;
}
 
#wrap {
 width: 950px;
 background-color: #FFFFFF;
 font-size: 8.5pt;
 margin:0 auto;
 overflow:hidden;
 position: relative;
 }
 
img { border: 0 none; }
/* 
basis lijsten 
________________________________________________________ 
*/
li {
 line-height: 20px;
 padding-left: 0px;
 padding-top: 0px;
 margin-top: 0px;
 margin-left: 20px;
 position: relative;
 list-style-image: url('../images/sls_zeil.gif');
}
ul {
 margin: 5px;
 padding: 0;
 list-style: none;
 }
 
/* 
basis links 
________________________________________________________ 
*/
a:link {  
 font-size: 8.5pt; 
 font-family:Verdana, Geneva, Tahoma, sans-serif;
 text-decoration: none;
 color: #000000;
 }
a:visited {  
 font-size: 8.5pt; 
 font-family:Verdana, Geneva, Tahoma, sans-serif;
 text-decoration: none;
 color: #000000;
 }
 
a:hover {  
 font-size: 8.5pt; 
 font-family:Verdana, Geneva, Tahoma, sans-serif;
 text-decoration: none;
 color: #5FADD3;
 }
 
a:active {
 font-size: 8.5pt; 
 font-family:Verdana, Geneva, Tahoma, sans-serif;
 text-decoration: none;
 color: #5FADD3;
 }
/* 
basis menulinks 
________________________________________________________ 
*/
/*
ul.menu2 li a span {
 font-size: 8.5pt; 
 font-weight: bold; 
 font-family:Verdana, Geneva, Tahoma, sans-serif;
 color:  #5FADD3; 
 text-decoration: none;
 }
ul.menu2 li a:active {
 font-size: 8.5pt;
 font-weight: normal;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 color: #5FADD3;
 
}
ul.menu2 li a:hover span {
 
}
a.mainlevel:link, a.mainlevel:visited {
 /* text-decoration: underline; */
 /* color: #000000; */
}
/
a.mainlevel:hover {
 /* color: #5FADD3; */
}
a.sublevel:link, a.sublevel:visited {
 /* text-decoration: underline; */
 /* color: #000000; */
}
a.sublevel:hover {
 
}
/* 
====================================================================================
 HEADER
 
 
================================================================================ */
#header {
 background :  url(../images/header.gif); 
 position:relative;
 height : 95px;
 width : 960px;
 margin-left: auto;
 margin-right: auto;
 z-index:1;
}
#search { float: right; width: 200px; }
 
/* 
====================================================================================
 LEFTMARGIN
 Linkerkolom
 
================================================================================ */
#leftmargin {
  width: 200px;
  height: 400px;
  padding-top: 10px;
  padding-left: 10px;
  float: left;
  background-color: #E6E6E6;
  font-weight: bold;
  color: #000000;
}
/* 
====================================================================================
 MAINBODY
 Tekstgedeelte van Joomla!
 
================================================================================ */
#mainbody {
 width: 715px;
 height: 400px;
 float: left;
 padding-left: 15px;
 padding-top: 10px;
 padding-right: 10px;
 font-size: 8.5pt;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 overflow: auto;
}
/* 
Content headings en titles
________________________________________________________ 
*/
.componentheading  {
 font-size: 14pt; 
 color: #CCCCCC;
 padding: 5px 0px 5px 0px;
 margin: 0px;
 font-weight: bold;
}
.contentpaneopen {
 width: 100%;
}
.contentheading {
 font-size: 10pt; 
 color: #000000;
 padding: 5px 0px 5px 0px;
 font-weight: bold;
 text-transform: none;
}
.frontpageheader { 
 color: #000000;
 font-size: 13pt;
 padding: 10px 0px;
 text-align: center;
 font-weight: bold;
}
.contentpagetitle {
 font-size: 12pt;
 font-weight: bold;
 color: #000000;
}
.contentdescription {
 font-size: 10pt;
 color: #000000;
}
.createdate {
 color: #dee1d7; 
 font: 10px Arial, Helvetica, sans-serif; 
 }
.modifydate {
 color: #dee1d7; 
 font: 10px Arial, Helvetica, sans-serif; 
 }
 
.small {
 font-size: 9pt; 
 color: #CCCCCC;
 text-decoration: none;
 font-weight: normal;
}
/* 
Voor content item titels met een link in plaats van een lees meer link onder het artikel 
________________________________________________________ 
*/
a.contentpagetitle:link, a.contentpagetitle:visited {
 font-size: 8.5pt;
 font-weight: normal;
 margin: 0px;
 color: #000000;
 text-decoration:none;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 }
a.contentpagetitle:hover {
 font-size: 8.5pt;
 font-weight: normal;
 margin: 0px;
 color: #CCCCCC;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 }
 
/* 
overige Mainbody links 
________________________________________________________ 
*/
a.blogsection:link, a.blogsection:visited {
 font-size: 10pt;
 color: #000000;
}
a.blogsection:hover {
 font-size: 10pt;
 color: #CCCCCC;
}
a.weblinks:link, a.weblinks:visited {
 font-size: 10pt;
 color: #000000;
 font-weight: bold; 
 padding: 0px 10px 0px 10px;
}
a.weblinks:hover {
 font-size: 10pt;
 color: #CCCCCC;
 font-weight: bold; 
 padding: 0px 10px 0px 10px;
}
a.readon:link, a.readon:visited {
 font-size: 10pt;
 font-weight: bold;
 color: #000000;
 text-decoration: none;
 padding: 0px 10px 0px 5px; 
 }
a.readon:hover {
 font-size: 10pt;
 font-weight: bold;
 color: #CCCCCC;
 padding: 0px 10px 0px 5px; 
}
.category {
 font-size: 10pt;
 color: #000000; 
 font-weight: bold;
 line-height:1.4em; 
 padding-right:10px; 
}
a.category:link, a.category:visited {
 text-align: left;
 font-size: 10pt;
 font-weight: bold;
 color: #000000;
}
a.category:hover {
 font-size: 10pt;
 font-weight: bold;
 color: #CCCCCC;
}
 
/* 
Pagina navigatie
________________________________________________________ 
*/
 
a.pagenav, a.pagenav:visited { 
 font-size: 8.5pt;
 color: #000000;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
}
a.pagenav:hover {
 font-size: 8.5pt;
 color: #000000;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.pagenavbar {
 
}
/* 
Artikel waardering
________________________________________________________ 
*/
.content_rating {
 font-weight: normal;
 font-size: 8.5pt; 
}
.content_vote {
 font-weight: normal;
 font-size: 8.5pt; 
}
 
/* 
Standaard Joomla! meldingen 
________________________________________________________ 
*/
.message {
 font-weight: bold;
 font-size : 8.5pt;
 color : #5FADD3;
 text-align: left;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
}
 
/* 
====================================================================================
 RIGHTMARGIN
 Rechterkolom
 
================================================================================ */
/*
#rightmargin {
 width: 195px; 
 margin: 10px 2px 5px 2px;
 float: left;
 display: inline;
}
/* 
====================================================================================
 FOOTER
 
 
================================================================================ */
#footer {
 background-color : #E6E6E6;
 text-align: left;
 width: 960px;
 height: 40px; 
 z-index:1;
 clear: both;
}
#footer .tekst {
 text-align: center;
 font-size: 8pt;
 color: #5FADD3;
 margin-left: 0px;
}
/* 
====================================================================================
 MODULES
 Opmaak van de modules in de linker- of rechterkolom
 
================================================================================ */
.moduletable {
 font-size: 8.5pt; 
 margin: 0px;
 font-weight: normal;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
}
table.moduletable td  {
 padding: 0 0 0 4px;
}
div.moduletable_whois {
 padding-left: 0px;
 margin-bottom: 0px;
 text-align: center;
}
 
.moduletable_menu h3 {
 font-size: 7pt;
 background-color: #FFFFFF;
 color: #000000;
 width: 191px;
 text-transform: uppercase;
 font-weight: bold;
 padding: 3px 0 3px 5px;
 text-align: left;
 border: 0px solid #000000;
}
.poll {
 font-size: 9pt;
 color: #2668D3;
 line-height: 20px;
 text-align: center;
 border: 0px solid #000000;
}
 
/* 
====================================================================================
 FORMULIEREN
 
 
================================================================================ */
form {
 margin: 10px 5px 10px 5px;
 padding: 0px;
 font-size: 8.5pt;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.inputbox {
 font-size: 8.5pt;
 border: 1px solid #000000;
 width: auto;
 padding: 1px;
 margin-right: 5px;
 margin-top: 5px;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.button {
 font-size: 8.5pt;
 border: 1px solid #000000;
 padding: 0px;
 margin: 0px;
 font-weight: bold;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 color: #000000;
 background-color: #FFFFFF;
}
 
/* 
====================================================================================
 Joomla! overig
 
 
================================================================================ */
 
.sectiontableentry1 {
 font-size: 9pt;
 color: #000000;
 background-color: #EFF0F0;
 padding-right: 5px;
}
 
.sectiontableentry2 {
 font-size: 9pt;
 color: #000000;
 background-color: #F6F6F6;
 padding-right: 5px;
}
.sectiontableheader {
 font-size: 9pt;
 font-weight: bold;
 background-color: #cccccc;
 color: #fff;
 padding-right: 5px;
 }
 
.newsfeedheading {
 font-size: 12pt;
 color: #505050;  
        }
.newsfeeddate {
 font-size: 10pt;
 color: #505050; 
}
 
.searchintro  {
 font-size: 12pt; 
}
.adminform  {
 font-size: 10pt; 
}
.contentpane {
 font-size: 12pt; 
}
.newsflash {
 font-size: 11pt;
 text-align: justify;
 color: #435374;
 padding-top: 10px;
}
 
.contact {
 font-size: 12pt; 
}
/* 
====================================================================================
 Aanvulling voor Joomla! 1.6
 
 
================================================================================ */
table.category{
border:1px solid #CCC;
width:100%;
text-align:center;
}
table.category th,table.category td{
padding:2px 6px;
}
table.category thead{
background:#EEE;
}
.jcat-children ul,.jcat-children li{
margin:0;
list-style:none;
}
.jcat-children li a{
background:url(../images/bullet_green_arrow.png) no-repeat 0 12px;
display:block;
padding:5px 5px 5px 15px;
font-size:0.9em;
}
/* Print, PDF, Email buttons */
.actions{
margin:0;
}
.actions li{
list-style: none;
display:inline;
float:right;
}
/* Login formulier*/
p#form-login-username label,
p#form-login-password label {
 width: 160px;
 display:block;
}
p#form-login-remember label {
 font-size: .9em;
 font-weight: normal;
 line-height: 25px;
}
p#form-login-remember input {
 float:left;
 margin-right: 5px;
}
form#form-login ul {
 margin: 0;
 padding: 0;
}
form#form-login ul li {
 list-style-type: none;
 margin-left: 20px;
 font-size: .9em;
}
fieldset.userdata {border: 0px;}
/* Sectie- en categorieblog layout */
.cols-3 .column-1 {
    float: left;
    margin-right: 4%;
    padding: 0 5px;
    width: 29%;
}
.cols-3 .column-2 {
    float: left;
    margin-left: 0;
    padding: 0 5px;
    width: 29%;
}
.cols-3 .column-3 {
    float: right;
    padding: 0 5px;
    width: 29%;
}
/* Content titles */
 h2 {
 font-size: 8.5pt; 
 color: #5FADD3;
 padding: 10px 0px 5px 0px;
 font-weight: bold;
 text-transform: none;
}
h3 {
 font-size: 8.5pt; 
 color: #5FADD3;
 padding: 5px 0px 5px 0px;
 font-weight: bold;
 text-transform: none;
}

csshunter · 18 nov 2011

Hoi Gijsbert.
Ik zie zo gauw niet iets verkeerds. Edit: ho, toch, zie PS2.
Geldt dit voor alle browsers? Het staat me bij dat 1 of meer IE-versies anders met a:active omgaan dan de rest.

Hier nog een testpagina (ook voor a:active): www.quirksmode.org/css/hover.html
In sommige gevallen kan ook het Doctype nog van invloed zijn: zie hier.

Met vriendelijke groet,
CSShunter
_____________
PS: a:active{...} geldt alléén voor de pagina waar je op dat moment op staat. Dus op een menu-link klikken geeft op die bladzij nog net even de active-status, maar niet op de volgende pagina, waar de link naar toe gaat. Maar ga je terug via de terugknop, dan zou op de eerste pagina de active-status ("ingedrukt") nog aan moeten staan, evenals de outline-stippeltjes om de link heen (als die niet zijn uitgeschakeld). Klik je op die eerste pagina dan ergens op een blanco stukje, dan zou de link van de active- naar de visited-status moeten springen (dus hier: weer zwart worden).
Was dat het misschien?

PS2: Er zitten een paar foutjes in de begin- en eindpunten van commentaren: een /* zonder eigen einde, een / zonder sterretje e.d.
Even door de css-validator halen, daar maar eens mee beginnen!

a:active niet aan te passen

gijsbertvs

Gebruiker

csshunter

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy