How can you do this in css?
I want the background image of the li's to slide under the background image of the ul where they are in.
I tried to do it with z-index but it didn't work.
li{
list-style:none;
background-image:url("2.png");
z-index:-10;
position:relative;
}
ul{
background-image:url("1.png");
background-repeat: no-repeat;
z-index:100;
position:relative;
}
Is this possible? And how is it done if it is.
update: Picture explaining what i mean
I like the idea so much I just made it for you jarco. It seems it is not as exact as you want but, it is pretty similar.
Demo
A little div to show the bar, and script to bring it up and down
$("ul").mouseenter(function() {
$("#bar").animate({
height: $("ul").height()
});
}).mouseleave( function() {
$("#bar").animate({
height: 20
});
});
Update with the heights
Related
I am using Wordpress native menus for my custom theme. The catch is, that I am using background images instead of text. That being said: I have all of my images in tact but now I'm trying to make the images scale down responsive when the .wrapper container they are in scales down.
My latest attempt involves using background-postion: property and background-size: property and getting the image to scale with it's parent element. In this case the .wrapper. My overall goal is to get the images to stay in a horizontal line the width of the wrapper and scale down to size when the wrapper scales down.
.wrapper {
max-width:1280px;
width:95%;
margin:0 auto;
}
.nav ul li {
float:left;
max-width:100%;
height:119px;
margin:0;
padding:0
}
/* nav elements */
li#menu-item-1688 a {
background:url('img/ksl_news.png');
max-width:100%;
height:100%;
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-repeat:no-repeat;
display:block;
padding:0;
margin:0;
}
I am looking for a pure css solution if possible.
Please let me know what other info you need in order to help.
Thanks in advance.
My suggestion would to use simple jQuery to detect window/browser size changes and add classes to the necessary elements.
var $window = $(window),
$body = $('body');
$(window).on('resize', function () {
if ($window.width() < 800) {
$body.addClass('medWin');
}else{
$body.removeClass('medWin')};
});
Then you would style:
body.medWin .menu li {
// style here
}
You could also just apply the class to the menu container or the ul itself.
I am using the following CSS on anchor tags with specific classes. Works OK except that long link text is forced into new lines. I guess this has to do with the width...
a.interactive {
background:url(../images/icons/icon_interactive.png) left center no-repeat;
padding-left:30px;
height:25px;
width:25px;
display:inline-block;
text-decoration: none;
vertical-align:text-center;
}
try this
a.interactive {
background:url(../images/icons/icon_interactive.png) left center no-repeat;
height:100%;
width:100%;
display:inline-block;
text-decoration: none;
vertical-align:text-center;
}
you need to maximize the width for that use 100% width or maximum width your design allow you.
a.interactive {
/*...*/
white-space: nowrap;
}
I originally setup a single <div>, z-indexed above other content. I couldn't click through because even though it was transparent, it wasn't clickable.
I tried to split the pieces apart - sides, corners and all, but the link is still not clickable.
Here's my page:
http://4amnew.4thavenuemedia.com
Any ideas?
adjust your css:
#twitter
{
z-index: 200;
}
Give Z-index:250 for #logo id
#logo {
height:136px;
left:90px;
position:absolute;
top:0;
width:240px;
z-index:200;
}
IF you want to test link also clickable means give z-index:210; for #twitter
Where have a i gone wrong here
ul.bullet { list-style-image:url('../images/bullet-blue-icon.png');vertical-align:middle;line-height:16px; }
ul.bullet li { line-height:16px;font-size:14px;}
The image is 16px x 16px
Should dispplay absolutley inline with the li text so like this
[ image ] text here
But the image is off cock,
Try setting the background image to the LI rather then the UL. Then set the background position for the image.
Something along the lines of:
ul{
list-style:none;
padding:0;
margin:0;
}
ul li{
background:url(image/path.png) left center no-repeat;
padding-left:20px;
}
I haven't tested it, but it should work. You can, of course, still have margin and/or padding on your UL if you wish - this is just for the example.
Two problems, both caused by IE7
www.myvintagesecret.com
1) I have a Div called .postheader that holds the title and another div called .clip . As you can see, the clip should hover over the content and not push it down. (use any other browser to test). Its currently giving me a huge gap when it should only go as long as the text does.
.postheader {
background:url(images/posthead.png) no-repeat;
min-height:100px;
max-height:600px;
padding-right:25px;
overflow:visible;
}
.clip {
width:214px;
height:275px;
float:right;
position:relative;
}
Any ideas? I can make the max height smaller, but that causes the .clip div to be cut off.
2) In the sidebar, there are a bunch of items called .sidebaritem. They have a background image that is only not showing up in IE7. I can't figure this one out.
.sidebar-item
{
background:url(images/sidebar.png)top center no-repeat;
font-size: 12px;
margin-bottom: 20px;
padding-left: 18px;
padding-right:10px;
padding-top:8px;
min-height:200px;
}
1) Try this. I think using position:absolute instead of float:right will solve the problem.
.postheader {
background:url(images/posthead.png) no-repeat;
position:relative;
}
.clip {
width:214px;
height:275px;
position:absolute;
top:0;
right:25px;
}
2) Hmm.. It could be the space after closing ).
background:url(images/sidebar.png) top center no-repeat;
3) Response to comment: In that case... You should redo the background. Create wrappers with backgrounds only and put your content inside. Clip should be the top div inside wrapper and float to right. Do something like...
<div class="itemTopBg"><div class="itemBottomBg"><div class="itemLeftBg"><div class="itemRightBg">
<div class="clip">...</div>
... content with no bg... just text...
</div></div></div></div>
I think I solved 1) with these changes
.clip drop float right, change position to absolute, and give it a right of 0.
.postheader add position relative
.postheader h2 width of around 400px
Seemed to work in IE7 and firefox, not sure how it looked in other browsers though.