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"
Related
I have a ul with several list items inside made up of h3s and lis with the class id of "close".
I have a hover style that expands the letter spacing on the h3s, the problem is, the items with the close class expand as well. I've tried a few different things before adding the class, like nth child etc (all which are visible in the code). I would like the close classed lis to remain the same size when the h3s are expanded.
Any help is appreciated.
jsfiddle here:
https://jsfiddle.net/snowwhyte/7eLmarnp/7/#&togetherjs=Uq5j49dUG0
CSS:
a {text-decoration:none;
}
li {list-style:none;
}
}
#openClose {
position:absolute;
top:200px;
margin-top:55px;
}
#openClose li{
list-style-type:none;
display:block;
padding-right:-50px;
}
#openClose li:nth-child(2n+2){
margin:30px 0 100px 0;
background-color:#000;
border:2px #fff solid;
text-align:center;
letter-spacing:1rem;
padding:10px 0 10px 0;
}
#openClose li:nth-child(2n+2):hover{
letter-spacing:-0.1rem;
transition:.3s;
}
#openClose li a h3{
font-family:Helvetica, Gotham, Helvetica, Arial, sans-serif;
color:#73a6c2;
}
.close{
}
#openClose li a h3:hover{color:#fff;
text-shadow:2px 1px 2px #000;
transition:.2s;
letter-spacing:1rem;
}
a:visited { text-decoration: none; color:#B8CEDB; }
a:hover { text-decoration: none; color:#D7D8D8; }
a:focus { text-decoration: none; color:#fff;
}
HTML:
<section id="openClose">
<ul>
<li><h3>Tool Descriptions</h3></li>
<li class="close">Close</li>
<li><h3>Key tools</h3></li>
<li class="close">Close</li>
<li><a href="#wrapper3"><h3>Adjustment Layers & <br>
Blending modes</h3></a></li>
<li class="close">Close</li>
</ul></section>
The thing is that you don't have any element with a defined width, so every elements have the width of the largest element.
To do what you're trying to achive, you have plenty of solutions depending on your needs.
You could define a fix width on one of the parents, like the ul for example and add the white-space: nowrap property to the h3 (see the fiddle) :
ul {
width: 200px;
}
#openClose li a h3{
white-space: nowrap;
}
You could also set a fix width on your li with the close button (see the fiddle) :
#openClose li:nth-child(2n+2){
width: 200px;
}
Here is my try. Like you see i changed a little your code joining some things and clean a little, but the point is in the width property of .close
https://jsfiddle.net/7eLmarnp/12/
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've modified some existing CSS code i found to develop a menu. It all works fine except when i hit the drop down menu. if there there is another HTML component on the page, the menu stays behind the component instead of it staying on top (i hope my description makes sense).
Here is the CSS:
#navMenu{
/*font-family: 'Tenor sans', Calibri, Times, Times, serif;*/
margin-left:2px;
/*width: 944px;*/
width:100%;
font-weight:normal;
font-size:15px;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
/*removes the bullet point*/
list-style:none;
float:left;
position:relative;
background-color: #F9F9F9;
}
/*for top level */
#navMenu ul li a{
text-align:center;
font-weight:bold;
font-size:0.8em;
line-height:height;
font-family:Arial,Helvetica,sans-serif;
text-decoration:none; /*remove underline*/
margin:-1px;
/*height width for all links*/
height:30px;
width:150px;
display:block;
/*border-bottom: 1px solid #ccc;*/
color: #00611C;
}
/* hiding inner ul*/
#navMenu ul ul{
position:absolute;
visibility:hidden;
/*must match height of ul li a*/
top:28px;
}
/*selecting top menu to display the submenu*/
#navMenu ul li:hover ul{
visibility:visible;
}
#navMenu li:hover {
/*background-color: #F9F9F9;*/
background-color: #DBDB70;
border-radius: 5px;
}
#navMenu ul li:hover ul li a:hover{
/* color: E2144A;*/
color:#E2144A;
}
#navMenu ul li a:hover{
/*color: E2144A;*/
color:#E2144A;
}
Would anybody be able to tell me whats missing to enable the drop down menu to stay on top?
thanks.
It would be useful to have the HTML code, not just the CSS, to troubleshoot this. But with just the CSS you posted, look into setting a z-index on the elements that are layered backwards from the way you would like.
http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index?redirectlocale=en-US&redirectslug=Understanding_CSS_z-index
use z-index.
#navMenu{
/*font-family: 'Tenor sans', Calibri, Times, Times, serif;*/
margin-left:2px;
/*width: 944px;*/
width:100%;
font-weight:normal;
font-size:15px;
z-index:1;
}
Try giving your menu a z-index: 1; (or higher). You can also lower the z-index of whatever content is covering up your menu.
You need to set the parent that will wrap your menu to be in position: relative, this could be a body or maybe an outer wrapper. Then you can use absolute position to place it always at the top and specify some z-index:
For more information: see this z-index property information in here:
https://bytutorial.com/tutorials/css/css-z-index
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.