I am making a tabbed navigation menu via jQuery in my website. All the individual tabs have the class navBarLink and here's the CSS pertaining to it:
.navBarLink:link,.navBarLink:visited
{
display:block;
height:27px;
width:120px;
color:#FFF;
background-color:#06C;
text-align:center;
padding:4px;
text-decoration:none;
border:0;
margin:2px 2px 0 2px;
}
.navBarLink:hover,.navBarLink:active
{
background-color:#FFF;
color:#06C;
border-bottom-style:solid;
border-bottom-color:#FFFFFF;
border-bottom-width:1px;
}
The problem is that the background color changes when I click on a tab but doesn't change when I hover on a tab. Basically my hover and my click don't work simultaneously. Any idea why this is happening?
http://jsfiddle.net/UnFhQ/
This works. (I removed the :link from the first css code, just so I could see the div's background color...) But click this and let us know what about the code doesn't work.
Thanks
Related
I have found this awesome menu on codepen. Now I want to use it, but my problem is that I want to place it right-aligned on my website. Unfortunately this menu drops also right. But I want it to drop left. So how could I solve this problem. (Change the opening angle didn't work?)
Thanks for your help.
http://codepen.io/lbebber/pen/pvwZJp
$opening-angle:$pi*2;
change transform property at .menu-open:checked~.menu-item selector
from transform:translate3d(110px*$i,0,0); to transform:translate3d(-110px*$i,0,0);
And change left property to right in .menu class
Updated .menu
.menu{
#extend %goo;
$width:650px;
$height:150px;
position:absolute;
right:50%; /*Changed*/
margin-left:-80px;
padding-top:20px;
padding-left:80px;
width:$width;
height:$height;
box-sizing:border-box;
font-size:20px;
text-align:right; /*Changed*/
}
Codepen
a{
text-decoration:none;
color:#666;
border-left:2px solid grey;
padding-left:10px;
}
li{
display:inline;
margin-left:10px;
color:grey;
}
i have written this code in "style tag" but the same code is applying on all links, i aslo made separate divs and classes and please tell me some way to use this code for different classes with different value like in one links div i want that code, but in other links div i don't want the border left and color= grey,,,but if i chnage it then the change will also occur at other places please tell me something better?
This is my footer menu home button icon, but the home button is displayed without any space in left side.
css
#footer-menu{
margin:0px;
padding:0px;
width:auto;
}
#footer-menu .homeButton a{
background:url('http://w3schools.com/css/img_navsprites.gif');
background-position:left top;
height:20px;
padding:5px 18px 20px 28px;
border:none;
width:38px;
}
#footer-menu .homeButton a:hover{
background:url('http://w3schools.com/css/img_navsprites_hover.gif');
background-position:0 -45px;
}
I have given padding values, but it will not move to right side. The home button I had got from w3schools. please give good home button.
#footer-menu .homeButton {
margin-left:20px;
}
it is my guess only as you didnot give us any live example like jsfiidle or any snapshots.so it is very hard to guess what you are actually having now and what you want
I am creating image which has a link on top with. Image has been set as relative, and the link as absolute on the bottom of the image. Basically it is a link on top of the image with absolute position and fixed widh and height. On hover, background of the link changes it's color. The problem occurs whenever I click on the link: it goes top of the image (on Opera and IE it stays there). Images as examples:In the picture below is a normal state of image with link (on hover background's transparency changes).
In this picture below is a state of a:active of the link.
It stays as absolute element, but changes it position. I have tried applying for a:active these options: copy everything from normal and hover states, position:static;, even tried to place a margin-top with a size that would be required to stay in bottom - no luck.
Here is the css code of it:
.image-with-link {width:300px; height:135px; position:relative; float:left; overflow:hidden;}
.image-with-link a {width:280px; height:18px; position:absolute; bottom:20px; left:0; padding:5px 10px; color:#fff; text-align:left; background: rgba(0,0,0,0.3); overflow:hidden;}
.image-with-link a:hover {background: rgba(0,0,0,0.5);}
(link is no longer needed).
You have conflicting CSS on lines 79 and 194 of custom.css that is overriding the absolute positioning:
You are declaring:
a:active, a:focus {
position:relative;
top:1px;
}
and on line 194:
.kategorijos .vienas a:active {
position:static;
}
Both of these are causing the problem. You want the item to keep position:absolute on :active.
This is your problem:
a:active,
a:focus{
/* Give clicked links a depressed effect. */
position:relative;
top:1px;
}
You overwrite position, but not top in following selector: .kategorijos .vienas a. You should add top: initial for fix.
I assume that position: static is by design here:
.kategorijos .vienas a:active {position:static;background: url('../images/arrow.png') 270px 4px no-repeat rgba(0,0,0,0.5);}
This moves link below image.
Try this, I guess this will work :)
a:active, a:focus {
position: relative;
top: 1px;
}
.kategorijos .vienas a:active {
position: static;
}
The site I am working on can be found here.
In IE7 ONLY:
The active navigation tab "jumps" whenever a user hovers on an inactive tab.
Screenshot:
Can someone explain how to fix this?
All I can see is that there is a problem with your "active" class in your /css/app.min.css file, or there is some javascript going on somewhere that is behaving incorrectly. You might be saying, "Duh!"
I can't tell with the tools that I have on hand. On the other hand, I was able to see that no "jumping" would occur when I removed the "active" class from the link in question. However, the link appeared just liked the rest of the items in the navigation, and you want it to look...uh...active.
If it is an issue somewhere in your scripts, and you don't know what it is, then perhaps change the name of the class and find the logic that sets the link to being active to reflect the name of the new active class.
I would start by commenting-out the existing styling associated with your "active" class and gradually build up to how you want it to appear by reintroducing some of the prior styling and refreshing the page on each small change until you find the problem.
I believe these are all of the problematic styles that need to be changed.:
#tabnav ul#dash-nav li.active a{
margin-left:-8px;
margin-right:-6px;
margin-top:-6px;
position:relative;
background-color:transparent;
}
#tabnav ul#dash-nav li.active a span{
background:url("/images/bg-nav-hover-l.png") no-repeat scroll 0 0 transparent;
color:#fff;
padding:7px 1px 1px 18px;
}
#tabnav ul#dash-nav li.active a .arrow{
display:block;
}
#tabnav ul#dash-nav li.active a:hover .arrow{
display:block;
}
#tabnav ul#dash-nav li.active a img,#tabnav ul#dash-nav li a:hover img{
margin-top:-21px;
}
#tabnav ul#dash-nav li.active a em{
background:url("/images/bg-nav-hover-r.png") no-repeat scroll 0 0 transparent;
height:34px;
width:17px;
}
How about putting a fix for IE7 inside a conditional comment?