PDA

View Full Version : Slashdot menu a current dont work



Niclas
04-01-2008, 12:28 AM
Hi

My CSS donīt works in slashdot menu

I cant get this code to be active:
div.sdmenu div a:current {
background : #FF6600;

What could be wrong??

Best Regards
Niclas

rangana
04-01-2008, 06:01 AM
I guess there is no current pseudo-class in CSS ;)

Could you show us all your codes, or better a link ;)

..Or you might wish you nave your div a current class..and use it later:


#sdmenu .class{background:#ff6600;}

Niclas
04-01-2008, 07:13 AM
div.sdmenu {
width: 180px;
font-family: Arial, sans-serif;
font-size: 11px;
padding-bottom: 10px;
color: #fff;
}
div.sdmenu div {
background: url(../images/menu/title.gif) repeat-x;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url(../images/menu/toptitle.gif) repeat;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div span {
display: block;
padding: 5px 25px;
font-weight: bold;
color: white;
background: url(../images/menu/expanded.gif) no-repeat 10px center;
cursor: default;
border-bottom: 0px solid #ddd;
text-decoration: none;
}
div.sdmenu div.collapsed span {
background-image: url(../images/menu/collapsed.gif);
}
div.sdmenu div a {
padding: 2px 10px;
background: #EEEEEE;
display: block;
color: #000000;
text-decoration: none;
}
div.sdmenu div a.current {
background: #ff6600;
}
div.sdmenu div a:hover {
width: 160px;
background: #316AC5 url(images/menu/linkarrow.gif) no-repeat right center;
color: #fff;
text-decoration: none;
}
div.sdmenu #red a:hover {
background: #E4001B url(icons/menu/linkarrow.gif) no-repeat right center;
color: #fff;
text-decoration: none;
}

http://www.dynamicdrive.com/forums/showthread.php?t=21856&highlight=slashdot

rangana
04-01-2008, 07:15 AM
Where's your HTML :)

..and it is'nt a:current, but a.current ;)

Niclas
04-04-2008, 08:47 PM
Hi Rangana

Here is the HTML code with links to an Iframe (main target), I have work a few hours without success :mad:
I have big problems to get the "current" background colors to mark the active links.. as you could see the code seems to be in original mode, so I really donīt understand why this function are available in the script. :cool:

http://www.strovelstorp.nu/demo/demo.html

Best Regards
Niclas

rangana
04-05-2008, 02:13 AM
Add the highlighted in your sdmenu.css ;)


div.sdmenu div a.current, div.sdmenu div a:active
{
background: #ff6600;
}


This works perfectly in IE, but not with FF.
For browser compatability, change your JS in the head of your start.html to ;)


<script type="text/javascript">
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
myMenu.speed = 3;
myMenu.remember = true;
myMenu.oneSmOnly = true;
myMenu.markCurrent = true;
myMenu.collapseAll();

var accept=document.getElementById('my_menu').getElementsByTagName('a');
for(var start=0;start<accept.length;start++)
{
accept[start].onclick=function()
{
for(var start=0;start<accept.length;start++)
{
accept[start].style.background='#eee';
{
this.style.background='#f60';
}
}
}
}
};
</script>


See if it aides ;)

Niclas
04-05-2008, 11:58 AM
Hi Rangana

Many thanks for your support, together we will solve this problem.
There is a bug in IE (a:active), not Firefox who courses this problem!
But I have solve this problem with following code:

div.sdmenu div a.current, div.sdmenu div a:focus, div.sdmenu div a:active {
background: #316AC5;
color: #FFFFFF;

Now to another problem Rangana, I have two different a.current colors in my sections, is it possible to have a second div a.current into my CSS, one red and one blue??

Finally Rangana for your comments about "browser compatability" a get "Syntax error" when copy and paste the JS code into head of start.html

Niclas

Niclas
04-06-2008, 10:45 AM
Following code works in both IE and FF:

div.sdmenu div a.current, div.sdmenu div a:focus, div.sdmenu div a:active {
background: #316AC5;
color: #FFFFFF;