CMS Made Simple Forums

Hello!

I cannot get the a:active CSS line to actually keep the current clicked link active. The a:hover/link/visited work.

This is my website: http://www.nicocollu.com
My template (HTML/CSS) is constructed by myself.

Before anything, it should be known that the Menu Manager is currently set to:
cssmenu.tpl (read only)
(I tried cachable and non-cachable - both do not work with current settings.)

HERE IS THE HTML:
(CSS below.)

<!--Top Menu-->
<div id="topmenu">
{menu number_of_levels="1"}
</div>

<!--Sub Menu-->
<div id="submenu" style="background-image:url(http://www.nicocollu.com/uploads/images ... ubmenu.png);">
{menu start_level='2'}
</div>

THE CSS GOES:
(I've added both the top & submenu as they both have the same issue.)

/* Top Menu */
#topmenu {
background-image:url(http://www.nicocollu.com/uploads/images ... opmenu.png);
background-position:center top;
background-repeat:no-repeat;
width:1200px; height:50px; float:left; margin: auto; }
#topmenu ul {
font-size:16px;
text-align:center;
margin: 10px 0px 0px 100px; padding:0px; width: 1200px; height: 40px;
background:none; }
#topmenu li {
margin:0px 0px 0px 0px;
padding: 0px 40px 0px 0px;
border:0px;
list-style-type:none;
float:left; }
#topmenu li a {
display:block;
min-width:100px;
min-height:30px;
text-decoration:none;}

#topmenu li a:link { color:#FFF; }
#topmenu li a:visited { color:#E3E3E3; }
#topmenu li a:hover { color:#E65C00; }
#topmenu li a:active { color:#E65C00; }

/* Sub Menu */
#submenu {
background-image:url( /* Diff Stylesheet attached for custom bg-image */ );
background-position:center top;
background-repeat:no-repeat;
width:1200px; height:40px; float:left; margin: 0px auto auto auto; }
#submenu ul {
font-size:15px;
text-align:center;
padding:0px; width: 1200px; height: 40px;
background:none; }
#submenu li {
margin:2px 0px 0px 0px;
padding: 0px 40px 0px 0px;
border:0px;
list-style-type:none;
float:left; }
#submenu li a {
display:block;
min-width:100px;
min-height:30px;
text-decoration:none; }

#submenu li a:link { color:#FFF; }
#submenu li a:visited { color:#E3E3E3; }
#submenu li a:hover { color:#E65C00; }
#submenu li a:active { color:#E65C00; }

//

Is there anyone that can see something wrong here?

Is there something completely else that I need to know about?

Thank you!

/ Nico Collu

The link give a "Site is being built!"...

Not sure what you mean by a:active but if it is the active page then most likely you will need to use a.menuactive, did you look in the page source..?

Dr.CSS wrote:The link give a "Site is being built!"...

Not sure what you mean by a:active but if it is the active page then most likely you will need to use a.menuactive, did you look in the page source..?

Hey Dr.CSS!

I'm very sorry! The maintenance page has been removed! Must have put it back on!

Your suggestion worked perfectly.

Instead of using:
#topmenu li a:active { color:#E65C00; }

I now have:
#topmenu li a.menuactive { color:#E65C00; }

(The same goes with the submenu now.)

The reason why I did what I did was because that is what I learned from the W3schools online here:
http://www.w3schools.com/css/tryit.asp? ... t_advanced

I personally have no understanding on why your suggestion works and not the w3schools coding.
Even more mind boggling since the a:hover, a:link etc. work!?

It must have something to do with the Menu Manager?

Thank you for your help!

/ Nico Collu

:active selector has nothing to do with actually current active page of a site.
Active selector only indicates a state of link when it is being clicked (you do something with it, so it is active), simply put you could have red coloured regular link (a or a:link), on hover orange (a:hover), on visited purple (a:visited) and on click blue (a:active), where you could still make it green with class that will inidicate current active page (a.my_active_class) like in DrCSS's suggestion.

uniqu3 wrote::active selector has nothing to do with actually current active page of a site.
Active selector only indicates a state of link when it is being clicked (you do something with it, so it is active), simply put you could have red coloured regular link (a or a:link), on hover orange (a:hover), on visited purple (a:visited) and on click blue (a:active), where you could still make it green with class that will inidicate current active page (a.my_active_class) like in DrCSS's suggestion.

Oh, I think I'm beginning to understand!
One question, is :current the same as :active?

But from what I understand, I find it very meaningless.
It will only show when you click it but will remove it's colour as soon as you remove the cursor? That's a very little moment of colour change!

There must be something that it is very useful for?

There is no :current the only way to do that is with a class like menuactive which most CMSMS menu templates have...

There are only 4 states for a link...

http://www.w3schools.com/css/css_link.asp

Dr.CSS wrote:There is no :current the only way to do that is with a class like menuactive which most CMSMS menu templates have...

There are only 4 states for a link...

http://www.w3schools.com/css/css_link.asp

Ok perfect!

Thank you for clearing this up for me!

/ Nico Collu