I want to create an unordered list with list items that have images and the bullets beside them. If I create a background image as the way to achieve this the image is appearing behind the text. If I set the image as a list-style-image, it's not lining up with the text and it's taking away the bullet that I want. Here is my code for the list-style image and I was going to attach an image, but I don't have enough points yet since I'm new to achieve this. Any help would be appreciated!
Thanks!
.ul1
{
margin-left: 25px;
list-style-image: url('Images/Air Icon copy.png');
}
<div>
<ul id="Ul1">
<li class="ul1">Clean air: Our emissions are 250 percent lower.</li>
</ul>
</div>
This is what I used for the same problem you had:
list-style: none;
background: url('something.png') 0 0 no-repeat;
padding: 0 0 0 30px;
height: 30px;
Instead of using an image that wouldn't align properly i decided to use it as a background and just don't repeat it. Play around with the padding and height untill it fits how you want!
Jsfiddle if you're interested
EDIT: Just read that you wanted to keep the bullet. Take away the list-style: none and you're good to go.
Here is the another way to show the image and as well bullets.
.ul1
{
left:12px;
/* list-style-type:none;*/
}
li{position:relative;}
li.ul1:before {
content: "";
content: url(http://lorempixel.com/20/20/);
margin:10px 0;
}
Check the DEMO.
Related
I have a list that resembles:
<ol>
<li class="node">1</li>
<li class="node">2</li>
<li class="node">3</li>
<li class="node">4</li>
<li class="node_end">5</li>
</ol>
I am using images to replace their default bullet points in CSS. Separate images are used for the end node as well as another image for all other bullet points. The images display, however as soon as I add these images a 4 pixel padding is somehow added to the top and bottom of each list item. This extra spacing changes the height from 26 pixels high to 34 pixels high. This gap provides about an 8 pixel separation between the different bullet point images which were meant to have a 0px separation as per my design.
The CSS I made:
li {
margin: 0;
padding: 0;
border: 0;
}
li.node {
list-style-image: url('../imgs/nodes/udr.png');
}
li.node_end {
list-style-image: url('../imgs/nodes/ur.png');
}
Is there any way to remove this spacing? I have tried removing all things padding/spacing/border related to all li's, but nothing so far.
EDIT:
I do not think I am making my question clear enough, so I am posting the image of what it looks like on my end.
The joining bars as you see in the image above are supposed to be connected (as if one continuous image). Removing the special CSS images for bullet points reduces the height of each item to the height of the CSS bullet point image (as I have tested using Google Chrome's element inspecting tool).
EDIT 2:
A close example to show my problem can be found here: http://jsfiddle.net/EyVRF/1/
Garry Cairns might be onto something. I tested your code and borrowed a list style image from a website that was a good size and i see no padding that would be an issue, or at least not the type you're seeing.
http://jsfiddle.net/BYQQV/
list-style-image: url('http://www.globalindustrial.com/site/img/bullet_homecat.gif');
You may also want to consider not having to create a whole new class for the last list item. Try instead
li:last-child { list-style-image:.... }
Althouth IE is not happy with that. But for future reference.
lack of .css and html unable me to answer you.
About : Is there any way to remove this spacing? YES there is.
try this :
ol, li{list-style-position:outside;margin:0;padding:0}
or
ol, li{list-style-position:inside;margin:0;padding:0}
Let me guess ? You didn't reset your .css ?? (margin:0;padding:0)
Ok, i can see what you want .. and sadly, you wont be able to achieve what you want this way becose the 'padding in between the bullet and first character is 'browser-specific' and unmanagable through css.
You will have to use another technique : background image.
<ul>
<li class="node">1</li>
<li class="node">2</li>
<li class="node">3</li>
<li class="node">4</li>
<li class="node_end">5</li>
</ul>
ul, li {
margin: 0;
padding: 0;
}
li {
font-size:16px;
line-height:16px;
list-style-type:none;
background:red url('http://placehold.it/16x16') no-repeat scroll 0 0;
padding-left:16px;
border-bottom:1px solid blue;
}
li.node_end {
background:blue url('http://placehold.it/16x16') no-repeat scroll 0 0;
}
http://jsfiddle.net/2RtB7/1/
Carry on
PS, try to search a little more before asking for help --> CSS: Control space between bullet and <li>
I have a division that has a background image but it needs to be a varible size. I'm using three images. One of the top, one for the bottom and a repeating one for the middle.
I've only got one div to work with and given the middle background image to that and then used the before and after pesudo classes to place the other images. The image from the main division shows up behind these two since they are semi transparent. Is there a way round this in css or a better method to do it?
HHTML:
<div class="faq">
<strong>Q. Who was the greatest business man?</strong><br />
<p><strong>A. </strong>Noah. He kept his stock afloat, while the rest of the world went into liquidation.</p><br />
<strong>Q. How should my employees let off steam?</strong><br />
<p><strong>A. </strong>Take them see to see the comedian Sampson. He'll bring the house down.</p><br />
</div>
CSS - style
.faq{
background: transparent url(../images/image_middle.png) repeat-y center;
color: #ffffff;
display: block;
}
.faq:before {
background: transparent url(../images/image_top.png) no-repeat center top !important;
}
.faq:after {
background: transparent url(../images/image_bottom.png) no-repeat center bottom !important;
}
CSS - layout
.faq:before {
padding-top: 20px;
display: block;
content: "\A";
}
.faq:after {
padding-top: 14px;
display: block;
content: "\A";
}
.faq{
margin: 20px 0 5px !important;
padding: 0 20px 0 15px !important;
}
The best way to do this is by using multiple backgrounds - see https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multiple_backgrounds. in this way, you can specify the 3 different images and their positions as styles for the element. List the top image first.
If your browser support requirements won't work with CSS multiple backgrounds, you can get the same result by styling other elements - such as a h1 or p:last inside your div. This approach is more complicated, since you have to be very careful about the position of elements inside that div.
Note that a background or image will always show through transparent areas of an image above it. If you don't want this, you must put something opaque into that cover-up image - such as the background color that you're trying to fade to.
For more detailed help, please post a self contained example of the code you're working with.
Can anyone help me with list.
I have an image:
And now I need to build list with default bulls replaced with left side arrow (but not with whole image):
How I can achive it using cross-browser css?
My HTML markup is:
<ul>
<li>Conveniently located on Adelaide St. W, one block east of the Bathurst and Adelaide intersection, just north of the Gardiner Expressway, downtown Toronto.</li>
<li>All units are located indoors, which means they are all climate controlled.</li>
<li>There is an indoor loading dock with four bays, two of which are large enough to accommodate up to 50' trailers.</li>
<li>Complimentary use of on-site dollies and pallet truck.</li>
</ul>
See this question regarding using Sprite images with list style backgrounds:
use CSS sprites for list (<li>) background image
I guess this is what you were asking for.
Check out this fiddle
Here is the code
The HTML is the same.
The CSS
ul {
list-style: disc inside none;
}
ul li:before {
position: absolute;
content: "";
left: 8px;
background: url('http://i.stack.imgur.com/KKMcz.png') no-repeat #fff;
width: 8px;
height: 14px;
}
you need to set the
background: transparent, url(/image/sprite.png) no-repeat -XXpx -XXpx;
where the -XXpx moves the position of the element. The only problem with this is you will have to make sure the padding on the li where the bullet shows is not too wide and shows only the size of the image you want.
the other option you have is to set the list-style-type: none; and then drop a div or span at the beginning of you li elements that you want to have the image. I wouldn't recommend this but it would work,
ul {
list-style-image: url(/xxx/xxx.gif);
}
Will give you the whole image, can't you just then split the image down the middle and use the left part?
Here's another method that should be cross-browser. You would need to change your sprite image, however. (I couldn't seem to open the image with Photoshop or GIMP or any thing else without it messing up, though. You would have to fix it up yourself). (fixed)
Demo
Basically it offsets the other image vertically instead of horizontally. If you have longer lists, you will have to modify how far it is offset vertically. This should work on all browsers and I tested it in IE9 with compatibility settings changed. it works even in quarks mode.
The modified image looks like this:
I have an ordered list that I am trying to mark up the HTML can be seen below:
<ol class="main tags">
<li class="main">Gump...</li>
<li>We ar...</li>
<li>We a...</li>
</ol>
The CSS looks like this:
ol.tags {
list-style: decimal none outside;
}
ol.tags li {
background: transparent url(../images/tag.jpg) no-repeat;
height: 80px;
margin: 0px 0px 0px 0px;
padding: 16px 0px 0px 60px;
}
And the result looks like this:
http://gumpshen.com/images/temp/Gumpshen_OL.png
I want to have the numbers appear cenetered inside the white "tabs", can anyone help please?
Hey Burt, what Sortiris is pointing out is where your order list has a kind of running repeating background see an good explanation here : http://codeasily.com/css/style-ordered-list
I have tried to do what you are talking about but I fear it may not be possible, without custom numbers or markers.
You are on the right track however but I would make the ol list style inside, then you still have to figure out a way to push the order list number away from the list content.
It looks like you will want to add your own counter to your list.
you can use the
background: transparent url(../images/tag.jpg) no-repeat; for ol.tags, not for ol.tags li
One option might be to make your white square image larger, so it's as tall as the height you want your li's to be. Then make it the background of the ol instead of the li, and make it repeat in the y-direction.
Another option would be to switch the ol to have a style of inside as mentioned before, and then stick a span inside your li with some padding-left to position it where you want.
Edit: by making the white square image larger, I mean adding transparent "padding", or something that matches the background of the page. So the image has larger dimensions, but the white area remains the same.
Sorted it here is what I done:
First I added a span tag around the content:
<ol class="main tags">
<li class="main"><span>Gumpshen was founded by Brendan Rice who has over 10 years experience in web development.</span></li>
<li><span>We are web design & development studio who are passionate about what we do.</span></li>
<li><span>We are based in Belfast, Northern Ireland and but don't let that put you off if you are not from Northern Ireland we would still love to help.</span></li>
</ol>
The I was moved the decimals to inside as suggested by joelt (thanks Joe) and was finally able to shift stuff around using minus margins on the span tags:
ol.tags {
list-style: decimal none inside;
}
ol.tags li {
background: transparent url(../images/tag.jpg) no-repeat;
height: 80px;
margin: 0px 0px 0px 0px;
padding: 26px 0px 0px 20px;
}
ol.tags li span {
margin: -24px 0px 0px 50px;
display: block;
}
Heres a screenshot to make it clear. I'm trying to figure out a robust way of making the bullet images vertically aligned to my li content. As you can see my content is currently too high.
Many thanks 'over-flowers'...
http://dl.getdropbox.com/u/240752/list-example.gif
Well, some css code to see how you currently set your bullet images would be useful ;-)
Instead of actually setting the 'list-style-image' property, I've had far more consistent results with setting a background-image property for the li element. You can then control the positioning with pixel accuracy. Remember to set a suitable left-padding value to push your list item contents clear of the bullet image.
I like #bryn's answer.
One example I've used successfully:
#content ul li {
margin: 3px -20px 3px 20px;
padding: 0 0 0 0;
list-style: none;
background: url(newbullet.gif) no-repeat 0 3px;
}
The negative right margin may or may not be needed in your case.
You may need to adjust to meet your specific needs depending on your image. (My image is 14 x 15.)
You must specifically set margins and padding if you want a similar look across browsers as Firefox and IE use different defaults for displaying bullets.
You can use something like this in your css...
#content li{
list-style-image: url(../images/bullet.gif);
}
use background-image, for your li elements, add padding.
.box li{
padding-left: 20px;
background-image: url("img/list_icon.jpg");
background-repeat: no-repeat;
background-position: 0px 2px;
margin-top: 6px;
}