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>
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>
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 would like to put a table of contents at the top of an internal email newsletter that will allow readers to 'jump' down to the part of the newsletter that interests them. Something like:
<ul>
<li>Funding Opportunities</li>
<li>Professional Development</li>
<li>Best Practices</li>
</ul>
Then 'further down' in the email newsletter have:
<h2><a id="FUNDING">Funding</a></h2>
<!--- news items about funding -->
<h2><a id="DEVELOPMENT">Professional Development</a></h2>
<!--- news items about professional development -->
<h2><a id="BEST">Best Practices</a></h2>
<!--- news items about Best Practices -->
This works fine in browser based HTML, but I have not had success getting it to work in various email clients (gmail, groupwise, outlook). I have however, received emails that appear to use a technique like above and I am able to 'scroll' the email. I understand that support in various clients will vary and that this is not necessarily a 'good' practice but this is an internal system and almost all recipients will be using GroupWise.
Any experienced insight into the specific additional markup that is needed (e.g. what would the base ref be?) would be greatly appreciated.
Try adding the 'name' attribute to the anchor as well as the 'id'.
<a id="FUNDING" name="FUNDING">
I found this post when trying to accomplish the same thing, and I followed instructions here to get it to work: http://blog.mailermailer.com/tips-resources/anchor-tags-html-emails
This is the code I ended up with in the first successful test:
<html>
<a name="BACKTOTOP">Index</a>
<ul>
<li>Compliance Courses</li>
<li>Dealer Training</li>
<li>Functional Training Courses</li>
<br>
<h1>
<a name="COMPLIANCE">Compliance</a>
</h1>
<br>
This will be the message for Compliance courses.
<br>
Return to top index
<br>
<h1>
<a name="DEALERTRAINING">Dealer Training</a>
</h1>
<br>
This will be the message for Dealer Training.
<br>
Return to top index
<br>
<h1>
<a name="FUNCTIONALAREA">Functional Training Courses</a>
</h1>
<br>
This will be the message for courses by Functional Area.
<br>
Return to top index
</html>
My q and a page sucks - it's this: http://rankingclimber.com/qa.php
I checked out http://www.text-link-ads.com/r/faq and i really liked how the questions were clickable and the answers came down below.
I checked out the source code for text-link-ads.com and found the below code. But I feel like this requires some css file or some .js file in addition to this. can someone help me and give me instructions on how to do this? I have a basic knowledge of html and css.
<ul class="faq">
<li>
<a onclick="$('#advQ1').toggle();">What makes Text Link Ads unique?</a>
<div id="advQ1" style="display:none">
Text Link Ads are unique because they are static html links that can drive targeted traffic and help your link popularity which is a top factor in organic search engine rankings. </div>
</li>
<li>
<a onclick="$('#advQ2').toggle();">How are Text Link Ads priced?</a>
<div id="advQ2" style="display:none">
Text Link Ads are priced at a flat rate per month per link. You prepay for a 30 day run of your ad, and your account will be set on recurring billing either via PayPal or credit card. Your ad will never be turned off if it gets too many impressions or clicks. Our pricing algorithm factors in a website's: traffic, theme, ad position, and link popularity when setting the flat ad rate per month. </div>
</li>
<li>
<a onclick="$('#advQ3').toggle();">I just placed an order, when will my ad go live?</a>
<div id="advQ3" style="display:none">
Most links are placed within 48 hours of the order being received. New ads require our publisher to review and accept the ad. The 30 day billing period will not begin until your ad is actually live. </div>
</li>
<li>
<a onclick="$('#advQ4').toggle();">What is Alexa?</a>
<div id="advQ4" style="display:none">
A website's "Alexa" ranking is a general indicator of the amount of traffic a website receives. The lower the number the more traffic that site receives, ie Yahoo.com is #1, Ebay.com is #8. More information on Alexa here. </div>
</li>
<li>
<a onclick="$('#advQ5').toggle();">How do I review my active running ads?</a>
<div id="advQ5" style="display:none">
You can review your current running ads here </div>
</li>
</ul>
This is a pretty broad topic, there are many ways to do it but I would start by looking at the tweening functionality in jQuery - http://jquery.com/
This is the javascript library that was used in that site, you can tell by the use of the $('#inputID') pattern.
There are great examples on the jQuery site as a starting point.
Each anchor above has an onclick attribute that tells jquery to toggle the visibility of it's corresponding DIV - $('#advQ1').toggle(); - where $('#advQ1') is the element to target and .toggle() is the jQuery function to run on it. You can target any element in the DOM by it's ID or class name $('.className');
Edit:
If you are just beginning jQuery then in particular check out the show(), hide() and toggle() functions:
http://api.jquery.com/show/
http://api.jquery.com/hide/
http://api.jquery.com/toggle/
I would like to put a table of contents at the top of an internal email newsletter that will allow readers to 'jump' down to the part of the newsletter that interests them. Something like:
<ul>
<li>Funding Opportunities</li>
<li>Professional Development</li>
<li>Best Practices</li>
</ul>
Then 'further down' in the email newsletter have:
<h2><a id="FUNDING">Funding</a></h2>
<!--- news items about funding -->
<h2><a id="DEVELOPMENT">Professional Development</a></h2>
<!--- news items about professional development -->
<h2><a id="BEST">Best Practices</a></h2>
<!--- news items about Best Practices -->
This works fine in browser based HTML, but I have not had success getting it to work in various email clients (gmail, groupwise, outlook). I have however, received emails that appear to use a technique like above and I am able to 'scroll' the email. I understand that support in various clients will vary and that this is not necessarily a 'good' practice but this is an internal system and almost all recipients will be using GroupWise.
Any experienced insight into the specific additional markup that is needed (e.g. what would the base ref be?) would be greatly appreciated.
Try adding the 'name' attribute to the anchor as well as the 'id'.
<a id="FUNDING" name="FUNDING">
I found this post when trying to accomplish the same thing, and I followed instructions here to get it to work: http://blog.mailermailer.com/tips-resources/anchor-tags-html-emails
This is the code I ended up with in the first successful test:
<html>
<a name="BACKTOTOP">Index</a>
<ul>
<li>Compliance Courses</li>
<li>Dealer Training</li>
<li>Functional Training Courses</li>
<br>
<h1>
<a name="COMPLIANCE">Compliance</a>
</h1>
<br>
This will be the message for Compliance courses.
<br>
Return to top index
<br>
<h1>
<a name="DEALERTRAINING">Dealer Training</a>
</h1>
<br>
This will be the message for Dealer Training.
<br>
Return to top index
<br>
<h1>
<a name="FUNCTIONALAREA">Functional Training Courses</a>
</h1>
<br>
This will be the message for courses by Functional Area.
<br>
Return to top index
</html>