So here is my code:
<div class="faq">
<br />
<ol>
<li>Frequently asked questions about Sweden</li>
<li>What and where is Sweden?
<ul>
<li>When did Sweden stop participating in wars?</li>
<li>Is Sweden a part of the European Union?
<ul>
<li>Did Sweden ever have a scientific revoution?</li>
<li>Did the Nobel Prize really come from Sweden?</li>
</ul>
</li>
</ul>
</li>
</ol>
<ol>
<li>More Questions
<ul>
<li>Does Sweden hold many patents on their inventions?</li>
<li>How does the Swedish educational system work?</li>
<li>How is school financed in Sweden?</li>
</ul>
</li>
</ol>
When I then use this code, the first list called, "Frequently asked questions about Sweden" has its roman numeral (the one given to it from the ordered list) on the wrong side of it.
So basically it looks like this:
Frequently asked questions about Sweden. II.
When it should look like:
II. Frequently asked questions about Sweden.
I dont know how to put it at the start of the question. All the other lists and sublists act fine but this one messes up somehow.....
Help please :)
Is this what you wanted?
Frequently asked questions about Sweden
What and where is Sweden?
When did Sweden stop participating in wars?
Is Sweden a part of the European Union?
Did Sweden ever have a scientific revoution?
Did the Nobel Prize really come from Sweden?
More Questions
Does Sweden hold many patents on their inventions?
How does the Swedish educational system work?
How is school financed in Sweden?
<html>
<head>
</Head>
<body>
<ol>
<li>Frequently asked questions about Sweden</li>
<ul>
<li>What and where is Sweden?</li>
<li>When did Sweden stop participating in wars?</li>
<li>Is Sweden a part of the European Union?</li>
<li>Did Sweden ever have a scientific revoution?</li>
<li>Did the Nobel Prize really come from Sweden?</li>
</ul>
<li>More Questions
<ul>
<li>Does Sweden hold many patents on their inventions?</li>
<li>How does the Swedish educational system work?</li>
<li>How is school financed in Sweden?</li>
</ul>
</ol>
</body>
</html>
Related
As the subject says, I wrote this code to mix numbered list with bulleted list, it worked perfectly exactly the way I wanted it too but the validator says this is a no no so what's the proper way to do this? Below is my code:
<ol>
<li>Public, private & religious schools programs and assemblies</li>
<ul>
<li>School assembly in elementary, middle, junior high, and high schools</li>
<li>presentation to individual classes as part of the social studies or history curriculum at all grade levels</li>
<li>Present video clips on various related topics followed by class/group discussions and activities.</li>
<li>Work with youth groups/boy scouts/girl guides/YWCA</li>
<li>After school programs</li>
<li>Work with school-age after school programs</li>
<li>Work with early childhood programs</li>
<li>Community programs & activities
</ul>
<li>Topics to include but not limited to -</li>
<ul>
<li>Prejudice</li>
<li>Stereotyping</li>
<li>Implicit bias</li>
<li>Discrimination</li>
etc...
Place the ul within the li no the ol:
<ol>
<li>Public, private & religious schools programs and assemblies
<ul>
<li>School assembly in elementary, middle, junior high, and high schools</li>
<li>presentation to individual classes as part of the social studies or history curriculum at all grade levels</li>
<li>Present video clips on various related topics followed by class/group discussions and activities.</li>
<li>Work with youth groups/boy scouts/girl guides/YWCA</li>
<li>After school programs</li>
<li>Work with school-age after school programs</li>
<li>Work with early childhood programs</li>
<li>Community programs & activities
</ul>
</li>
<li>Topics to include but not limited to -
<ul>
<li>Prejudice</li>
<li>Stereotyping</li>
<li>Implicit bias</li>
<li>Discrimination</li>
</ul>
</li>
</ol>
I add two titles: "Education" & "My Hobbies"
Why are they not aligned?
I have went thru the code and managed to fix some nesting list issues but that did not fix above problem.
<body>
<h1>Vlad Myshchuk</h1>
<p><em><strong>Software Engineer</strong><br>Full Stack Developer</em></p>
<p>I am self-taught student of programming. My focus as a Software Engineer is primarily on Full Stack Software & Web Development. I hold a degree in Accounting A.A.S. as well as Computer Information Systems A.A.S.</p>
<hr>
<h3>Education</h3>
<ul>
<li>Hudson Valley Community College</li>
<li>State University of New York College at Oneonta</li>
<li>Recent courses at Udemy:
<ul>
<li>The Complete 2019 Web Development Bootcamp with Professor Angela Yu</li>
</ul>
</li>
<li>Books
<ul>
<li>Pragmatic Thinking and Learning by Andy Hunt</li>
<li>Code: The Hidden Language of Computer Hardware and Software by Charles Petzold</li>
<li>Code Complete: A Practical Handbook of Software Construction by Steve McConell</li>
<li>Clean Code: A Handbook of Agile Software Cragsmanship by Robert C. Martin</li>
</ul>
</li>
<h3>My Hobbies</h3>
<ol>
<li>Completing algorithms on codechef.com and codingame.com</li>
<li>Practice a variety of meditation and yoga.</li>
<li>Weight training and high intensity interval training (HIIT).</li>
<li>Reading books on psychology as well as philosophy.</li>
<li>Listening to educational podcasts and recorded lectures.</li>
</ol>
</body>
I expect both headers to be positioned to the very left.
You did a silly mistake dear. You have to just complete
</ul>
tag before
<h3>My Hobbies</h3>
after correct it your problem will be solve.
Just a typo i expect, there was an unescaped h3 tag. There's a handy tool you can use to check: https://www.aliciaramirez.com/closing-tags-checker/
<body>
<h1>Vlad Myshchuk</h1>
<p><em><strong>Software Engineer</strong><br>Full Stack Developer</em></p>
<p>I am self-taught student of programming. My focus as a Software Engineer is primarily on Full Stack Software & Web Development. I hold a degree in Accounting A.A.S. as well as Computer Information Systems A.A.S.</p>
<hr>
<h3>Education</h3>
<ul>
<li>Hudson Valley Community College</li>
<li>State University of New York College at Oneonta</li>
<li>Recent courses at Udemy:
<ul>
<li>The Complete 2019 Web Development Bootcamp with Professor Angela Yu</li>
</ul>
</li>
<li>Books
<ul>
<li>Pragmatic Thinking and Learning by Andy Hunt</li>
<li>Code: The Hidden Language of Computer Hardware and Software by Charles Petzold</li>
<li>Code Complete: A Practical Handbook of Software Construction by Steve McConell</li>
<li>Clean Code: A Handbook of Agile Software Cragsmanship by Robert C. Martin</li>
</ul>
</li>
</ul>
<h3>My Hobbies</h3>
<ol>
<li>Completing algorithms on codechef.com and codingame.com</li>
<li>Practice a variety of meditation and yoga.</li>
<li>Weight training and high intensity interval training (HIIT).</li>
<li>Reading books on psychology as well as philosophy.</li>
<li>Listening to educational podcasts and recorded lectures.</li>
</ol>
</body>
I have no clue why my page doesnt display the point i want to be in lists as lists. It just gives out all the points between the li tags in the same line.
also can i link the same css files to all my text files?
<!DOCTYPE html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>eligiblitypage</title>
</head>
<body>
<h1>Are You Eligible?</h1>
<p>It is great that you took the first step. Yes thinking about
getting transferred. But before proceeding, checks out if
you are eligible for the college you are applying to.</p>
<div class="first">
<div class="info">
<ol>
<li>The first step would be to:
<ol>
<li>Make a list of colleges which you find to be a good match for you (yes Ivies also take transfers!)</li>
<li>If you dont know much about colleges in the US, exploring the CollegeBoard website would be
the first step for you College Search</li>
<li>Filter according to your needs in the website and then finalize some colleges for which you are
eligible.</li>
</ol></li>
<li>Next Steps!
<ol><li>Now that you have got a list of the colleges, visit the college websites and explore the various
oppurtunities you may have in that college.</li>
<li>Also look throught the transfer requirements to see if the college has some special requirements
for transfer students</li>
<li>Attending college in the US may get costly. Try to look at what the cost of attending college would be. If you are an intenrational student
,check out the financial aid page and also the scholarships offered if any.</li>
</ol></li>
<li>Final Steps
<ol>
<li>Dont forget to check on the website if the colleges in your list offer your desired major</li>
<li>Also check the college coursework and see whether you can handle it or not</li>
<li>Now that you know about your eligibility, you can move on to the <a href="#">application process imformation<a></li>
</ol></li>
</ol>
</div>
</div>
</body>
</html>
Also can i add div tags in individual li tags?
Close the last <a> tag, and everything should be fixed.
Change
<li>Now that you know about your eligibility, you can move on to the <a href="#">application process imformation<a></li>
to
<li>Now that you know about your eligibility, you can move on to the application process imformation</li>
Edit:
Here's the complete working body with the one change above, as well as reformatted:
<body>
<h1>Are You Eligible?</h1>
<p>It is great that you took the first step. Yes thinking about
getting transferred. But before proceeding, checks out if
you are eligible for the college you are applying to.
</p>
<div class="first">
<div class="info">
<ol>
<li>
The first step would be to:
<ol>
<li>Make a list of colleges which you find to be a good match for you (yes Ivies also take transfers!)</li>
<li>If you dont know much about colleges in the US, exploring the CollegeBoard website would be
the first step for you College Search
</li>
<li>Filter according to your needs in the website and then finalize some colleges for which you are
eligible.
</li>
</ol>
</li>
<li>
Next Steps!
<ol>
<li>Now that you have got a list of the colleges, visit the college websites and explore the various
oppurtunities you may have in that college.
</li>
<li>Also look throught the transfer requirements to see if the college has some special requirements
for transfer students
</li>
<li>Attending college in the US may get costly. Try to look at what the cost of attending college would be. If you are an intenrational student
,check out the financial aid page and also the scholarships offered if any.
</li>
</ol>
</li>
<li>
Final Steps
<ol>
<li>Dont forget to check on the website if the colleges in your list offer your desired major</li>
<li>Also check the college coursework and see whether you can handle it or not</li>
<li>Now that you know about your eligibility, you can move on to the application process imformation</li>
</ol>
</li>
</ol>
</div>
</div>
</body>
I'm trying to do nested, ordered lists using ol types and though the code looks right in the Wordpress preview, it doesn't show correctly when I preview in Firefox and IE, the lists all show as numbered lists instead of the types I specified in the code. My code is below. Can someone help me find what's wrong?
Thanks in advance for any help!
Kelly
Teaching your kids about money isn't always child's play. But helping them make smart choices early will pay off later.
<span style="text-decoration: underline;">Baby Steps</span>
<h4>Even the cartoon set can learn the value of a dollar. Some simple ideas:</h4>
<ol class="alt1">
<li>Show your toddler the various coins in your pocket or change purse and see if the clever tyke knows what each one can buy.
<ol type="a">
<li>Gum machines or mechanical rides still take coins. Or try old-fashioned "penny candy" shops, even if that bubble gum goes for a dime now.</li>
<li>How many coins are necessary to buy a popsicle or frozen yogurt at the ice cream truck?</li>
<li>Field trip: checking the prices at the grocery store can be instructive for kids —and their parents, too!</li>
</ol>
<ol class="alt2">
<ol type="i">
<li>Where does money come from (besides the ATM machine)? Discuss getting paid for work and how your salary lets you buy things for the family.</li>
<li>Lemonade stands still do a thriving business for first-time entrepreneurs.</li>
<li>Old toys can be contributed to Mom’s and Dad's yard sale to score a profit.</li>
<li>Discuss the best way to invest the proceeds with your tiny mogul. Hint: don't blow it all on candy or games.</li>
</ol>
</ol>
Older kids can understand the difference between necessary and optional purchases. Milk or gummi bears?
<h2>Here's Your Allowance</h2>
<h4>Yep, it's still a great teaching tool after all these years. Some ways to get with the program:</h4>
<ol class="alt1">
<li>Doling out the cash on a weekly basis makes sense. Even older kids may find it tough to budget a month in advance.</li>
<li>Decide whether there will be strings tied to the stipend. Will Junior have to complete household chores before you fork over the cash?</li>
</ol>
<ol class="alt1">
<ol type="a">
<li>Some families think helping around the house should be expected and unrelated to the weekly payout.</li>
<li>Other parents think it's a good way to introduce the idea of working for money and getting paid for a job well done.</li>
</ol>
</ol>
<ol>
<li value="3">In coming up with a dollar amount, savvy parents will not fall for reports of what the other parents are shelling out. Multiplying your own allowance in the distant past by the rate of inflation may be a good starting point.</li>
</ol>
</li>
</ol>
To nest one list inside another, you have to place it inside a <li> element. You can't put it directly inside an <ol> element.
In other words, replace this:
<ol>
<ol>
...
</ol>
</ol>
with this:
<ol>
<li>
<ol>
...
</ol>
</li>
</ol>
I tested both a non wordpress html page and wordpress entry. My guess is wordpess is stripping your type tag so try using CSS. Give each < li > a class and for your css use list-style-type to declare the list-item marker type.
ie:
ol.lower-alpha {list-style-type:lower-alpha}
li.lower-latin {list-style-type:lower-latin}
I have a multiple unordered lists, with a h2 titling each list by subject.
Here is the html
<h2>Early Childhood Education</h2>
<ul class="course-list">
<li>Child Growth and Development</li>
<li>Curriculum and Methods in Teaching Early Childhood Education</li>
<li>Introduction to Early Childhood Education</li>
<li>Introduction to Education</li>
<li>Practicum I: Early Childhood</li>
<li>Practicum II: Early Childhood</li>
<li>Practicum in Education</li>
</ul>
<h2>Emergency Medical Technician</h2>
<ul class="course-list">
<li>Emergency Medical Technician (EMT) – Basic</li>
<li>Emergency Medical Technician (EMT) – Paramedic I</li>
<li>Emergency Medical Technician (EMT) – Paramedic II (Field Internship – Part I)</li>
<li>Emergency Medical Technician (EMT) – Paramedic III</li>
<li>Emergency Medical Technician (EMT) – Paramedic IV (Field Internship – Part II)</li>
<li>EMT-Basic Fieldwork</li>
<li>Report Writing for Healthcare Professionals</li>
</ul>
<h2>English</h2>
<ul class="course-list">
<li>African American Literature</li>
<li>Basic Acting Technique</li>
<li>Contemporary American Poetry</li>
<li>English I: College Writing</li>
<li>English II: Introduction to Literature</li>
<li>Essentials of English *</li>
<li>Interpersonal Communication</li>
<li>Interviewing Practices and Principles</li>
<li>Introduction to Drama Study</li>
<li>Introduction to Poetry</li>
<li>Introduction to Technical Writing</li>
<li>Journalism</li>
<li>Journalism II</li>
<li>Literature for Children</li>
<li>Literature of the Western World</li>
<li>Major American Writers</li>
<li>Major English Writers</li>
<li>Modern American Novel</li>
<li>Nonfiction Literature</li>
<li>Public Speaking</li>
<li>Science Fiction</li>
<li>Service Learning – Volunteer Project</li>
<li>Shakespeare</li>
<li>Storytelling</li>
<li>The Short Story</li>
<li>Voice and Diction</li>
<li>Western Mythology</li>
<li>Women in Literature</li>
<li>Writing Workshop I</li>
</ul>
Here is the CSS
.col-middle .course-list li {
width:50%;
float:left;
}
Here is a screen shot of what it looks like: http://i40.tinypic.com/2141nd3.png
The problem you see in the screen shot is the text within the h2 tags is floating up a line if there is some space after the list above it.
I fixed that by setting overflow:auto; within the ul style, but that made the left half of the list discs dissapear (as you see here: http://i39.tinypic.com/2i8y62r.png)
Also, I'd like to create some spacing between the bottom of the ul list, and the h2 header.
You might wrap each h2/ul pair in a div. This is even good for semantics, since the two are related and therefore could be said to be part of a logical division. Then you can float the whole div and keep the elements grouped.
Please try this tutorial for multi column lists
By the way, floats are evil. ;)
Are the h2 tags supposed to be above each unordered list?
Perhaps what you should do is add a clear:both to the h2 definition...
h2 { clear: both; }