Can I create button, use a background image that changes on hover and on active, and have the active state show an image that extends outside of the bounds of the anchor? Here's my sprite:
https://dl.dropbox.com/u/7737304/menu-sprite1.png
The top half of the sprite is 'hover', the bottom is 'active'. I don't anything below the solid bar to be a clickable link, and I don't want to set a width as the menu text will set on top and extend beyond the left and right edges of the image.
I've attempted to assign the background image to the parent li tag, which works for 'hover' but I can't make it work for 'active'.
Any ideas?
CSS
.navigation li:hover{
background: transparent url(../images/menu-sprite.png) center -86px no-repeat;
}
.navigation a{
color: #e8e8e8;
font-weight: bold;
text-transform: uppercase;
padding:0.5em 0.8em;
}
.navigation a:hover{
color: #fff;
}
.navigation a.active {
color: #fff;
}
Do you mean something like this ?
The anchor 'expands' when active, but doesn't change the flow, since it uses a negative margin to make it actually the same size as before.
So: add the amount of padding you want to expand the anchor, then add the same amount as a negative margin. (You do need the anchor to be a block or inline-block element, since otherwise it can't use margin)
No need for JavaScript with this method.
This is what I came up with: DEMO
It just puts the background image on the <li>. Not sure if this is exactly what you are looking for or not though.
This is a tough one to explain! What I did was to make the a tag clickable, extended the li with ::after to which I could apply the styles necessary to make it change, but not be click able.
Like I said, tough to explain but here is a demo: http://jsfiddle.net/cchana/SgH5C/
And here's some CSS that may help you:
.navigation li::after {
background: transparent url('https://dl.dropbox.com/u/7737304/menu-sprite1.png') center -49px no-repeat;
bottom: 0px;
content: '';
display: block;
height: 31px;
position: absolute;
width: 100%;
}
.navigation li:hover::after {
background: transparent url('https://dl.dropbox.com/u/7737304/menu-sprite1.png') center -130px no-repeat;
}
Related
I am making a navigation list, and I was wondering if there is a way to use the background property in CSS to place an image on both sides of the link when the user hovers over it. Here is what I currently have:
nav.vertical li a:hover {
background: #D4CD00 url(wnaderknight.png) right/25px 25px no-repeat;
color: black;
}
You may use multiple backgrounds or pseudos
.bg {
display:inline-block;
padding:30px;
background:url(http://www.icone-gif.com/icone/nature/terre/terre-32.png) right/25px 25px no-repeat,url(http://www.icone-gif.com/icone/nature/terre/terre-32.png) left/25px 25px no-repeat
}
.psdo:before,
.psdo:after {
vertical-align:middle;
display:inline-block;
content:url(http://www.icone-gif.com/icone/nature/terre/terre-32.png)
}
link with bg image on both sides <br/>
link with bg image on both sides
first of all sorry for my english I'm going to try to be as precise as possible, here is my problem:
In my css I created a div displayed with none, and when I hover on a link in the nav I changed the display with display block it is a simple sub-nav pattern. But here is my problem, once i'm hovering my link when I leave it my sub menu disappears automatically, so how do I keep my sub menu in display block even if i'm not hovering the trigger anymore and all of that in pure css (it is an exercice for me):
here is my repo on github : https://github.com/MehdiAlouafi/Int-gration-Briefing-2
I think you made a couple of mistakes.
/* First of all it's better to have your list-item relative. */
nav ul > li {
position:relative;
}
/* Then your .on-hover can have simpler top and left coordinates. */
.on-hover {
height: 150px;
background-color: rgb(243,243,241);
width: 165px;
position: absolute;
left: 0;
top: 0;
display: none;
border-bottom: 1px solid rgba(96, 96, 96, 0.2);
z-index: -1;
}
/* You want the hovering to be over the entire li.*/
nav ul > li:hover .on-hover {
display: block;
}
You had the hover work like this. Which means it stops hovering when you leave the #test being the anchor(<a>) element
#test:hover + .on-hover {
Working jsfiddle: https://jsfiddle.net/3su9jppc/1/
I'm trying apply this CSS property:
.accordion .accordion-title {
list-style-image: url("images/btn_mas.png") !important;
}
To each h3.accordion-title inside div.accordion on this page. The idea is to have something like this:
Where LI items gets a image and that image change on hover for another one lets said for one called btn_menos.png but I can't get it to work as you can see on the page. What I'm doing wrong? Any advice? How Ic can achieve that?
Note: I can't change how the HTML for the item is generated so it's required to work with that markup
You cant add list-style-image to an h3. Those are reserved for li tags. What you should do instead is add the image as a background to the the span that wraps that text like so:
.accordion .accordion-title span {
color: #868a8c;
text-decoration: none;
background: url(images/btn_mas.png) no-repeat 0px 8px; //add
padding: 0 0 0 25px; //add
}
Best way to understand what I want is to watch this short six second video. Please ignore the font change in the video. http://www.youtube.com/watch?v=7KM78DKoVZU
What's the best way to go about making that rounded rectangle to show up behind the navigation link on hover? On hover, I could have the navigation button's background change to a background image with a rounded rectangle in the image, but before I go about that, I want to ensure there's no cleaner or easier way to go about this.
Thoughts? Thanks!
The rectangle isn't really showing up behind the nav link. What's really happening is the nav link's style is changing during the hover state.
#menu {
list-style: none;
display: inline-block;
background: #eee;
margin: 0;
padding: 0;
}
#menu li {
float: left;
padding: 10px 5px;
margin: 4px;
color: #222;
cursor: pointer;
}
#menu li:hover {
background: #ccc;
border-radius:6px;
}
Check out the jsFiddle for a live example.
http://jsfiddle.net/kGa67/
EDIT- I suppose the cleanest way is style both the ul and li as inline-block instead of floating the the li like I did. Use ems if you have a responsive design but beware that it doesn't always scale perfectly on very small and very large widths.
Check out this fiddle: http://jsfiddle.net/8PqkH/
It's easy to do.
nav a:hover{
background: #902;
color: #fff;
border-radius: .5em;
}
I got a problem with CSS list-style-image tag my list image is some what large, and the text getting behind it is pushed down to the lower part of the style tag, is there a fix to bit it back in the middle
it is now like this:
|
|
| here
and I want to be:
|
| here
|
Just increase the line-height of the li elements in question.
#iconlist li {
line-height: 2em;
}
Also, as keithjgrant suggested, I would use background-images instead. List-images are positioned rather inconsistently in different browsers. So use something like this:
#iconlist li {
padding-left: 22px;
background: url(20x20-icon.png) left center no-repeat;
line-height: 22px;
list-style: none;
}
Forget setting the list style image and use the following css...
ul#example li {
list-style-type: none;
}
/* create new marker */
ul#example li:before {
display: marker;
content: url("new_marker.png");
/* set the following to fit your needs */
vertical-align: 3px;
padding-left: 2px;
padding-right: 12px;
}
Note the vertical align style, set it to minus figures to push text upwards.
Source of answer.
Your question is a little unclear, but it sounds like you might need to look at background images rather than (or supplement to) list-style-images.
The only realistic way to achieve this is with background-image:
ul li {
background: transparent url(http://farm1.static.flickr.com/120/308863127_6eb1715f3b_m.jpg) 0 50% no-repeat;;
list-style-position: outside;
padding-left: 250px;
line-height: 160px; /* vertical height of image */
}
JS Fiddle demo.
This does, however, fail badly if the text of the li wraps to a second (or third) line.
Try vertical-align: middle; (css)