issue with numbering how can i fix the numbering? - css

I have the next issue when I try to numbering the list
.contenido ol {
padding-left: 0px;
counter-reset: item;
}
.contenido ol > li {
display: block;
}
.contenido ol > li::before {
content: counters(item, ". ") " " ;
counter-increment: item;
}
.contenido ol ol > li {
display: block;
}
.contenido ol ol > li::before {
content: counters(item, ". ") ". " ;
}
and the html I have:
<div id="test">
<ol>
<li> item1</li>
<li> item2
<ol>
<li>item 2.1</li>
<li>item 2.2
<ol>
<li>item a</li>
<li>item b</li>
<li>item c </li>
</ol>
</li>
<li>item 2.3</li>
</ol>
<li>item 3</li>
<ol>
</div>
In the page showed:
1. item1
2. item2
1. item 2.1 --- in this part I want to show as 2.1
2. item 2.2 --- in this part I want to show as 2.2
a. item a
b. item b
c. item c
3. item 2.3 --- in this part I want to show as 2.3
3. item 3


Your code seems fine with me. Its rendering by my browser showed your wishes.
If you perchange want to omit the a/b/c-items from the numbering, you can try to be more specific:
CSS:
ol {
counter-reset: section;
list-style-type: none;
}
#contentar>ol>li::before,
#contentar>ol>li>ol>li::before{
counter-increment: section;
content: counters(section,".") " ";
}
HTML:
<div id="contentar">
<ol>
<li> item1</li>
<li> item2
<ol>
<li>item 2.1</li>
<li>item 2.2
<ol>
<li>item a</li>
<li>item b</li>
<li>item c </li>
</ol>
</li>
<li>item 2.3</li>
</ol>
</li>
<li>item 3</li>
</ol>
</div>

Related

Is there a difference between these two CSS selectors?

Would the following CSS selectors select the same elements?
ul > li[class="a"] { }
vs
ul > li.a

Would the following CSS selectors select the same elements?
No they don't. Notice how in the below example the last element isn't selected by ul>li[class="a"] because that selector will select element having only a as a class.
ul>li.a {
color: red;
}
ul>li[class="a"] {
font-size: 30px;;
}
<ul>
<li class="a">Item 1</li>
<li>Item 2</li>
<li class="a b">Item 3</li>
</ul>
Even whitespace count:
ul>li.a {
color: red;
}
ul>li[class="a"] {
font-size: 30px;;
}
<ul>
<li class="a">Item 1</li>
<li>Item 2</li>
<li class="a b">Item 3</li>
<li class="a ">Item 3</li>
</ul>

Both selectors work the same:
#one ul>li.a {
color: red;
}
#two ul>li[class="a"] {
color: orange;
}
<div id="one">
<ul>
<li class="a">Item 1</li>
<li>Item 2</li>
<li class="a">Item 3</li>
</ul>
</div>
<div id="two">
<ul>
<li class="a">Item 1</li>
<li>Item 2</li>
<li class="a">Item 3</li>
</ul>
</div>

I want to stack up the list items using the display as block but rather it would hide behind one another

I am trying to make a mega drop down menu. I just want to second list items to stack up like a simple list but they hide behind one another. I don't know where I am make the mistake.
nav div .main-ul li{
display: inline-block;
}
.sub-ul li{
display: block;
position: absolute;
}
<div>
<ul class="main-ul">
<li>Item 1
<ul class="sub-ul">
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
</div>
Just stack up the sub menu item with css.

Please try this.
<div>
<ul class="main-ul">
<li>Item 1
<ul class="sub-ul">
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
CSS
div .main-ul li {
display: inline-block;
position: relative;
border: 1px solid red;
}
div .main-ul li > .sub-ul {
display: none;
position: absolute;
top: 20px;
left: -1px;
padding: 0;
}
div .main-ul li:hover > .sub-ul {
display: block;
}
div .main-ul li > .sub-ul > li {
white-space: nowrap;
}
JsFiddle

Custom list style for ordered lists

Is it possible to define a style for an ordered list that renders something like
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
as
(1) Item 1
(2) Item 2
(3) Item 3

You can use css counter and :before pseudo-element to create this type of list.
ol {
counter-reset: custom;
list-style-type: none;
}
ol li:before {
content: '('counter(custom)') ';
counter-increment: custom;
}
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

<ol> list type not displaying when using CSS3 multi-column layout

I'm using the CSS3 multi-column layout for an ordered list, but the list-numbers for the individual list-items's aren't being displayed in the second column.
Here's the JSFiddle.
Sample code is below.
HTML
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ol>
And CSS:
ol {
-moz-column-count 2;
-webkit-column-count: 2;
column-count: 2;
}

That's because the default padding on the ol allows for the numbers to be displayed. By default, they are displayed on the outside of the element, and since the second column doesn't have an padding, they aren't displayed.
You could position them on the inside by adding list-style-position: inside:
ol {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
list-style-position: inside;
}
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ol>
Alternatively, you could also use CSS3 counters and displaying the number on the li element using a pseudo element:
Example Here
ol {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
list-style: none;
padding-left: 0;
}
ol {
counter-reset: list;
}
li:before {
counter-increment: list;
content: counter(list) ". ";
}
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ol>

Position nested list next to parent list with CSS

i have got a nested list, which is positioned under the parent list:
<ul>
<li> Item 1 </li>
<ul>
<li> Subitem 1 </li>
<li> Subitem 2 </li>
<li> Subitem 3 </li>
</ul>
</ul>
Is there any way to style them with css so that the nested list is right and centered to the parent list? The result should look like this:
- Subitem 1
Item 1 - Subitem 2
- Subitem 3
Best regards

You can try a tabular approach:
.list {
display: table;
}
.list > li, .list > ul {
display: table-cell;
vertical-align: middle;
}
<ul class="list">
<li>Item 1</li>
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</ul>
However, note that the HTML above is invalid, because the inner ul should be a child of li.
With a correct layout, I would use an inline-block approach:
.list > li > ul {
display: inline-block;
vertical-align: middle;
}
<ul class="list">
<li>Item 1
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</li>
</ul>

Resources