I have the following list on my html file: I need to know how I can make the Headings: The Road To War; Politicians and Generals; The Course of war; and Afermath in Upper-Roman and the subheadings under each one in Upper-Alpha, within my css file.
<nav class="vertical">
<h4>Course Outline</h4>
<ol>
<li>The Road to War
<ol>
<li>Planting the Seeds</li>
<li>The First Crisis</li>
<li>Compromise & Failure</li>
<li>Fault Lines</li>
</ol>
</li>
<li>Politicians & Generals
<ol>
<li>Politicians</li>
<li>Generals</li>
</ol>
</li>
<li>The Course of War
<ol>
<li>1861-1862</li>
<li>1863</li>
<li>1864-1865</li>
</ol>
</li>
<li>Aftermath
<ol>
<li>Lincoln Assassination</li>
<li>Reconstruction</li>
<li>A New Constitution</li>
<li>The United States Is ...</li>
</ol>
</li>
</ol>
</nav>
Add a class to the ol you want to make it Upper-alpha for example <ol class="alpha"> and then in css:
.alpha {
list-style-type: upper-alpha;
}
Give each of them classes and do like this
for upper roman
ol{
list-style-type: upper-roman;
}
for upper alpha
ol{
list-style-type: upper-alpha;
}
Related
I have problem with css styling of my Ordered List.
I have my HTML code:
ol {
counter-reset: item
}
li {
display: block
}
li:before {
content: counters(item, ".")" ";
counter-increment: item
}
<ol>
<li class="sub">one</li>
<li class="">two
<ol>
<li class="small">two.one</li>
<li class="small">two.two</li>
<li class="small">two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>
And I need to hide number value from 1 one, 2 two, 3 three and 4 four
Someone has idea, how to do that, please?
You can mimick the behavior you are looking for by setting the font-size to 0px and this would make the element be counted by the counter property while hiding it.
.hide {
font-size: 0px;
}
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li class="hide">two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
<li class="hide">three.three</li>
<li>three.four</li>
</ol>
</li>
<li>four</li>
</ol>
Source: CSS counter on hidden submenu
I am looking to create an alphabetized numbered list (which is fairly easy), however I am looking to add a break in the numbers for a place to add the letters (A, B, C, etc) however keep the chronology of the numbers.
I know that I could do the numbering myself and have no issue, however I want the numbers to automatically adjust as I add items. Hopefully someone can tell me how to do this in HTML.
Essentially this is what I would like it to look like:
A
Air Force One
Aladdin
Amazing Spider-Man
B
Back to the Future
Batman Returns
Beverly Hills Cop
C
Club Paradise
You can use the start attribute of the ol tag, like this:
<h2>A</h2>
<ol>
<li>Air Force One</li>
<li>Aladdin</li>
<li>Amazing Spider-Man</li>
</ol>
<h2>B</h2>
<ol start="4">
<li>Back to the Future</li>
<li>Batman Returns</li>
<li>Beverly Hills Cop</li>
</ol>
<h2>C</h2>
<ol start="7">
<li>Club Paradise</li>
</ol>
following code should do the trick without JS:
ol.start {
counter-reset: mycounter;
}
ol.start li, ol.continue li {
list-style: none;
}
ol.start li:before, ol.continue li:before {
content: counter(mycounter) ") ";
counter-increment: mycounter;
position:relative;
text-align: right;
width:25px;
display:block;
float:left;
left:-30px;
}
<ol type="A">
<li></li>
<ol class='start'>
<li>2nd line</li>
<li>2nd line</li>
<li>2nd line</li>
<li>2nd line</li>
</ol>
<li></li>
<ol class='continue'>
<li>2nd line</li>
<li>2nd line</li>
<li>2nd line</li>
</ol>
<li></li>
<ol class='continue'>
<li>2nd line</li>
<li>2nd line</li>
<li>2nd line</li>
</ol>
</ol>
Try this
var entityAlpha = 65;
$('li').each(function(i,e){
if(i%3 === 0){
$(this).css('position', 'relative');
$(this).append('<span class="alpha">&#'+entityAlpha+';</span>');
entityAlpha = entityAlpha+1;
}
});
/* Put your css in here */
ol li:nth-child(3n){
margin-bottom:40px;
}
.alpha{
left:-25px;
top:-30px;
position:absolute;
font-weight: bold;
}
ol{
margin-top:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<ol>
<li> Air Force One</li>
<li>Aladdin</li>
<li>Amazing Spider-Man</li>
<li>Back to the Future</li>
<li>Batman Returns</li>
<li>Beverly Hills Cop</li>
<li>Club Paradise</li>
</ol>
I am implementing style for hyperlink (a and a:hover) but the browser consider the first "a style) only and completely ignore the "a:hover) style, and it works fine when I remove the "a style". I don't know why it has conflict, as I am doing the same thing explained on websites and books.
Here is my HTML code:
<nav class="vertical">
<h4>Course Outline</h4>
<ol>
<li>The Course of War
<ol>
<li>1861-1862</li>
<li>1863</li>
<li>1864-1865</li>
</ol>
</li>
<li>Aftermath
<ol>
<li>Lincoln Assassination</li>
<li>Reconstruction</li>
<li>A New Constitution</li>
<li>The United States Is ...</li>
</ol>
</li>
</ol>
</nav>
And here is the CSS
nav.vertical a:hover {
text-decoration:uderline;
color: hsla(212%,100%,29%,1);
}
nav.vertical a {
color: hsla(212%,100%,29%,0.6);
text-decoration:none;
}
I went through all the posts regarding this issue here, but still couldn't fix it.
hsla(212%,100%,29%,1);
should be
hsla(212,100%,29%,1); /* h = HUE and it's a 0-360 degrees value (not %) */
also
uderline
should be
underline
nav.vertical a:hover {
text-decoration:underline;
color: hsla(212,100%,29%,1);
}
nav.vertical a {
color: hsla(212,100%,29%,0.6);
text-decoration:none;
}
<nav class="vertical">
<h4>Course Outline</h4>
<ol>
<li>The Course of War
<ol>
<li>1861-1862</li>
<li>1863</li>
<li>1864-1865</li>
</ol>
</li>
<li>Aftermath
<ol>
<li>Lincoln Assassination</li>
<li>Reconstruction</li>
<li>A New Constitution</li>
<li>The United States Is ...</li>
</ol>
</li>
</ol>
</nav>
I am trying to use HTML to:
Create 2 Ordered Lists
Within Each of the O.L. nest a Unordered List and add some elements inside
However, my numbering isn't working the way it should, I'm getting, 1. 1. rather than 1. 2. etc.
My code:
<ol>
<li>Fruits</li>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Plum</li>
<li>Watermelon</li>
</ul>
</ol>
<ol>
<li>Vegetables</li>
<ul>
<li>Carrots</li>
<li>Lettuce</li>
<li>Cucumber</li>
<li>Tomato</li>
</ul>
</ol>
Sounds like you actually want 1 ordered list, not 2. If you expect the first one to have the number 1 and and the second one to have the number 2, that's one list. The numbers will reset if you start a new list.
<ol>
<li>Fruits
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Plum</li>
<li>Watermelon</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Lettuce</li>
<li>Cucumber</li>
<li>Tomato</li>
</ul>
</li>
</ol>
Not sure why everyone's answering against the docs, officially, you CANNOT nest <ul> element as a direct child to <ol> element and vice versa, so I've modified the markup accordingly.
Demo
<ol>
<li>
<h2>Fruits</h2>
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
</li>
<li>
<h2>Vegetables</h2>
<ul>
<li>Carrot</li>
</ul>
</li>
</ol>
Here, you can adjust the padding and margin of the unordered lists as required by you but I just gave a general idea of how it should be.
You can also use <p> or any other tag at the place of <h2> but I think <h2> or <h3> should fit well for your case.
You're ending the ordered list after the first line. Don't put the tag in untill the end of the entire ordered list. Example below.
<ol>
<li>Fruits</li>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Plum</li>
<li>Watermelon</li>
</ul>
<li>Vegetables</li>
<ul>
<li>Carrots</li>
<li>Lettuce</li>
<li>Cucumber</li>
<li>Tomato</li>
</ul>
</ol>
Maybe you don't use the list-style-property but the counter-increment-property instead so your HTML stays as it is.
ol {
counter-increment: section;
}
ol > li {
list-style-type: none;
}
ol > li:before {
content: counter(section)". ";
}
<ol>
<li>Fruits</li>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Plum</li>
<li>Watermelon</li>
</ul>
</ol>
<ol>
<li>Vegetables</li>
<ul>
<li>Carrots</li>
<li>Lettuce</li>
<li>Cucumber</li>
<li>Tomato</li>
</ul>
</ol>
I'm struggling with this, I'd like my first li to have a round bullet and then the nested li's to have an indented square bullet. My CSS trying to do this is below, default styling of my page is not putting any bullets in place.
Can someone help?
<ul>
<li>Simplification of a complex purchase category
<ul>
<li>Meet local regulatory compliance </li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li>
</ul>
CSS
ul:first-child {
list-style-type:circle;
}
li:first-child {
list-style-type:square;
}
li:nth-child(2) {
list-style-type:square;
}
try this:
li {
list-style-type:circle;
}
li li {
list-style-type:square;
}
you could use classes on your tags to set the list-style-type.
HTML
<ul class="round">
<li>Simplification of a complex purchase category
<ul class="square">
<li>Meet local regulatory compliance </li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li>
</ul>
CSS:
.round {
list-style-type:bullet;
}
.square {
list-style-type:square;
}
http://jsfiddle.net/8H9JA/