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>
Related
I am trying to create a table of contents for my markdown file, however I have an issue with it spilling onto the rest of the content on the page.
You can see in the above picture that a section is missing and the image has moved up.
I isolated the problem area to this section:
<!-- CONTENTS -->
<details open="open">
<summary>Table of Contents</summary>
<ol>
<li>Objective / Goal of the Game</li>
<li>Resources</li>
<li>Board Layout</li>
<li>Upgrades</li>
<li>Turn Structure</li>
<li>Trade</li>
<li>Bankruptcy</li>
<li><a href="#tips>Tips</a></li>
</ol>
</details>
<!--OBJECTIVE-->
## Objective, Goal of the Game.
The winner in Back from the Brink is whichever Player has the most fully improved conservation areas by the end of the turn limit, or is the last player still in the game.
If the number of conservation areas is tied at the end of the game, whoever has the most money is crowned the winner.
<!--Resources-->
## Resources
Their are two types of resources in "Back from the Brink".
1. Money (£) - used for purchasing and improving conservation areas.
2. Upgrade Points (UP) - used for purchasing player upgrades.
<!--board-layout-->
## Board Layout
See here a layout of the board (for visually reference)
<p align="center">
<img src="images/htpboardlayout.png" alt="board layout">
</p>
As you can see their are several types of board tiles:
* **Conservation Area Tile** – This is an endangered species habitat. If unowned, a player can **buy the Conservation Area** for money. If a user other than the user who bought the tile lands on it, they will have to **pay a ticket fee** to see the animals. This fee is payed directly to the **owner of the Conservation Area**. This ticket fee increases as the Conservation Area is improved. Each **Conservation Area** belongs to a **Continent**. You must own all Conservation Areas in a **Continent** in order to improve the **Conservation Areas**.
The image becomes hyperlinked somehow and provides the url:
https://github.com/.../#tips%3ETips%3C/a%3E%3C/li%3E%20%20%3C/ol%3E%3C/details%3E%3C!--OBJECTIVE--%3E%3Ch2%3EObjective,%20Goal%20of%20the%20Game.%3C/h2%3E%3Cp%3EThe%20winner%20in%20Back%20from%20the%20Brink%20is%20whichever%20Player%20has%20the%20most%20fully%20improved%20conservation%20areas%20by%20the%20end%20of%20the%20turn%20limit,%20or%20is%20the%20last%20player%20still%20in%20the%20game.%3C/p%3E%3Cp%3EIf%20the%20number%20of%20conservation%20areas%20is%20tied%20at%20the%20end%20of%20the%20game,%20whoever%20has%20the%20most%20money%20is%20crowned%20the%20winner.%3C/p%3E%3C!--Resources--%3E%3Ch2%3EResources%3C/h2%3E%3Cp%3ETheir%20are%20two%20types%20of%20resources%20in%20%22Back%20from%20the%20Brink%22.%3C/p%3E%3Col%3E%3Cli%3EMoney%20(%C2%A3)%20-%20used%20for%20purchasing%20and%20improving%20conservation%20areas.%3C/li%3E%3Cli%3EUpgrade%20Points%20(UP)%20-%20used%20for%20purchasing%20player%20upgrades.%3C/li%3E%3C/ol%3E%3C!--board-layout--%3E%3Ch2%3EBoard%20Layout%3C/h2%3E%3Cp%3ESee%20here%20a%20layout%20of%20the%20board%20(for%20visually%20reference)%3C/p%3E%3Cp%20align=
I am convinced I haven't closed an HTML structure but I can't seem to pinpoint where it is.
http://www.ifma.org/professional-development/career-center
If you visit this link with Safari (I think OS X only), the links don't work in the middle section. These type of styled links:
View featured job openings »
Receive personal job alerts »
Search for jobs by keyword, location and industry »
Access career coaching resources »
When you use any kind of bold property or html tags it makes the link not functional. You can't click it and it just seems as though it's text.
In the following source code, if you take away the <strong> tag it works. You can't use <b> tags or font-weight properties either.
<p>Whether you are a seasoned facility manager or just getting started in the profession, IFMA offers the resources you need to find the perfect FM position and advance your career.</p>
<p> </p>
<ul>
<li><strong>View featured job openings »</strong></li>
<li><strong>Receive personal job alerts »</strong></li>
<li><strong>Search for jobs by keyword, location and industry »</strong></li>
<li><strong>Access career coaching resources »</strong></li>
</ul>
<p style="text-align: right;"><strong>View FM career guide »</strong></p>
<div class="button"><strong>Create your JOBNet account »</strong>
</div>
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'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