I am trying to organize a gallery using figures, but I keep getting this annoying dot or bullet next to them. Are there any solutions like "list-style-type:none" for figures?
Thanks
(had to post a link to picture because I'm not allowed yet)
I suspect that your images are contained in a list and you need to change the list style to none for the relevant list.
Do this
body ul {
list-style: none;
}
This would apply a none list style for all the lists under the Body element.
Related
I have a text that has twor unordered lists.
The fist needs to have tickmars, while the second just bullets.
The text is supposed to be sent via email so I must not use any css links as I am not sure that the recipients have access to them.
I need to create two lists one with tickmarks and one with bullet.
So, now I want another list that is has bullets.
How can I do that?
I want two lists, one with tickmarks and one with bullets
If you don't want to use css links, you could include your css inside html with style tag:
.custom-ul {
list-style: none;
}
.custom-ul > li:before {
content: '\2714\0020';
margin-left: -1em;
}
Then apply class .custom-ul to your first list. You can try tickmarks with codes \2713, \2714, \2611.
Codepen
I am working on a website. In the header bar, I have included some contact information.
For some reason the first field (name field with my address in it) has a bullet before it. On Chrome, this displays before the address, on IE and Edge it displays to the left of the main content area in the blue. I cannot figure out how to eliminate this.
You can use
ul {
list-style: none;
}
for that. list-style: none removes all list stylings.
Also maybe check if your markup is valid. maybe there is a missing, closing tag
I have a list of items display as a list with the css attribute list-style-type: disc;.
Just below the list, I have a last item which is add separatly but I wan't it to be displayed just as if it would be part of the list.
So I am looking for a way a display this disc bullet via CSS with something like the background attribute for instance.
I kow I could add an image but I am trying to find another way to add the bullet just to be sure that all my bullet look alike.
You can see what I mean here
Any idea?
P.S: I have no way of adding this last item to the list so I have to find a workaround to display this bullet only via CSS.
Try to create a css style for separate in wich you can writte this :
separate { padding-left:30px; height:20px; background-image:url(yourpath/smal-image-circle.png); background-repeat:no-repeat; background-position:top left;}
Note that the image in background in your div should have a small size
Thanks. Oscar Nsarhaza
I want to change the subnavs on this code but everytime I try it takes the parent element (the background image from above.
I would have thought adding the following code would get rid of the background image for the subnavs but it doesn't.
ul.subnav li {
background-color:000;
}
What I want is to do some basic css for the subnavs with the names of each link. Nothing fancy.
Heres a link to the fiddle
http://jsfiddle.net/mitchelll182/t7QQ8/1/
Ok, so I see you're doing a CSS only menu, but that involves putting classes on everything and it ends up being a huge code mess. I think a better way would be to use jQuery. Something like this: http://jsfiddle.net/ewB9b/
See how the HTML code is nice and clean? Just nested UL's with one class. Now in the CSS, you can easily style the main links differently from the drop-downs. Read the comments in the CSS to see what's what.
.
Try:
ul.subnav li {
background-image: none;
background-color:000;
}
I have css like this:
.done {list-style-image:url('images/tick.gif')}
.notdone {list-style-image:url('images/cross.gif')}
And html like this:
<ul>
<li class="done">Done</li>
<li class="notdone">Not Done</li>
</ul>
Works great on IE6 and FF. Each li item has a different image for the bullet. But all of the docs I see on list-style-image says it should be applied to to the ul tag.
Is there a proper or standards-based way of doing what I am trying to do, or is this it?
EDIT: http://www.w3.org/TR/CSS21/generate.html
It looks like it doesn't say that I CAN'T use list-style-image on an li tag, but the examples don't show that.
I believe docs you are referring to is when you want the bullets to follow a certain format, which is why the class is applied at the parent tag
<ul>
in those cases. Since you have two images that each you want to have its own bullet I see nothing wrong with what you are doing
The CSS 2.1 standard gives examples where list-style is applied directly to an li.
Although authors may specify 'list-style' information directly on list item elements (e.g., "li" in HTML), they should do so with care.
Followed by:
ol.alpha li { list-style: lower-alpha } /* Any "li" descendant of an "ol" */
ol.alpha > li { list-style: lower-alpha } /* Any "li" child of an "ol" */
So I would draw the conclusion that it is OK to apply list-style-type or list-style-image to list items directly, as long as you are careful and understand the cascade of your CSS rule.
Following up to your edit...
If you look at the default style sheet for CSS, you will see that li is defined as follows:
li { display: list-item }
In the link you provided, list-style-image is valid on any element with display: list-item. Therefore, according to the standard, what you are doing is valid.
I've run into inconsistencies when it comes to the spacing of a list-image from browser to browser. As a result, I would usually skip the whole issue, and do something like this instead:
li {list-style: none; padding-left: 15px;}
li.done {background: url(images/tick.gif) no-repeat left top;}
li.notdone {background: url(images/cross.gif) no-repeat left top;}
The end result is a bullet using the same images you intended in the first place, but you have much more control over the actual placement and spacing. Tweaking needed probably, but that's the general idea.
I don't see a problem with what you are doing. What docs are you talking about?
In theory all entries in a list have the same bullet style. Those lists are historically found in things like outlines where at any level you have 1,2,3 or A,B,C and it would make no sense to mix the different ordinal types with one another. I don't think there's anything wrong with doing what you are doing stylistically. But I don't know if it is correct CSS.