I'm new to CSS and working with list. I tried using one of the code I saw on w3schools which shows how to indent lists:
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
My css is overriding it so it all apears on the same vertical line. Is there any CSS code I could use locally on the list to override the main css file? Any help would be appreciated.
Yes, simply use something like:
ul {
padding-left: 10px;
}
And it will bump each successive ul by 10 pixels.
Working jsFiddle
It sounds like some of your styles are being reset.
By default in most browsers, uls and ols have margin and padding added to them.
You can override this (and many do) by adding a line to your css like so
ul, ol { //THERE MAY BE OTHER ELEMENTS IN THE LIST
margin:0;
padding:0;
}
In this case, you would remove the element from this list or add a margin/padding back, like so
ul{
margin:1em;
}
Example: http://jsfiddle.net/jasongennaro/vbMbQ/1/
I solved the same problem by adding text-indent to the nested list.
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul id="list2">
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
#list2
{
text-indent:50px;
}
Normally, all lists are being displayed vertically anyways. So do you want to display it horizontally?
Anyways, you asked to override the main css file and set some css locally. You cannot do it inside <ul> with style="", that it would apply on the children (<li>).
Closest thing to locally manipulating your list would be:
<style>
li {display: inline-block;}
</style>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
You can use [Adjacent sibling combinators] as described in the W3 CSS Selectors Recommendation1
So you can use a + sign (or even a ~ tilde) apply a padding to the nested ul tag, as you described in your question and you'll get the result you need.
I also think what you want it to override the main css, locally.
You can do this:
<style>
li+ul {padding-left: 20px;}
</style>
This way the inner ul will be nested including the bullets of the li elements.
I wish this was helpful! =)
You can also use html to override the css locally. I was having a similar issue and this worked for me:
<html>
<body>
<h4>A nested List:</h4>
<ul style="PADDING-LEFT: 12px">
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
li {
padding-left: 30px;
}
<p>Some text to show left edge of container.<p>
<ul>
<li>List item</li>
</ul>
The above will add 30px of space between the bullet or number and your text.
li {
margin-left: 30px;
}
<p>Some text to show left edge of container.<p>
<ul>
<li>List item</li>
</ul>
The above will add 30px of space between the bullet or number and the left edge of the container.
Related
This question already has answers here:
when to use UL or OL in html?
(12 answers)
Closed 1 year ago.
Sharing a sample snippet. Visually both <ul> and <ol> will look same. Then why do we need <ul> separately?
<head>
<title>Change Numbering Type in an HTML Unordered List Using CSS</title>
<style>
ol {
list-style-type: disc;
}
</style>
</head>
<body>
<ol>
<li>Fasten your seatbelt</li>
<li>Starts the car's engine</li>
<li>Look around and go</li>
</ol>
<hr/>
<ul>
<li>Fasten your seatbelt</li>
<li>Starts the car's engine</li>
<li>Look around and go</li>
</ul>
</body>
</html>
Semantically, ul is an unordered list and ol is an ordered list. Unless the style has been overridden, ul should give you bullets and ol should give you numbers.
There are accessibility benefits too for certain assistive technologies when the order of the items matter for the user to interpret them correctly.
Yes, we can change the visual representation of an ordered list using some CSS, as you noted. We can do the same with ul, and make it show decimals. ul { list-style: decimal; }
Ordered and unordered lists are rendered in an identical manner except that visual user agents number ordered list items by default. Sure, we can change the way they appear. However, the semantic meaning expressed by the choice of a list type cannot be changed with CSS.
Assistive technologies include inconsistent support for various uses of the type attribute used to indicate numbering and bullet styles, so for accessibility purposes. Some assistive technologies allow users to navigate from list to list or item to item. Style sheets can be used to change the presentation of the lists while preserving their integrity.
ol { list-style: disc; }
ul { list-style: decimal; }
<ol>
<li>Fasten your seatbelt</li>
<li>Starts the car's engine</li>
<li>Look around and go</li>
</ol>
<hr/>
<ul>
<li>Fasten your seatbelt</li>
<li>Starts the car's engine</li>
<li>Look around and go</li>
</ul>
That's a good question. Yes, if we add list-style-type: disc; both will looks same. But some beginners doesn't know that. So they will use UL at that place.
Actually you can use list-style-type: to add different kinds in it.
ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ol.roman {list-style-type: upper-roman;}
ol.alpha {list-style-type: lower-alpha;}
<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="square">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ol class="roman">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="alpha">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
You can use anything that you want for your need.
By default <ul> and <ol> tags as their own list-style-type, when you style it doesn't matter if you are using <ul> or <ol> tag, even you can make <ol> tag as an alphactical or a numerical by their respective styles,
In conclusion when you decide to style them, it really doesn't matter which tag you choose.
I have an html list like this:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
How can I hide a li item and make it not occupy any space? Let's say, I need the first li item (coffee) to be invisible, so the result will contain only Tea and Milk. I used css (or style="visibility: hidden"), but it still occupies some space.
=======
Note: the first li is just some template used to create the other li items. The template li is generated during the run time, and that's why I need to hide it. I remove it eventually after generating the other li items (Tea and Milk), but before I generate Tea and Milk, Coffee is still visible.
============
Thanks. Answer is style="display:none"
Create a class and apply it to elements which you wish to hide. You can do it when you generate markup or add the class to each element using a selector, like jquery
.hide{
display:none;
}
<ul>
<li class="hide">Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
In css you want (or some similar selector)
ul > li:first { display: none; }
Or if you prefer directly placing the css definition on the element itself
<ul>
<li style="display:none;">Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Another common practice is to simply create a style applied by a class if you wish to apply this style
<style> .nodisplay { display: none; } </style>
<ul>
<li class="nodisplay">Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Using display:none; will remove the element from the flow of the page, and as a result there will be no blank space as can occur when using visibility: hidden;
"Turns off the display of an element (it has no effect on layout); all descendant elements also have their display turned off. The document is rendered as though the element did not exist.
To render an element box's dimensions, yet have its contents be invisible, see the visibility property." display: none MDN
Use display:none; instead.
That makes the element disappear and not take up any space.
You could style it.
...
<li style="display:none;">
....
That should hide the element
Just write this:
<ul class="groceries">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
.groceries {
list-style: none;
}
There are two ways you can achieve this. The first one is to use CSS display property :
Sample.html
<ul>
<li class="list-hidden-item">Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Sample.css
.list-hidden-item { display: none; }
Another is to use HTML5 attribute hidden
Sample.html
<ul>
<li hidden>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul>
<li>This
<li>and this</li>
</li>
</ul>
I try to select the second <li> by doing:
li li {
background: "red";
}
Why doesn't it work?
You are missing one ul... And the document is not valid HTML5. Try this one (this is a proper way of nesting lists):
<ul>
<li>This
<ul>
<li>and this</li>
</ul>
</li>
</ul>
Then in CSS:
ul li ul li {
background: "red";
}
More to read here: Proper way to make HTML nested list?
Best regards, hope it helps!
I'm puzzled by this. In a nested list, by setting the height of LI elements the list, the items overlap. What is the explanation for this, and what is the proper way apply height without overlap effect? (I want height, not padding or margins.)
.aaa {background:#ccf;}
.bbb {background:#fcc;}
.bbb li {height:25px;}
<ul class="aaa">
<li>one one one</li>
<li>two, too
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
<li>three</li>
<li>here comes four</li>
</ul>
<ul class="bbb">
<li>one one one</li>
<li>two, too
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
<li>three</li>
<li>here comes four</li>
</ul>
<li>two, too
<ul> <-- this list is part of your LI
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
Since you have a list nested in a list, the inner list overflows because it is bigger than 25px.
Use min-height instead of height.
The second tier li is inheriting the CSS from the top tier li
You need come CSS like
ul li ul li {/*style to hit the bottom tier*/}
This looks like you are making a menu - Tuts like this (http://www.devinrolsen.com/pure-css-vertical-menu/) could advise you for better code but Padding and margin are recognised techniques to achieve what you apparently want
What is the proper way to provide a semantic caption for an HTML list? For example, the following list has a "title"/"caption".
Fruit
Apple
Pear
Orange
How should the word "fruit" be handled, in a such way that it is semantically associated with the list itself?
While there is no caption or heading element structuring your markup effectively can have the same effect. Here are some suggestions:
Nested List
<ul>
<li>
Fruit
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Organge</li>
</ul>
</li>
</ul>
Heading Prior to List
<hX>Fruit</hX>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
Definition List
<dl>
<dt>Fruit</dt>
<dd>Apple</dd>
<dd>Pear</dd>
<dd>Orange</dd>
</dl>
Option 1
HTML5 has the figure and figcaption elements, which I find work quite nicely.
Example:
<figure>
<figcaption>Fruit</figcaption>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
</figure>
These are then easily styled with CSS.
Option 2
Using CSS3's ::before pseudo-element can be a nice solution:
HTML:
<ul title="Fruit">
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
CSS:
ul[title]::before {
content: attr(title);
/* then add some nice styling as needed, eg: */
display: block;
font-weight: bold;
padding: 4px;
}
You can, of course, use a different selector than ul[title]; for example, you could add a 'title-as-header' class and use ul.title-as-header::before instead, or whatever you need.
This does have the side effect of giving you a tooltip for the whole list. If you don't want such a tooltip, you could use a data attribute instead (e.g., <ul data-title="fruit"> and ul[data-title]::before { content: attr(data-title); }).
As far as I know, there are no provisions in current HTML specs for providing a caption for a list, as there are with tables. I'd stay with using either a classed paragraph, or a header tag for now.
<h3>Fruit</h3>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
In the future, when HTML5 gains wider adoption, you will be able to use the <legend> and <figure> tags to accomplish this slightly more semantically.
See this post on the W3C mailing list for more information.
To ensure screen readers connect the list to an associated heading, you could use aria-labelledby connected to a heading with an id like so:
<h3 id="fruit-id">Fruit</h3>
<ul aria-labelledby="fruit-id">
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
As noted in a previous answer, make sure your heading level follows heading order in your document.
There is no caption-like tag for a list like a table has. So I'd just give it an <Hx> (x depending on your previously used headers).
I know this is old but wanted to add the answer that I found for future people:
https://www.w3.org/MarkUp/html3/listheader.html
use the <lh> element:
<ul>
<lh>Types of fruit:</lh>
<li>Apple</li>
<li>Orange</li>
<li>Grape</li>
</ul>
<ul>
<p>YOUR CAPTION</p>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
It works. But i'm not sure that is the best way, i'm just a beginner
Since I was trying to find a solution with older browser support, I have what might be an over-simplified solution. Using table display styles and ids/classes:
<ul>
<li id="listCaption">My List</li>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
Then apply the display: table-row; style to the element in CSS:
li#listCaption {
display: table-row;
font-size: larger;
text-decoration: underline; }
This works much better if you are using a description list, which is what I was doing when I had the same question. In that case, you can use <div> in the HTML and display: table-caption; in CSS, as div elements are supported within the dl list:
<dl>
<div id="caption">Table Caption</div>
<dt>term</dt>
<dd>definition</dd>
</dl>
In CSS you can apply various styles to the caption:
#caption {
display: table-caption;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
background: transparent;
caption-side: top;
text-align: center; }
I should note that table-caption does not work as well in ul/ol as it is treated as a block element and the text will be aligned vertically, which you probably don't want.
I tested this in both Firefox and Chrome.
You can always use <label/> to associate label to your list element:
<div>
<label for="list-2">TEST</label>
<ul id="list-1">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<label for="list-2">TEST</label>
<ol id="list-2">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>