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}
Related
I'm creating a website in WordPress, it's going well, but whenever I try to add pictures to the page of the site, the text won't wrap around them. The pages are supposed to be created when you're inside of your WP account, so there is minimal coding involved, and each page has it's own coding and formatting as far as html is concerned. I would be willing to change the CSS to fix this problem, but I wouldn't know where to start. Here is the code for the About Us page:
Cougar Electric Car Company is made up of students at
Kennedy High School in Cedar Rapids, Iowa. Students work in teams to design and construct safe, energy-efficient electric one-person vehicles that they showcase during a series of rallies across the
Midwest. This is hands-on education. Team members apply what they’ve learned in math science, and or vocational education – and more.
<img style="float: right;" src="http://leifsegen.com/sandbox/livia_t/electric-car/wordpress/wp-content/uploads/2016/02/IMG_5139-300x225.jpg" alt="IMG_5139" width="300" height="225" />
<h6>The program is designed to challenge students to:</h6>
<ul>
<li>Apply classroom lessons to build a one-person light electric vehicle</li>
<li>Design and engineer the vehicle to roll safely and efficiently</li>
<li>Use problem-solving skills</li>
<li>Promote efforts in the community to gain support</li>
<li>Compete against other schools to see whose vehicle performs best</li>
<li>Document the design/build/compete process</li>
</ul>
<h6><strong>Since 1997</strong></h6>
The program was launched by two students and Kennedy teacher Barry Wilson in 1997. Since then, the program has impacted hundreds of students and sparked interest in manufacturing, engineering, automotive, alternative energy, and many more career paths.
Here is the link to my About Us page.
From your linked page, it looks like your img tag is within a distinct paragraph tag underneath another paragraph tag. Since paragraph tags are block elements, they stack instead of allowing inline flow.
to resolve this, you want to go to the edit post/page area, and place the media at the start of the paragraph you want wrapping around it (or, however many lines down you want to start the wrapping). Click the image, then select the box that looks like a box w lines wrapping around it. See my screenshot for an example
You can accomplish the same thing in text mode instead of visual editor mode by placing the image tag within the same paragraph tag that the paragraph is in, then giving it a float:right / left property
Move the image inside the <ul> that will solve your issue. Already tested and its working
<ul>
<li style="list-style: none;"><img style="float: right;" src="http://leifsegen.com/sandbox/livia_t/electric-car/wordpress/wp-content/uploads/2016/02/IMG_5139-300x225.jpg" alt="IMG_5139" width="300" height="225"></li><li>Apply classroom lessons to build a one-person light electric vehicle</li>
<li>Design and engineer the vehicle to roll safely and efficiently</li>
<li>Use problem-solving skills</li>
<li>Promote efforts in the community to gain support</li>
<li>Compete against other schools to see whose vehicle performs best</li>
<li>Document the design/build/compete process</li>
</ul>
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>
Hi I'm sure there is a simple way of doing this but I just can't find what im looking for.
my problem is I have an ordered list code shown below.
<ol>
<li>Identification code of product type </li>
<b> WC flushing cistern - Class 2</b>
<li> Serial number allowing identification of the construction product as required under article 11(4): </li>
<b> PACWHB313397</b>
<li>Intended use in accordance with the applicable harmonised standard, as foreseen by the manufacturer </li>
<b>Personal Hygiene</b>
<li>Name, and contact address of manufacturer as required under article 11(5): </li>
<b> Thomas Dudley Limited, 295 Birmingham New Road, Dudley, West Midlands, United Kingdom, DY1 4SJ </b>
<li>Where applicable, Name and contact details of representative who's mandate covers tasks specified in article 12(2):</li>
<b>N/A</b>
<li>System or Systems of assessment and verification of constancy of performance of the construction product as set out in CPR, annex V:</li>
<b> System 4</b>
<li>Applicable Standards, In case of the declaration of performance concerning a construction product covered by a harmonised standard</li>
<b>BS EN 14055:2010 WC and Urinal Flushing Cisterns (Class 2)</b>
<b>BS 6920-2.1:2000 Suitability of non-metallic products for use in contact with water intended for human consumption.</b>
<b>BS 1212-3:1990 Diaphragm type float operated valves (plastic bodied) for cold water services only (Excluding Floats)</b>
</ol>
Now in firefox it displays correctly for example it should look like this
example example
bold text here
example example
bold text here
example example
bold text here
Which is working ok in all browser accept IE 10 it displays like this
example example bold text here
example example bold text here
example example bold text here
So I was just wondering is there a simple way of sorting this out using css or a certain tag to use to sort this out.
Any help will be much appreciated.
Take a look at this fiddle http://jsfiddle.net/Lcy2L/
You can only have <li> elements inside the element. You should put all your content in the <li> and insert <br /> and <b> or other tags to format your content inside the <li>.
Your code could look something like this
<ol>
<li>
Content<br />
<b>Comment</b>
</li>
</ol>
You can see this fiddle, contains example of what you can do. with CSS:
.styling {
font-weight:bold;
}
and li element:
<li>Identification code of product type
<br><span class="styling"> WC flushing cistern - Class 2</span>
</li>
I'm the webmaster for smctheatre.com. We're a community theatre that puts on a handful of plays each year. I'm adding to my toolbox with learning structured data. Microformat, microdata, or RDFa, I don't have any strong preference for one over another. I do like the syntax of RDFa Lite and microfomat over microdata and full-blown RDFa.
The only thing I haven't been able to get an answer to is how to mark up an event that occurs on multiple dates, and sometimes at different times.
Here's a trimmed down snippet from the site:
<article>
<header>
<h1>Play Name</h1>
<div class="addthis_toolbox">...</div>
</header>
<aside>
<h2>Dates</h2>
<ul>
<li>May</li>
<li>Fridays 17 & 24</li>
<li>Saturdays 18 & 25</li>
<li>Sundays 19 & 26</li>
<li>Monday 27</li>
<li>All shows start at 7:30 PM</li>
</ul>
<h2>Tickets</h2>
<ul>
<li>Adult $8.00</li>
<li>Child (5-17) $5.00</li>
</ul>
<h2>Directed By</h2>
<ul>
<li>Director Name</li>
</ul>
</aside>
<div>
<p>Summary of a theatre play....</p>
</div>
</article>
Duration of plays are typically two hours, but given that these are live performances, there's no hard and fast ending time.
How do I mark up the content to indicate the dates and times?
Seriously doubt there's an example of exactly what you want, but microformats are flexible and I think I've found enough to get you started:
<div class="vevent">
<a class="url" href="http://conferences.oreillynet.com/pub/w/40/program.html">
http://conferences.oreillynet.com/pub/w/40/program.html
</a>
<span class="summary">Web 2.0 Conference</span>:
<abbr class="dtstart" title="2005-10-05">October 5</abbr>-
<abbr class="dtend" title="2005-10-07">7</abbr>,
at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>
The example below uses multiple dates at the same venue; swap out the div for your article and looks like you're in business. easily make your header the summary, and put the description class on your p for summary...even though that sounds backwards, it's what you want.
How much further you want to take it is really up to you. I see where you could work start times, possibly a url....and also more microformats, to get even more goodness out of them. You should check out the wiki, it's full of great info, and examples from which you can and should pilfer.
http://microformats.org/wiki/hcalendar
Is it semantically correct to markup a ul in HTML with another embedded ul that has only one single list item?
For example, I have a ul with several lis, and one of those lis has an embedded ul with a single li:
<ul>
<li>Example LI 1
<ul>
<li>Example LI 1a</li>
</ul>
</li>
<li>Example LI 2</li>
<li>Example LI 3</li>
</ul>
Absolutely. A list is not defined by quantity. It's defined by semantics. So a list can consist of only one element if only one item applies to the list's purpose. For example, I have only crashed one computer today so that list would be only one element long.
Yes, it is semantically correct to have a list with a single item if used correctly, even if it does feel a little strange (it’s not really a list if there is only one item because by definition, a list is, well, a list of items, otherwise it would just be an item).
In the example you provided, the items were placeholders and had no meaning, so it is hard to tell if it applies. Whether it is correct or not depends on why you are putting it in a sub-item. It is perfectly reasonable to have a single-item sub-list if it is indeed a list item, especially if there are other sub-lists with multiple items. In that case, the meaning is clear. For example, the following is fine:
<h1>Auto Insurance Customers</h1>
<ul>
<li>
<strong>#1234</strong>
<ul>
<li>2003 Ford Focus</li>
<li>1998 Ford Escort</li>
<ul>
</li>
<li>
<strong>#2468</strong>
<ul>
<li>1999 Lamborghini Diablo VT Roadster</li>
</ul>
</li>
…
</ul>
There is nothing wrong with this example because it is perfectly reasonable for a customer to have a single car while others may have more.
On the other hand, if the reason that you are making the single-item sub-list is simply to create an indent to offset and highlight part of a list item, then it is incorrect.
For example, say you have a list of paragraphs of text. In one of the paragraphs, you have a passage that needs some sort of attention and you want to indent and offset it. While putting it in a list would work, it is incorrect because you are mixing style with structure.
The correct way to accomplish this would be to wrap the section in another tag (like <blockquote>, styled <div>, etc.) and leave it in the regular flow of that list item. In the following example, there is a part of one of the list items that needs to be highlighted. Putting it in a (single-item) list is the wrong way to do it:
<h1>Blog posts or something…</h1>
<ul>
<li>
<strong>Foo</strong>
<p>Some long paragraph about Foos, what they do, how they work, etc.</p>
<p>More information about Foos and where they originated.</p>
<p>Instructions on care and feeding of Foos.</p>
</li>
<li>
<strong>Bar</strong>
<p>Detailed description of local watering holes for lawyers.</p>
<p>Anecdotes about experiences of drinking & lawyering.</p>
<!-- This section is to be highlighted and offset to draw attention to it from the rest of this list item. -->
<ul>
<li>
<p>Highlighted account of the subsequent problems and what happened that one strange night.</p>
</li>
</ul>
<p>Summary of what to not do when out drinking with lawyers.</p>
</li>
<li>
<strong>Baaz Luhrmann</strong>
<p>A bunch of stuff about a brass-skinned movie director who made a widely-panned film adaptation of a Shakespeare play who turns to stone and traps your sword when he dies.
</li>
</ul>
Instead, you should use the correct tag for this purpose. Not only is it semantically and structurally correct, it is also clearer and even reduces the size of the page a little:
<style…>
p.highlight {
margin : 20px 50px;
width : 150px;
}
</style>
…
<li>
<strong>Bar</strong>
<p>Detailed description of local watering holes for lawyers.</p>
<p>Anecdotes about experiences of drinking and lawyering.</p>
<!-- This section is to be highlighted and offset to draw attention to it from the rest of this list item. -->
<p class="highlight">
Highlighted account of the subsequent problems and what happened that one strange night.
</p>
<p>Summary of what to not do when out drinking with lawyers.</p>
</li>
According to dictionary.com, a list is a meaningfully grouped series of items and a series is a group of similar or related items. (Results are similar at oxforddictionaries.com and thefreedictionary.com.) Anything that contains only one item can't contain meaningful grouping or a similarity or relatedness between its contents. Thus, for a one-item list, the semantics of the markup don't match the semantics of the content.
A single-item list also just doesn't seem to fit with what people mean when they say "list".
(On that note, contemporary dictionaries are more focused on recording common usage than proper usage (which is why "bling" is in the OED).)
Additionally, even if it wasn't technically wrong, there just doesn't seem to be much editorial value in marking up such a simple statement as a list instead of a paragraph. It seems to me that the first of the three following examples would be the easiest for the user to parse and comprehend.
<p>XYZ is the only computer that crashed.</p>
<p>
The computer that crashed:
<ul><li>XYZ</li></ul>
<p>
<ul>
<li>
The computer that crashed:
<ul><li>XYZ</li></ul>
</li>
<ul>