I have a background image that I'd like to position just off the edge of my ul li item.
Image
I guess you can see what I'm trying to do, position that little right pointing arrow off the egde, similar to the one at the top that points downwards. (The lime will be changed for the same colour as the arrow, but at the mo I have put a contrasting colour so the arrow can actually be seen)
CSS
body ul#main_navigation li li:hover > a, body ul#main_navigation li li.over > a
{
background-image:url(/images/nav_arrow_right.png);
background-repeat:no-repeat;
background-position:center right;
background-color: #0F0;
color: #FFF;
}
Desired result
EDIT: I have managed to get the arrow positioned correctly, however it is cutting off... how can I make it not cut off anything that is outside of the item?
#Francesca so you can play with positioning you can set the background-positionwhere do you want the arrow image that will go there............
I am giving you some rough idea below i don't have your much code....
body ul#main_navigation li li:hover > a, body ul#main_navigation li li.over > a
{
background-image:url(/images/nav_arrow_right.png);
background-repeat:no-repeat;
background-position:center 10px;
background-color: #0F0;
color: #FFF;
}
Related
I'm working on a Wordpress site and am not fully following the html and css given to me.
I have a rule that says when a menu item is hovered, make the background of the line item orange and the nested anchor text white:
.dropdown > ul li:hover, .dropdown ul li.current_page_item {
background-color: rgba(255,165,0,0.4);
Then:
.dropdown ul li a, .dropdown ul a { // because there are nested drop down menus
display: block;}
The first rule works the second does not. Using the inspect element feature I notice that when I apply this rule it becomes scored out. When I apply the rule outline: solid 1px to see the nested anchor, it is indeed smaller than the parent line item when my goal is to make it match the size.
Here is the nav: http://jsfiddle.net/hfnjgjxf/
Notice that when you hover over the menu items the text only changes to white when you hover over the center (the inner a tag). The inner a tag should be the same size as the parent so that when hovered, the text turns to white, on any part of the line item.
Hope I'm talking sense. If you view the fiddle you'll see what I mean.
Since the list items don't have explicit width and/or height, we can't change the size of anchor tags properly to fill entire space of each list.
However, you could simply achieve that by adding the padding on anchor tags instead of the list items:
EXAMPLE HERE
.dropdown ul li {
/* padding: 7px 10px; */ /* Remove this declaration */
border: none;
border-right:2px solid lightblue;
background-color: transparent;
}
.dropdown ul li a {
display: block;
padding: 7px 10px; /* Add this instead */
}
It would not be required in this situation to make the anchor element the same size as its parent, but just to apply the effect to the anchor, based on the hover of the parent li. You can achieve that by changing the selector to match the li hover rather than the a hover.
.dropdown > ul li:hover > a {
color: white;
}
http://jsfiddle.net/hfnjgjxf/2/
I have included a jsfiddle to show you an example. I have the navigation ul items set with a white background and the font is a red color. When hovered over I want the two colors to swap, the background to become the red color and the font to become white. Before I put the anchor tags in it worked, but after the font does not change to the white color on hover. If I add this:
nav ul li a:hover{
color:white;
}
the font will change to white, but not when the box is hovered on, but only when the font itself is hovered on, but I want the font to change to white as the list item box is hovered on. Any help? Thanks!
jsfiddle: http://jsfiddle.net/xNZxF/
Add this:
nav ul li:hover a{
color:white;
}
jsFiddle example
To match the easing you may want to also add -webkit-transition: all .5s ease-in-out; to nav ul a.
jsFiddle example
Just add the following to your CSS.
nav ul li:hover > a {
color: white;
}
Also remove color: white; from nav ul li:hover. You where trying to change the text color of the text within the li while it was actually in the a. With nav ul li:hover > a you can change the color of a when the nav ul li is being hovered over. This doesn't give the text a fancy transition to it's hover color, but I think you can figure that out by yourself. Good luck!
Give this a go:
nav ul li:hover a {
color: white;
}
Im trying to change to the color in both the drop down menu, as well as the footer background color of the site http://ablecareinhome.com/
Ive tried numerous css tweeks to make this change, but I am at a stale mate. I was able to get the nenu buttons themselves to change using the following:
#menu li.current-menu-item a,
#menu li.current-menu-parent a,
#menu li.current_page_parent a,
#menu li a.selected,
#menu li a:hover,
#menu li.current_page_item a {
background: url("../images/menu-bg.png") repeat-x scroll center top #00a99d !important;
}
this is the color i am going for in the other footer and menu parts. #00a99d
Any help is appreciated. As a side note, this theme allows internal css options/modifications without building a full childs theme. It is done from the dashboard, and stylesheets are coming from external source it appears.
Any help is greatly appreciated!!
well see the css here
#menu .sf-menu li li {
font:12px Arial, Helvetica, sans-serif !important;
text-transform:capitalize;
margin:0;
padding:0;
background-color: #00a99d;}
As for footer its an image see the link
you can remove the backgroun image and
edit this css
.footer-container {
background:url(../images/footer-bg.png); remove this
background-color: # #00a99d;}
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;
}
I have a menu:
<div id=menu>
<ul=navigation>
<li><a href=>Home</a></li>
</ul>
</div>
With the sliding doors technique I want to create my button (containing rounded corners at the bottom.)
I can get this to work, by hovering the a and the li. But the li is bigger, and if I hover over the li, without hovering the a, only the background image for the li shows.
Now I'm wondering if there is a way to connect the hover of the li and the hover of the a within css. I rather fix this problem without using javascript.
Googleing didn't helped me further. I'm guessing this isn't possible, but I wanted to be sure before trying other options.
Thanks in advance for any advice/help/suggestions.
From what I gather you cannot do what you are after in the way you have described it.
However what I would do is make the "a tag" display as block and set the width and height to fill the "LI" that way you can use a:hover and change the whole bg which makes it look like the LI is changing
li a {
background:#000 url(images/bg.png) no-repeat 0 0;
display:block;
height:20px;
width:100px;
}
li a:hover {
background:#fff url(images/bg.png) no-repeat 0 -20px;
}
also use some padding to sit the text in the right place within the "LI" and remove any padding from the "LI"
li:hover is not supported without JS in older versions of IE so using a:hover instead provides better cross browser compatability
You can do this simply with:
<div id=menu>
<ul>
<li><a href=>Home</a></li>
</ul>
</div>
Then in your CSS:
#menu ul li:hover{
background-image:url(newimage);
}
If you require IE6 compliance, just make your links fill the entire width of the UL's.
#menu ul li a:link, #menu ul li a:visited{
display:block;
width:999px; <-- enter pixels
height:999px; <-- enter pixels
}
then modify the background image normally with:
#menu ul li a:hover{
background-image:url(newimage);
}
#menu li {
/* normal li style */
}
#menu li a {
/* normal a style */
}
#menu li:hover {
/* hover li style */
}
#menu li:hover a {
/* hover a style */
}
Will not work with IE6...