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.
Related
I've got a horizontal menu block in Drupal that has a repeated background image.
I'm now trying to make a drop-down menu for the menu's children.
The problem I'm having is that the background image repeats for the width of the entire menu and the height of the drop-down menu when the drop-down is active.
I understand why that is happening, but can't think of an elegant way to solve the problem. Using the background image on just the buttons should work, but then the background wouldn't extend to the edges.
Is there a way to restrict the height of the repeated image? If I can restrict the height, I can set it to the height of the parent menu. Any other suggestions welcome.
How about this? Don't worry about my method of hiding/showing the menu (or the cheesy background)
I added a class for the submenu, just to simplify the code.
The trick is to specify the height of the menu and then set overflow to visible.
working code here: http://jsfiddle.net/cockypup/Fs3WV/
This is the CSS
#blockmenu {
background-image:url(http://t1.gstatic.com/images?q=tbn:ANd9GcS3LkgeI7h_C9w5PbHx_mIuVETgzO2NqJJdOSet-va1t6Q8nUAj);
height:30px;
overflow:visible;
}
#blockmenu ul li {
display: inline;
padding-right: 30px;
list-style: none;
color:white;
position:relative;
}
.sub {
display: list-item;
list-style-type: none;
padding-left: 0;
display:none;
position:absolute;
top:50px;
width:60px;
}
You can use the attribute background-size to indicate the size of the background.
Check out this page for a full description of the attribute:
http://www.css3.info/preview/background-size/
I can't figure out why there is about a 20 px white space above my div. I'm trying to create a horizontal menu across the top of the page. Here is the code JSFiddle but the white space isn't showing up here. Don't laugh at me but yes I'm still using Frontpage and it's not showing up there either. It only shows up in browsers - Chrome, FF and IE9.
I've tried everything I can think of including making sure the margins are all set to 0:
html, body {
padding:0;
margin:0;
}
But nothing gets rid of that white space!
Just add the following to your style sheet:
ul {
margin: 0;
padding: 0;
}
or add ul with your html, body declaration
html, body, ul {
padding:0;
margin:0;
}
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;
}
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
I have set an image 32x32px as a list style image like this:
.class li{
list-style-image:url(../images/site/img.png);
}
It works great but the problem is the text is on the bottom of the list item (because the image is 32px high the list item is also 32px high). I would like to have the text vertically centered so it looks good.
I tried:
.class li{
line-height:1em;
}
But that didn't help.
You can use the vertical-align property to specify centered alignment. Like so:
.class li {
vertical-align: middle;
}
The list-style-image tag should be applied to the list itself, and not the list item as you have. So it would be..
ul.class{
list-style-image:url(../images/site/img.png);
}
I find it rather difficult to get the image exactly to where I want when relying only on list-style to do the work.
Therefore I prefer placing the image as background inside the LI tag like so
ul {list-style-type:none}
ul li {list-style-type:none;
background:url(image.png) 1px 4px no-repeat;
margin:0;
padding-left:20px}
This results in the image being placed 1 pixel to the right and 4 pixels to the bottom measured from the top left corner of the area covered by the LI tag. margin:0 is required to avoid indentation of the LI contents, as we do this with the padding:20px to make room for the image to the left of the LI contents.
I tried all of the above and nothing worked so I did this
.coreUL li{
display:block;
list-style:none;
background-image:url(../images/factoryIcons.png);
background-repeat:no-repeat;
background-position:left 8px;
padding-top:10px;
padding-left:50px;
height:100px;
}
Now that works like a charm -- infact this also gives me more control on the exact place where i wanted to put my li images . The images I used were 32 X 32 px in size so I gave them a little extra padding by making that 50px;
i hope this helps.
Setting your line-height to the height of the element will align text vertically. So if you <li> height is 32px then set your line-height to 32px.
.class li { height:32px; line-height:32px; list-style-image:url(img.png); }
#mindmyweb, yes indeed your solution works. But your example was a bit too decorated with 100px high lines, so here is a more modest example.
The image should be a 20x20 png bullet, centered, wıth bevel etc, with 3px shadow edge area.
.post li, .page li {
background-image: url("images/bullet-square-big-red.png");
background-position: left 2px;
background-repeat: no-repeat;
list-style: none outside none;
margin-bottom: 12px;
padding-left: 25px;
padding-top: 0;
}
Works exactly same in firefox 24, chrome 30, ie>=7.