I've been at this for about an hour now, and cant seem to grip it.
Everytime I hover over this text (I'm wanting to put a background color for it to hover), the text moves, along with the bgcolor.
Here is what I got:
#innerheader ul {
list-style:none;
margin:0;
padding:0;
}
#innerheader li {
display:block;
float:left;
height:25px;
margin:0 2px;
padding:15px 10px 0 10px;
color:#FFFFFF;
font-weight:bold;
font-size:10px;
text-transform:uppercase;
}
#innerheader li a,
#innerheader li a:link,
#innerheader li a:visited,
#innerheader li a:active {
color:#FFFFFF;
text-decoration:none;
}
#innerheader li a:hover {
background-color: blue;
padding: 10px 10px 10px 10px
}
Remove the padding in the hover declaration. Or simply move the padding to the anchor before the hover state, like the code below.
The reason the text is moving is there is no padding on the anchor, then when you hover, there's padding.
#innerheader li a,
#innerheader li a:link,
#innerheader li a:visited,
#innerheader li a:active {
color:#FFFFFF;
text-decoration:none;
padding: 10px;
}
#innerheader li a:hover {
background-color: blue;
}
It's because of padding. Remove it then it will work just fine.
Get rid of padding, that is what is causing it to move.
It's moving because you are changing the padding in the hover block. Remove that and it should be fine.
you're putting padding on the li a:hover! Of course it's going to shift the text. To fix this you need to define the width and height and reduce them by the padding amount on hover. OR move the padding to the non hover state.
Related
i want to make it so that when I hover the cursor over a link in the list, a bullet point image shows up to the left of the list text. however, it does not seem to work.
I've also tried the following CSS and it does not work:
ul.navibox a:hover{
list-style-image:url(images/crown-icon.jpg);}
any ideas? thanks
Current CSS:
ul.navibox{
margin:0 0 0 0;
padding:5px 0 0 20px;
list-style-type:none;
font-family:arial,verdana,helvetica,sans-serif;
font-size:14px;
color:#333333;}
ul.navibox li a:link{
color:#ff0;
text-decoration:none;}
ul.navibox li a:visited{
color:#f00;}
ul.navibox li a:hover{
color:#f0f;
list-style-image:url(images/crown-icon.jpg);}
HTML:
<div id="middle_left_box"><span style="padding-left:10px">Categories</span>
<h3>accessories</h3>
<h4>Supplies:</h4>
<ul class="navibox">
<li>Pellets</li>
<li>Gas</li>
<ul>
</div>
Without a Demo being provided it's hard to be sure but I would try this
ul.navibox{
margin:0 0 0 0;
padding:5px 0 0 20px;
list-style-image:none; /* default 'non-image' */
font-family:arial,verdana,helvetica,sans-serif;
font-size:14px;
color:#333333;}
ul.navibox li:hover{
list-style-image:url(images/crown-icon.jpg);}
ul.navibox li a:link{
color:#ff0;
text-decoration:none;}
ul.navibox li a:visited{
color:#f00;}
ul.navibox li a:hover{
color:#f0f;
}
Your previous CSS applied the list image to the anchor link which doesn't have that property available to it. So the hover has to be on the list item itself.
If you want to display a bullet aside <a> , you need to reset display of <a> to list-item.
Then , on hover you may switched bullet image from a transparent one to an arrow or so.
CSS example and DEMO:
ul.navibox li a:link {
color:#ff0;
text-decoration:none;
display:list-item;
list-style-position:inside;
list-style-image:url(http://dummyimage.com/16x16/fff/fff&text=);
}
ul.navibox li a:visited {
color:#f00;
}
ul.navibox li a:hover {
color:#f0f;
list-style-image:url(http://dummyimage.com/16x16/fff/000&text=->);
}
I´m trying to put a border-bottom to my ul li a menu element that appears when menu item is clicked.
I already have this effect working, but my border-bottom appears a bit down and its like behind my nav menu.
Can someone give me a little help understanding what is happening?
My Html:
<nav id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
My CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
// this boder is behind the menu!
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
My jsfiddle:
http://jsfiddle.net/mibb/Y4HKF/
It's because you set the display:block for your a, so the border will be around the box (which has height set to 46px). Looks like you explicitly set padding-bottom to 0 and then it still should work (the bottom border should be close to the link text?) but not really, because you also set the line-height to be equal to the height (both are 46px), so the text is centered vertically and give a space between the baseline and the border-bottom.
To solve this problem, simply remove the line display: block; in your css for the a tag. You don't need that at all, removing will solve your problem:
#menu ul li a {
text-decoration:none;
color:#ccc;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
Just add the box-sizing:
#menu ul li.active a {
box-sizing: border-box;
}
you set the border to an anchor. an anchor will just take the space of whatever element its in/around,
so setting border to an anchor is like setting it to the <li> itself.
you should wrap your text in the anchor with a span, that takes the space of the text and set the border to the span.
here is an example:
http://jsfiddle.net/TheBanana/Y4HKF/5/
I'm not sure your JSFiddle represents your problem accurately, but I'll suggest a solution based on that anyway.
Your JSFiddle example doesn't show a border on "li.active a" at all (if you remove the green background on the ul element, you'll see that there is no border present.) The reason, at least in the JSFiddle example, is that the comment "// this boder is behind the menu!" was not recognized as a CSS comment, thus preventing the code following it from working. I actually could swear I've seen this work fine in some environments, but it definitely wasn't working in this case.
See this thread on Stack Overflow: Is it bad practice to comment out single lines of CSS with //?
Besides that, your code seems to work just fine (I assume your JavaScript works, so I added class="active" to one of your li tags.)
In the following code, the black border is showing just below the bottom of the ul. If you want to change where it shows up, you should only have to change the height of the a element.
The HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
The CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
/* this boder is behind the menu! */
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
The JSFiddle:
http://jsfiddle.net/mibb/Y4HKF/
I am trying to get a:hover to change the background of a list item.
The approach I'm currently using only changes the immediate background color behind the text, not the entire space (padding:15px 55px 15px 55px;) assigned for that list item.
How do I go about changing the a:hover attributes to change the background color utilizing the full space assigned to that list item?
CSS :
#navbar{
background:#303030;
}
#navbar li{
display:inline-block;
list-style:none;
padding:15px 55px 15px 55px;
font-weight:normal;
font-family: 'Lora', serif;
}
#navbar a{
color:#F5F5F5;
}
#navbar a:hover{
background-color:#EE7621;
}
Why not set your hover on the li:
#navbar li:hover{
background-color:#EE7621;
}
Edit:
As suggested by thirtydot:
"Ideally, your a element should take the entire space of your li element. Try adding display:inline-block; or display:block to the a and move the padding from the li to the a"
I have a simple navigation with a sub-menu on one of my main navigation items. When the user hovers over this i would like the sub-menu item to show and when you go onto the sub-menu li items the main menu link to still have the background colour 'hovered' state still active. Thing is i cant even get the sub-menu item to show!
I have tried the usual display:none and when :hovered { display:block}; but it's ignoring it.
What am u missing? Must be something so simple but cannot see in the css styling.
Here is a link to an example of how it is setup: http://jsfiddle.net/ULSsa/
here is the demo link http://jsfiddle.net/ULSsa/6/ with corrected css
*{
padding:0;
margin:0;
}
body {
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#000;
padding:20px;
background-color:#F2F2F2;
}
ul, li, ol {
list-style-type:none;
}
ul#nav-1 {
width:60%;
height:46px;
border:1px solid red;
}
ul#nav-1 li {
position:relative;
display:inline-block;
*float:left;
margin-top:16px;
margin-left:-4px;
}
ul#nav-1 li a {
padding:22px 13px;
font-size:14px;
}
ul#nav-1 li:hover a,
ul#nav-1 li a:hover {
cursor:pointer;
background-color:#000;
}
ul#nav-1 li ul#sub-menu {
display:none;
position:absolute;
width:200px;
list-style:none;
left:0;
top:19px;
}
ul#nav-1 li:hover ul#sub-menu {
display:block !important;
}
ul#nav-1 ul#sub-menu li {
float: none;
margin: 0;
}
ul#nav-1 ul#sub-menu li a {
border-bottom:1px solid #dbddd4;
background-color:#f2f2f2;
width:200px;
text-align:left;
display: block;
padding:0;
padding-left:18px;
padding-top:13px;
padding-bottom:13px;
float:left;
margin:0;
}
ul#nav-1 ul#sub-menu li:hover a {
background-color:#3a3a3a;
color:#FFF;
}
Pretty easy. The submenu ul#sub-menu is not a child of the anchor element, but of the list element. You must either put the submenu inside the anchor element or check for the hover on the list element as following:
ul#nav-1 li:hover > ul#sub-menu { instead of ul#nav-1 li a:hover > ul#sub-menu {
http://jsfiddle.net/ULSsa/2/
You are using wrong selector here, it should be
ul#nav-1 li a:hover + ul#sub-menu { /* Note the + sign instead of > */
display:block !important;
}
Demo
Explanation: You are using > which will select direct child elements of a which in your case are none, so you need to use + adjacent selector to trigger the adjacent element
Just change your ul#nav-1 li a:hover > ul#sub-menu to ul#nav-1 li:hover > ul#sub-menu because the submenu it is a child of li and not of an anchor (a).
See the example by clicking here.
If you do not know, the CSS > selector means the specifically child of the element.
Updated
To maintain the link state, just do this:
ul#nav-1 li:hover a {
background-color: black;
}
See the example by clicking here.
Have a look at http://www.habitatlandscape.co.uk/
In Firefox and even Internet Explorer (!!!) the pop-up menus appear perfectly, vertically centered in the white strip, and always starting on the far-left-hand-side.
In Chrome, the menus start horizontally under the parent li, and are not centered vertically. I can fix the vertical alignment by targetting webkit with a different position, but I can't fix the horizontal alignment.
Why is Webkit ignoring position:absolute;left:0;?
CSS:
#header #menu
{
margin:0;
padding:0;
}
#header #menu ul
{
list-style-type:none;
margin:0;
padding:0;
margin-top:28px;
height:24px;
}
#header #menu ul li
{
display:inline;
position:relative;
}
#header #menu ul li a
{
display:block;
float:left;
padding:7px;
padding-bottom:3px;
background:#fff;
margin-right:5px;
text-decoration:none;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-family:'museo', serif;
font-size:12px;
text-transform:uppercase;
color:#fff;
font-weight:bold;
padding-left:12px;
padding-right:12px;
background:#01973D;
position:relative;
z-index:2;
}
#header #menu ul li:hover a
{
background:#00BB4A;
}
#header #menu ul li ul
{
clear:both;
display:none;
position:absolute;
top:39px;
width:700px;
margin:0;
padding:0;
}
#header #menu ul li ul li
{
display:block;
}
#header #menu ul li ul li a
{
background:#fff !important;
color:#000;
font-weight:normal;
padding:7px;
padding-left:11px;
color:#01973D;
padding-top:10px;
margin:0;
float:left;
}
#header #menu ul li ul li a:hover
{
color:#000;
}
#header #menu ul li:hover ul
{
display:block;
}
HTML (CMS-generated):
<div id="menu">
<ul>
<li class="parent"><a class="parent" href="http://www.habitatlandscape.co.uk/about-us/"><span>About Us</span></a>
<ul>
<li><span>Company History</span></li>
<li><span>Meet The Team</span></li>
</ul>
</li>
<li class="parent"><a class="menuactive parent" href="http://www.habitatlandscape.co.uk/portfolio/"><span>Portfolio</span></a>
<ul>
<li><span>View before, during and after photos from recent projects</span></li>
</ul>
</li>
<li class="parent"><a class="parent" href="http://www.habitatlandscape.co.uk/services/"><span>Services</span></a>
<ul>
<li><span>Design</span></li>
<li><span>Patios</span></li>
<li><span>Decking</span></li>
<li><span>Turf</span></li>
<li><span>Ponds</span></li>
<li><span>Driveways</span></li>
<li><span>Fencing</span></li>
<li><span>Electrics</span></li>
<li><span>Structures</span></li>
</ul>
</li>
</ul>
// etc
</div>
You've created a mess by display:inline-ing your <li> elements but display:block-ing your <a> elements.
In HTML, it's invalid to nest a block-level element in an inline element:
<span><div>FAIL</div></span>
When you do something like this, you're going to have cross-browser problems. The same goes if you use CSS to change the display property:
<div style="diplay:inline"><span style="display:block">STILL A FAIL</span></div>
Which is what you've done:
#header #menu ul li {
display: inline;
/* ... */
}
#header #menu ul li a {
display:block;
/* ... */
}
That behavior is more or less undefined as far as the specs are concerned (since it makes no sense) so the browser reserves the right to do something insane or ridiculous - which is what you're seeing. It works in Firefox only because you're getting lucky and it works in Internet Explorer because Internet Explorer is inherently insane and ridiculous.
If you want those <li> elements to stack horizontally, float:left them instead of inlining them. Then you can display:block your <a> element without issue. Once that's done you'll still have to switch up which elements are position:relative;-ed, and probably add a left:0 somewhere.
Here's an example of your current issue on jsfiddle, and here's an example of my suggested fix on jsfiddle, which involves positioning the #header #menu ul element relatively instead of the #header #menu ul li.
When I gave the #header #menu ul li a display:inline-block; it fixed it. It also changed the result of the hidden ul's top positioning, which should be 24px to match the height if the button anyways, right?