I think it's not bug, just that I'm no good in css. take a look why the border of active is different from the hover state:
http://jsfiddle.net/Mb398/1/
<ul class="menu">
<li class="active">Sign up</li>
<li>Login In</li>
</ul>
The .active is on the <li> but then in your CSS you set the :hover-styling on the <a>.
By removing "li a:hover" and replacing that with "li:hover" you'll get the right result.
This is a fiddle of it
You are selecting two different elements which have different dimensions. The .active is the parent li which is slightly bigger than the <a> you are selecting with the :hover. Since the li is larger, its border will be longer and slightly lower. The <a> is also blue by default, so the border is blue.
Solution
Step 1:
You need to change each instance of
border: 5px solid;
to
border: 5px solid black;
This will fix the coloration issues.
Step 2:
Then change
.menu li.active {
to
.menu li.active a {
This will fix the size issues.
Here is a working fiddle.
Related
The 1px vertical visual glitch
For an horizontal menu where I don't want to use floats, I have a small glitch which is a space of about 1px at the bottom of each LI container.
I tried to set the font size of the LI to 0, tried different values of vertical-align, overriding a potential border-bottom, but it still fails at least on chrome.
Note: check it with Chrome, it's not a "space related issue" between LIs (the horizontal space is not a problem for me, I just wanted to show you the simplified version of my issue), neither a text-decoration one.
Preview
<ul>
<li>
<a>
Something
</a>
</li>
<li>
<a>
Something else
</a>
</li>
<li>
<a>
Something else 2
</a>
</li>
</ul>
Fiddle source:
http://jsfiddle.net/darknessm0404/xjfd4p3z/
Notice that I do not want to use float because it creates some problem on complicated designs (with css clear properties for example).
Thank you for your help.
Add display to block to your links (li > a):
li > a {
display: block;
}
mention display:block in
li > a {
background-color:yellow;
display:block;
}
updated jsFiddle File
I think what you need is the text-decoration property set to none on your links to remove the line. Try this:
li > a {
background-color:yellow;
text-decoration: none;
}
I am trying to highlight the active <a> however, my CSS is being overwritten.
#portfolio-filter li a {
color: black;
text-decoration: none;
padding:3px 8px 3px 8px;
background:#8d8d8d;
}
#portfolio-filter li:hover, a.filter.active {
background: white;
}
<ul id="portfolio-filter">
<li>
All
</li>
<li> etc... </li>
</ul>
The #portfolio-filter li a style is overwritting the #portfolio-filter li:hover, a.filter.active style and not sure what I need to do to fix this.
Link: http://velnikolic.com/ramova3/?page_id=25
The problem is that #portfolio-filter li a is more specific than a.filter.active. Since the background is on that a element, not the li element, your a background won't change even if #portfolio-filter li:hover is more specific.
To fix it, use something like #portfolio-filter li a.filter.active, which is more specific and will correctly take precedence.
As a general rule of thumb, when working with active classes, always use a similar selector as the original (non-active) definition. Otherwise, you may run into specificity issues like this one.
Here's a useful specificity calculator when in doubt.
The comma makes your "second" style two separate styles, remove the command and you should be fine.
ref: http://webdesign.about.com/od/cssselectors/f/comma-in-css-selectors.htm
Here was my solution.
portfolio-filter li a:hover, #portfolio-filter > li a.active{ background: white; }
I'm having a hard time understanding why the behavior of certain properties do not follow the behavior stated in the W3 specification.
For example, in the specification it says that the "background-image" and "background-color" property is not inherited.
But the following code proves this otherwise.
The CSS
#nav > li {
background-color: yellow;}
The markup
<div>
<ul id="nav">
<li>This is a list</li>
<li>This is a list</li>
<li>
<ul>
<li>This is a list</li>
<li>This is a list</li>
</ul>
</li>
</ul>
</div>
You will see that even the 2nd level list items which is nested inside the 3rd list item also has their background-color changed, while I only intended for it to be applied only on the direct children which is the 1st level list items.
Now my question is this.
Why is this happening? Who is in the wrong here, the browsers or the specification? Am I missing something?
Any help is appreciated.
I think I found your answer.
When you look at the devtools, you will see, that the 2nd level got no background-color. The color you see, is the color of the parent li :-)
Fiddle
#nav > li {
background-color: yellow;
}
With the border property you can see it better.
Updated fiddle:
http://jsfiddle.net/2brhj2bq/1/
#nav li {
border:1px solid red;
}
#nav > li {
border:1px solid lime;
}
This is because the next UL is also in the Li , and li have bg color yellow so it should be yellow . just think it what have you done , you are assigning bg then you are seeking why it is happening it is not the bg of inner ul li it is the bg of ul#nav li.
I've tried unsuccessfully to fix this for the last few days:
the first time I open the page it has some weird padding on the dropdown menu, only happens on chrome (works fine on FFx and IE)
after the first time the page is loaded it loads fine
as you can see on the screenshot I've already put
.myCustomNav ul
{
padding: 0px !important;
}
the dropdown menu is called like this:
<div>
<ul class="myCustomNav nav">
<li>
<a .../>
</li>
</ul>
</div>
any idea what's wrong?
you can test for yourselves on http://istore.titus.biz/lovelovelove/#
Do you want to reduce the padding on the dropdown? Then reduce the padding on the following class in your css.
.horizontal-category a:link,.horizontal-category a:visited{
color:#96979D;
padding:4px 6px;
display:inline-block;
font-weight:bold;
border-right:1px solid #ec008c;
/*background:#09C;*/
}
Invalid solution - Comments below
You need to make the li for .dropdown-menu - display: block. This needs to be placed at the bottom of your nav CSS.
CSS
.dropdown-menu li {
display: block;
}
If you want to test this do this:
.dropdown-menu li {
display: block !important;
}
That should fix it, but do not use !important as your solution. Just make sure that the first snippet is below the other dropdown CSS.
changed
.myCustomNav li{ display:inline;}
to
.myCustomNav li{ display:inline-block;}
and it worked, just needed a few extra tweaks to position it then
how do you achieve the effects when you hover the links at top(HOME,ABOUT , JOBS)
which you can see in http://www.webdesignerwall.com/ ,
can someone give me a hint ? or any?
A lot of people here are far too quick to whip out the scripting languages. Tsk, tsk. This is achievable through CSS. I'd even be inclined to say that there is no need for additional mark-up. One could use a background image on the :hover state. Simple.
Each link (#nav li a) contains the nav item text plus an additional span which is set to "display:none" by default. The span also has a set of other styles relating to its position and background-image (which is the text that appears).
On #nav li a:hover the span becomes display:block, which makes it visible at the defined position. No scripting needed.
HTML
<ul id="nav">
<li>Home <span></span></li>
<li>About <span></span></li>
<li>Jobs <span></span></li>
</ul>
CSS:
#nav li a span{display:none}
#nav li a:hover span{display:block}
This is a completely stripped down version of course, you will need to add your own positioning and other styles as appropriate.
There are many, many ways this could be acheived. The simplest would be to have each navigation item change the above image to reflect its corresponding graphic.
<div class="hoverImages">
<img src="blank.jpg" style="display:none;" />
</div>
<ul>
<li class="home">Home</li>
<li class="about">About</li>
<li class="contact">Contact</li>
</ul>
-- jQuery
$("li.home").hover(
function () {
$(".hoverImages img").attr("src", "hoverHome.jpg").show();
},
function () {
$(".hoverImages img").hide();
}
);
The way it's achieved is by using an empty <span>.
It's positioned off screen by default and move into view on hover
Like so:
<ul>
<li>Link<span> </span></li>
<li>Link<span> </span></li>
<li>Link<span> </span></li>
</ul>
And the CSS:
ul li a {
display: relative;
}
ul li a span {
position: absolute;
top: -50px; /* or however much above the a you need it to be */
left: -1000em;
}
ul li a:hover span {
left: 0;
}
It is probably a script on the Home, About and Jobs links that makes a floating div tag visible on mouseover and invisible on mouseout.
Here is a simple code example achieving a similar effect:
<html>
<body>
<a onmouseover="document.getElementById('my-hidden-div').style.display='block'" onmouseout="document.getElementById('my-hidden-div').style.display='none'">Hover Over This</a>
<div style="display:none" id="my-hidden-div">and I appear.</div>
</body>
</html>
Using jQuery you would just do something like
$(#MenuId).hover(function() { // show hidden image},
function() { // hide hidden image});
by the fact that you can rollover the whole area when on rollover i would suggest that it is simply an alternative background that appears on rollover using css. the elements themselves might then be positioned absolutely within the navigation container.
In this particular instance, the developer placed a span tag inside the li elements that make up the menu. That span has (most notably) these properties:
height: 33px;
top: -26px;
left: this varies to position the spans properly
position: absolute;
After that, just some JavaScript to make the span appear/disappear.
A pure CSS solution is explained on Eric Meyer site: Pure CSS Popups 2.