I'm working on a website where the default CSS specifies:
ul li {
list-style: none;
}
This is necessary to keep the navigation bar clean (which is coded as an unordered list, basically) ...
Now, in the body of text on a particular page, I want to add a standard unordered list. So in a separate CSS sheet that exists for customizations, I added:
ul.about-page {
list-style-type: circle;
}
And then on the page where I want the unordered list, I added this to the HTML:
<ul class="about-page">
<li>Some text</li>
</ul>
I also tried some variations of the above, but in all cases it wasn't working. Instead no bullets were showing up (though the text was indented as expected).
Note: the most complicated thing I tried was to add the following to the custom stylesheet:
ul.about-page li::before {
content: "\25E6";
color: black;
display: inline-block;
width: 1em;
margin-left: -0.9em;
font-weight: bold;
font-size: 1.1em;
}
And then on the page where I want the unordered list, I entered this HTML:
<ul class=“about-page”>
<li>Some text</li>
</ul>
I was hoping that this — or some similar version of it — would work. But it also does not.
I'm sure there must be a way to do this, but after spending at least an hour searching online and trying various things, I can't seem to figure it out.
Any advice will be much appreciated!
when you use class it is have More priority but when you use Address Model Selector like ul li it has more than priority of class then you must use this code
ul li {
list-style: none;
}
ul.about-page li {
list-style-type: circle;
}
<ul>
<li>Item 11</li>
<li>Item12</li>
<li>Item13</li>
</ul>
<ul class="about-page">
<li>Item 11</li>
<li>Item12</li>
<li>Item13</li>
</ul>
Related
I am trying to remove some bullets points, and replace them with ticks. I can make it work, but then my menu bar mess up. So I need to add a class to the <ul>, so it is not affecting anything else.
I tried to add a class, but still not working. Why?
Not working: Not working
Working but mess up my menu bar: Working
HTML:
<ul class="removeBulletAddTick">
<li class="removeBulletAddTick"> Test text 1</li>
<li class="removeBulletAddTick">Test text 2</li>
<li class="removeBulletAddTick">Test text 3</li>
</ul>
CSS:
ul removeBulletAddTick{
list-style: none;
}
ul li:before {
content: '✓';
}
Update
When I do your suggestion my menubar messed around:
Screenshot of menubar
As it turned out, the class selector wasn't declared correctly, it was missing the period (.) and should be .removeBulletAddTick.
The code below demonstrates this, you'll notice the class in question added to the list item rules as well for more specificity - this is to ensure that these rules will only apply to the list items you intend them to; which are those with the classes .removeBulletAddTick.
ul .removeBulletAddTick {
list-style: none;
}
ul li.removeBulletAddTick:before {
content: '✓';
}
Updated JSFiddle
You don't even need to declare that class on every list item. It would be better to declare it on the containing parent element, as follows:
ul.removeBulletAddTick {
list-style: none;
}
ul.removeBulletAddTick li:before {
content: '✓';
}
Code Snippet Demonstration:
ul.removeBulletAddTick {
list-style: none;
}
ul.removeBulletAddTick li:before {
content: '✓';
}
<ul class="removeBulletAddTick">
<li>Test text 1</li>
<li>Test text 2</li>
<li>Test text 3</li>
</ul>
ok, this problem has been with me for 2 weaks, and now i'm giving up and asking for help
what i need to do is make a new line in a unordered list inside of a div
this is what i'm aiming for
Home Contact Us Education
FAQ Stores Services
and with my currnet code i'm getting this
Home Contact Us Education
FAQ Stores Services
i have tried methods like float and center but nothing is working
please help me, i'm going to lost hair at this point....
thanks
Check this pen:
http://codepen.io/anon/pen/qabZqm
Basically it does this:
HTML
<ul>
<li>Home</li>
<li>Contact</li>
<li>Us</li>
<li>Education</li>
<li>FAQ</li>
<li>Stores</li>
<li>Services</li>
</ul>
CSS
li {
display: inline;
list-style: none;
}
li:nth-child(4):after {
content: "\A";
white-space: pre;
}
/* tag within the li for styling purposes */
li a {
display: inline-block;
margin: 10px;
}
with :nth-child(4) I add a pseudoelement that creates a break (\A).
The A Tag in the li is to add some styling (because of display inline the LIs cant be styled with margins etc...)... and I think thought this is a menu :-)
So I have some code that looks like:
<ul>
<li>
<ul>
<li> ... </li>
</ul>
</li>
</ul>
This has indented itself. I have no styling to indent this. According to the computed styling there is no margin-left, yet everything is actually indented, I guess this is the default behaviour of nested ul elements?
Regardless, on every nested ul, I have a class that is called comment-children I need to say only 5 down can indent (so .comment-children .comment-children .comment-children .comment-children .comment-children done, great) but at a width of 640px, all nesting must be turned off.
The part I am having the trouble with is that the ul elements are nested by default http://jsfiddle.net/d7az0jv3/
What do you want to do
Remove all default nesting and let me nest it my self via the class comment-children
At 640px remove all nesting.
Your example is insufficient to demonstrate what you want to do involving the class comment-children, but generally, to remove the indentation on lists across browsers, you should implement the rules
ul, li { margin-left: 0; padding-left: 0; }
Here's an updated jsfiddle
If you want to only nest elements up to a certain level, my recommendation would be to apply a class to the base ul that sets the indentation, and then add a rule that stops the indentation at a certain depth below that base class. Here is an updated version of your code with the nesting stopping at level 5.
HTML:
<ul class="comment">
<li>level one</li>
<li>
<ul>
<li>level two</li>
<li>
<ul>
<li>level three</li>
(etc., up to level seven)
CSS:
ul {
list-style:none;
}
ul, li { /* reset the margin and padding */
margin: 0;
padding: 0;
}
.comment ul {
/* 1 em margin for the UL elements under .comment */
margin-left: 1em;
}
.comment ul ul ul ul ul {
/* stop the nesting! */
margin-left: 0;
}
jsfiddle for this
Is it possible to style an unordered list so that the second line and the ones after that are indented the same as the first line of the list item?
Please see the example for exactly what I mean
O----First Line
--SECOND LINE SHOULD START HERE
--EVERY OTHER LINE SHOULD BE LIKE THIS ALSO
Just to supplement my comment, here is a jsfiddle demonstrating what I mentioned. http://jsfiddle.net/R5ptL/
<ul>
<li>Parent</li>
<ul>
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
<li>Parent2</li>
</ul>
And if you want them to be the same style...
ul, li {
list-style-type: circle; /* or whatever style you choose */
}
EDIT: How to do this with multiple unordered lists AND CSS only: http://jsfiddle.net/R5ptL/1/
use the css first-child selector to apply the indent to every line other than the first.
ex:
ul li:first-child{margin:0px;}
ul li{margin:5px;}
li:not(first-child) {
margin-left: 20px;
}
or
li {
margin-left: 20px;
}
li:first-child {
margin-left: 0;
}
It's like this: (HTML solution, not CSS)
<ul>
<li> first item </li>
<li> second item
<ul>
<li>first item of second list</li>
<li>second</li>
</ul>
</li>
<li> continue primary list </li>
</ul>
In short, you nest a complete new UL inside the primary UL.
My first answer was apparently incorrect after further testing. This should work though:
ul li {
text-indent:-10px;
margin-left:10px;
}
NOTE: This answer runs under the assumption that every line other than the first is simply wrapped text. If those other lines are meant to be sub-points, go with gwin003's answer.
i know this might seem straightforward, but i can't solve it, im trying to make the whole list item linkable, rather than just the word home
the html code:
<li class="current">Home</li>
p.s. when you hover the li, background color changes, so i want that whole list item to be hyperlinked, if you get what i mean, not just the word
Wrapping a block level element (the li) within an inline-element (a), is invalid mark-up, which has the potential to throw errors, depending on your doctype. That being the case, first change your mark-up around to:
<li>link text</li>
Assuming that your li is display: block then the following will cause the a to 'fill' the available space:
a {
display: block;
width: 100%; /* this may, or may not, be necessary */
}
If you're using this for a horizontal list, and the li are display: inline, then you can use the following:
a {
display: inline-block;
}
And style-to-taste.
Do it in reverse
<li class="current">Home</li>
not sure what your other styles are but you can change the tag with something like
li.current a{
display:block;
}
This should do it:
HTML:
<li class="current">Home</li>
CSS:
li a {
display: block;
}
// or
li.current a {
display: block;
}