I need to break down a project into a outline - I saw some "section" tabs for html5 but I could not get them to work. Is there another accepted format for statdardized outlines ? I just came up with this html on my own - there might be a better way to do it.
p.envelope {
border: 1px solid black;
padding: 5px 5px;
background-color: lightblue;
display: inline-block;
width: 700px;
/*display: inline ; */
}
<p class="envelope">
blah blah
</p>
<ol>
<li>Point One </li>
<ol style="list-style-type: lower-alpha;">
<li>Point One a</li>
<li>Point Two b </li>
<li>Point Three c </li>
</ol>
</li>
The proper way to nest lists within other lists, is to put the nested list within a parent list item.
<ol>
<li>Main Point One:
<ol style="list-style-type: lower-alpha;">
<li>Point One a</li>
<li>Point Two b </li>
<li>Point Three c </li>
</ol>
</li>
<li>Main Point Two</li>
</ol>
Related
I have to make all 5 types of ordered list in one line like whats shown in the picture here
<h2> Types of Ordered list</h2>
<ol Type="1">
<li>Black & Blue</li>
<li>The man from Toronto</li>
<li>Central Intelligence</li>
</ol>
<ol Type="a">
<li>September</li>
<li>October</li>
<li>November</li>
</ol>
<ol Type="A">
<li>Black</li>
<li>Red</li>
<li>Purple</li>
</ol>
<ol Type="i">
<li>Winter</li>
<li>Fall</li>
<li>Spring</li>
</ol>
<ol Type="I">
<li>Apple</li>
<li>Orange</li>
<li>Watermelon</li>
</ol>
ol, li{
list-style-position: inside;
color:whitesmoke;
font-size: 16px;
padding: 10px 5px 10px 5px;
}
If anyone have any idea on how to fix it please help me and thanks
All list elements can be wrapped in a single div, then aligned center using justify-content with the display set to flex.
.lists{
display: flex;
justify-content: center;
}
<h2> Types of Ordered list</h2>
<div class='lists'>
<ol Type="1">
<li>Black & Blue</li>
<li>The man from Toronto</li>
<li>Central Intelligence</li>
</ol>
<ol Type="a">
<li>September</li>
<li>October</li>
<li>November</li>
</ol>
<ol Type="A">
<li>Black</li>
<li>Red</li>
<li>Purple</li>
</ol>
<ol Type="i">
<li>Winter</li>
<li>Fall</li>
<li>Spring</li>
</ol>
<ol Type="I">
<li>Apple</li>
<li>Orange</li>
<li>Watermelon</li>
</ol>
</div>
I Want to select last Element of div.container <ul> inside last <li> with css.
The ul of nested will goes n level so please suggest to me if it possible with jquery also.
ul {
list-style: none;
margin: 0;
padding: 0;
}
<div class="container">
<ul>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>
<ul>
<li>Nested Item</li>
<li>Want to select list with css</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
view the image that i want to select with css
You can use some tricks to make it.
If you are looking for last element then you can use of :nth-last-child(n) selector, this matches on every element in the nth child and it doesn't look for type or its parent.
This is achieved as it counts from the last child.
.container ul li:nth-last-child(1)
{
color: red;
font-size:22px;
}
.container li li {
color: green;
font-size:12px;
}
Look at here:
MyFiddel
NOTE:
Due to some of the answers/comments left below (with which I agree), I feel this question is too vague, and does not explain sufficiently my problem. I was too hurried when I put it together, and this has caused the incorrect answers, for which I accept the fault. Due to the current answers and comments, I feel that even if I edited this question again, that future viewers would be confused by the answers/comments on the page, unless everyone were to update them as well. Because of this, i have created another question that completely clarifies my problem. Again, I apologize for the confusion I caused on this question.
The clarified question can be found here: Style an Ordered List like “X.X” based on list start attribute
I am working on updating a client website that contains a policy page. Within the policy are nine different sections, each with their own content. Inside each section are different section statements, which should have the numbering system of "x.x". However, this does not exist in basic HTML. In addition, some sections have various different forms of ordered lists inside themselves.
I have determined that I do not want to tackle this problem in a nested way, that is to say like this:
<ol>
<li>Section 1
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
</ol>
This is the way that every other answer I have looked at treats the problem. Rather, I wish to tackle it like this (code for below sample). I want a list that simply displays "x.1, x.2, x.3," where 'x' is dependent on the start number of that particular list.
<h2>Section 1</h2>
<strong>Heading 1</strong>
<ol class="specialList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<strong>Heading 2</strong
<ol type="lower-roman">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h2>Section 2</h2>
<ol class="specialList">
<li>
<ol type="upper-alpha">
<li>First subitem</li>
<li>Second subitem</li>
</ol>
</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h2>Section 3</h2>
<ol class="specialList">
<li>First item
<ol type="circle">
<li>First subitem</li>
<li>Second subitem</li>
</ol>
</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h2>Section 4</h2>
<ol class="specialList">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Section 1
Heading
1.1 First item
1.2 Second item
1.3 Third item
Heading 2
i. First item
ii. Second item
iii. Third item
Section 2
2.1 First item
A. First subitem
B. Second subitem
2.2 Second item
2.3 Third item
Section 3
3.1 First item
• First subitem
• Second subitem
3.2 Second item
3.3 Third item
Section 4
4.1 First item
4.2 Second item
4.3 Third item
This way, I can avoid using a nested ordered list, and hopefully simplify the matter, especially the necessary CSS. It will mean hardcoding some start value attributes in to each ordered list, but the policy sections will not change frequently, so this should not matter.
I do not wish to use JavaScript, as the client wants it to look this way regardless of the user's setup. The pages are JSP pages, so if there is a way to set it up to dynamically generate, that would be acceptable.
I have already looked at these links below. While they are excellent questions, none of them answer my specific question. The first deals with nested ordered lists, while I am dealing with a single ordered list. The second one has the right idea, but is still a bit different (has "x.x.x", while I only want "x.x").
Can Ordered List Produce Results that looks like 1.1?
Achieve sub numbering on ordered list
Please let me know if I need to clarify anything! Thanks!
Summary
In conclusion, the client wants a list that will start at "x.1" and go as far as necessary, where "x" is a given start value attribute for the specific list. I just clarified this matter with them, which is the reason for this "update" of requirements. Basically, I need a class that changes the numbering system of the top level of a list to the "x.x" format (again, where the first "x" is the starting value"). Any sublists (nested lists) will not follow this format, but will follow another format as specified by the "type" or "list-style" attribute.
Took a while to figure this one out!
here is my fiddle
h2.title {
font-size: 20px;
font-weight: 800;
margin-left: -20px;
padding: 12px;
counter-increment: ordem;
}
li.heading {
font-size: 16px;
font-weight: bold;
padding: 12px;
list-style-type: none;
}
.bullet {
counter-reset: bullet;
padding-left: 12px;
}
.bullet li {
list-style-type: none;
}
.bullet li:before {
counter-increment: bullet;
content: counter(ordem)"." counter(bullet)" ";
}
ol.none {
list-style: none!important
}
li.s2sub::before {
counter-increment: none!important;
content: none!important;
}
li.s2sub {
list-style: upper-alpha;
}
li.s3sub::before {
counter-increment: none!important;
content: none!important;
}
li.s3sub {
list-style-type: circle;
}
li.roman::before {
counter-increment: none!important;
content: none!important;
}
li.roman {
list-style: lower-roman inside;
}
<body>
<ol>
<h2 class="title">Section 1</h2>
<li class="heading">Heading 1</li>
<ol class="bullet">
<li>text 1 one</li>
<li>text 1 two</li>
<li>text 1 three</li>
<li>text 1 four</li>
</ol>
<li class="heading">Heading 2</li>
<ol class="bullet">
<li class="roman">Item 1</li>
<li class="roman">Item 2</li>
<li class="roman">Item 3</li>
</ol>
<h2 class="title">Section 2</h2>
<ol class="bullet">
<li>First item
<ol>
<li class="s2sub">First subitem</li>
<li class="s2sub">Second subitem</li>
</ol>
</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h2 class="title">Section 3</h2>
<ol class="bullet">
<li>First item
<ol>
<li class="s3sub">First subitem</li>
<li class="s3sub">Second subitem</li>
</ol>
</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</ol>
</body>
I got it to work like so:
body{
counter-reset: section children;
}
li{
list-style:none;
}
.parent::before {
counter-increment: section;
content: counter(section) " - ";
}
.parent li:first-child{
counter-reset:children;
}
.parent li::before{
counter-increment: children;
content: counter(section) "." counter(children) " - ";
}
<ol>
<li class="parent">Section 1
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
<li class="parent">Section 2
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
</ol>
I removed the list style, since it isn't necessary.
What this does is create two separate counters for the children and the sections, then resets the children counter on every new section.
JSFiddle Demo
I try to make simple css-dropdownmenu.
My goal is to create a transition in which a dot transforms into a square if you hover over the main menu elements. With dot i mean a very small circle which cant be seen until hovered and then transforms into a square.
My menu is already able to transform the square into a circle with differant color but I cant think of a way to do it vice versa, especially because the circle first has to be 'hidden' until hovered.
Here is what i have so far:http://jsfiddle.net/eaqw4m38/3/
HTML:
Test
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<ul id="nav">
<li>Home</li>
<li>Menu 1
<span id="s1"></span>
<ul class="subs">
<li>Header a
<ul>
<li>Submenu I</li>
<li>Submenu II</li>
<li>Submenu III</li>
</ul>
</li>
<li>Header b
<ul>
<li>Submenu I</li>
<li>Submenu II</li>
<li>Submenu III</li>
</ul>
</li>
</ul>
</li>
<li>Menu 2
<span id="s2"></span>
<ul class="subs">
<li>Header c
<ul>
<li>Submenu I</li>
<li>Submenu II</li>
<li>Submenu III</li>
</ul>
</li>
<li>Header d
<ul>
<li>Submenu I</li>
<li>Submenu II</li>
<li>Submenu III</li>
</ul>
</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Google</li>
</ul>
</div>
</body>
I couldnt find anything via the search that fit my question.
Thanks in advance for your answers :)
Paul
EDIT: I now know how to add such a circle and make it transparent but how do i add it to the transition?
The problem is that i have to objects: 1. the square of the menuelement
2. the circle
How do I anymate the circle when the square is hovered and moreover i have to keep the font on top of the circle
Jsfiddle: http://jsfiddle.net/u2ykjdbo/
Just apply the border radius to elements at the start (when they are not hovered), and then apply the background and new color when the element is hovered while changing the border-radius to 0. As the color changes, you will see the transition from circle to square.
Code (unchanged selectors omitted):
#nav > li > a {
color: #333333;
display: block;
font-size: 1.3em;
line-height: 49px;
padding: 0 15px;
text-transform: uppercase;
border-radius: 50%;
}
#nav > li:hover > a, #nav > a:hover {
background-color: #EC7970;
color: #000000;
border-radius: 0;
}
How can I use CSS selectors to apply a style only to the inner item in a list. Example:
HTML fragment:
<ul class="list">
<li>Item 1</li>
<li>
<ul class="list">
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>
<ul class="list">
<li>Subitem 1.1</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS fragment:
ul.list {
border: 1px solid red;
}
What I need is to have a border only arround the "Subitem 1.1" string. The list is generated and it's not possible to add an extra class or id and as the list has no fixed depth it's not an option to specify an "ul > ul > ul.list" or similar selector.
I believe you cannot do this with only CSS if it is not possible to use an Id or unique class. In this case I think jQuery is the way to go:
$("li").children().eq( $("li").children().length - 1 ).
css('border', '1px solid red');
The idea is to use eq() to pinpoint the deepest child.
Hope this helps
it's not an option to specify an "ul > ul > ul.list" or similar selector.
Why not? This, or adding a class, is the solution.
You've basically specified a requirement to identify an element, then rejected all the approaches that you could use to do so.
<html>
<head>
<style type="text/css">
li.list {
border: 1px solid red;
}
</style>
</head>
<body>
<ul >
<li>Item 1</li>
<li>
<ul >
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>
<ul >
<li class="list">Subitem 1.1</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
I Hope This ma help you..
JoseSantos is correct in that it can't be done with pure CSS. Here's how I'd do it in jQuery:
$("ul").each(function(){
if ($(this).find("ul").length == 0)
$(this).addClass("list");
});