Ok I have now virtually fixed our menu system.
The only Issue I have now, seemingly is onclick change menu item state to ACTIVE
So here is the fiddle: http://jsfiddle.net/ozzy/6pxaE/
Essentially, onclick I need the menu item clicked to change to:background color #ec008c and color to #fff with no text shadow. As seen in my Fiddle Above.
Everything else seems to work fine.
Any help appreciated. No JS please
Assuming what you want is to highlight the currently active page in the navigation, I think this is still the easiest way to accomplish what you want.
Would that work?
To make all of your 'active' states pink-ish, the following worked on your last lines of CSS:
.white ul li a:active, .white li a:active{ background-color:#ec008c;color:#fff;display:block;text-shadow: none !important;
}
http://jsfiddle.net/ExUdM/
I only tested this in Chome, Firefox, and IE9
Related
When I hover over and them move away from active links on my web page I see a box appear around the link. The edge of the box is a series of dots.
I have been trying to see what causes this with Chrome Developer tools but I cannot seem to catch it.
Can someone tell me what is causing this and what CSS can I use to stop it appearing.
I recommend adding this to the active and focus of your a tag.
a:active, a:focus {
outline: none;
}
I think what you're referring to is caused by outline, you can simply use something like
outline:none;
you might be able to replicate this behavior here http://jsfiddle.net/9x46cyfd/
Change focused style for links by adding
a:focus {
outline: none;
}
EDIT #3, and finall:
Ok, so i actually made it happend. Idiotically, however. In case someone will need the same, i'll post a solution here:
What i've did is, basically defined the global style as below:
a:link,a:visited
{
color:#000000;
text-decoration:none;
}
a:hover,a:active
{
color:#000000;
text-decoration:none;
}
That was the very basic parameters i could insert at the global style. The next move is makin' the same inside the link and customize it for ur need as like as u want, hover, make sure u're doin' the copy of that customization of ur div, and insert the :hover thing into it, as following:
.some-div-cutomization
{
text-decoration:none!important;
blabla
}
.some-div-cutomization:hover
{
text-decoration:none!important;
blabla
edit if needed the hover function
}
That's about it. Have fun :)
I've got some source links, that i can't touch, even to insert the class element, so i would be able to change the style of the links, but i do need somehow to change they style.
So, let's say tag of this link would be [link][/link], so what i did is, put inside it div element with full customization and it's worked, however there's two moments:
1) I don't really know if it's may work properly on all browsers, 'cause i need it cross-browser version actually.
2) i can't get rid of the text-decoration line. i've tried text-decoration with none, and even mad a copy style of that specific div with :hover and put inside it text-decoration none, and still, it's not working.
Also, if there's some another trick to avoid such a thing, please share.
EDIT:
I've tried all below, didn't work as i wanted to. BUT, i've made it, but with very, very ugly coding, and i'm not sure it's goin' to work at all browsers:
I've inserted the link-element with underline none inside the one() i can't touch, so now it's link inside another link, witch very ugly.
[link-i-cant-touch]<div class="style_test"><a id="no-textdecoration" href="#">somecooltext</a></div>[/link-i-cant-touch]
.style_test
{
text-decoration:none!important;
font-family: 'qsc';
text-align:left;
padding-top:0px;
color:#000000;
}
#no-textdecoration{
text-decoration:none!important;
color:#000000;
}
#no-textdecoration:hover{
text-decoration:none!important;
color:#1982d1;
}
EDIT Num2
That didn't work as well, because the link is changed to the second one, so it's redirect for "#"... :/
Make sure you target the a tag for the text-decoration, rather than applying it to the div
.my-div-class a { text-decoration: none; }
I don't know what you did wrong, as you haven't posted any code.
But this is the correct way of removing text-decoration on links.
HTML:
Link with text decoration
<a id="no-textdecoration" href="#">Link without text decoration</a>
CSS:
#no-textdecoration {
text-decoration:none;
}
Output: (In image format)
JSFiddle demo: Removing text-decoration from a link
I want to set the colour for the active link. My links have the inner span like the following.
<span>Home</span>
I have style it like the following but it did not work.
a:active span{
color:yellow;
}
What css rule should I write for this to work.
Thanks in advance.
The correct CSS is as follows. You should replace the = with a :.
a:active span {
color: yellow;
}
Edit
This is a response to the comment
I want to set the color of the link to yellow when index.php display
This is not what :active does. This text is taken from w3.org. ( http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes )
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
If you want to style the page that is currently being viewed you have to do that server side.
This should work, its valid, but maybe you expect it to do something else then what it does. :active is not the selector for the menu item you selected or something, like the menu item you selected is yellow on the page after as a #current link or something.
Something else:
Note: :active MUST come after :hover (if present) in the CSS definition in order to be effective!
I have a classic UL multilevel menu that works flawlessly in Firefox.
The LI are float: left, and the A inside is width: 100% and display: block but as you can see from the screenshots below the submenu items (Hello, World and Foobar) display inline.
The weird thing is that this affects the menu even when using canned solutions such as Suckerfish.
What do you suggest i look into to solve the problem?
Do you mean to do a clear:left; on the LIs? It would help seeing the HTML.
Had an error in the CSS file that prevented IE from parsing it correctly! Always validate your CSS!
I'm trying to stop Firefox from adding an outline when links are clicked or followed (a:active).
I don't want to get rid of the outline on a:focus, because as we all know that's a kick in the nuts for keyboard only users.
In theory, the following should work:
a:active { outline: 0; }
But it does absolutely nothing in Firefox 3.5.3
The only thing that does work is:
a:focus { outline: 0; }
But as said, that's no good for accessibility reasons.
Is there any way at all of only removing the outline when links are clicked? My fear is that when you click on the link, you are in effect focusing it, and it's the focus style that's being applied, but focusing and clicking should really be two separate events.
Here you go.
http://sonspring.com/journal/removing-dotted-links
or try this one.
http://www.elctech.com/snippets/css-remove-dotted-outline-border-from-active-links
:focus {outline:none;}
::-moz-focus-inner {border:0;}