This question already has an answer here:
CSS Show Hide Only
(1 answer)
Closed 8 years ago.
The design of my website is integrated within their company. Basically they are rebranding their website with my information and logo. They want extra money to change any HTML files. I only have access to the stylesheets .css files and images. I have tried the hover in css but I would like it to remain open if clicked on. OR hover and delayed before closing
Can I make a css show/hide with the h3 listed in the sample below: I would like to hide the content under each h3 until the user clicks on it. I have shortened the HTMl I pulled from the product page for sample purposes.
<div id="product_text_content">
<p>Digital Brochures come in full color on 1 or 2 sides. Available options: 8 paper stocks, 5 sizes, and 3 coatings.</p>
<h3 class="gray">SIZE:</h3>
<ol>
<li>8.5" x 11"</li>
<li>8.5" x 14"</li>
<li>11" x 17"</li>
<li>11.5" x 17.5"</li>
<li>5.5" x 8.5"</li>
</ol>
<h3 class="gray">PAPER OPTIONS:</h3>
<ol>
<li>100# Gloss Text available</li>
<li>95# Gloss Cover available</li>
<li>80# Uncoated Offset Smooth Text</li>
<li>100# Uncoated Cover available</li>
<li>70# White Linen Text</li>
<li>100# White Linen Cover</li>
</ol>
<h3 class="gray">COATING OPTIONS:</h3>
<ol>
<li>No Coating available on all stocks.</li>
</ol>
<h3 class="gray">FOLDING OPTIONS:</h3>
<ol>
<li>Tri-Fold</li>
<li>Z-Fold</li>
<li>... and more</li>
</ol>
<h3>Custom Estimate:</h3>
<p>For custom orders or quantities not listed for your desired product, please click here for a custom estimate.</p>
<h3>Explanation of Turnaround Time</h3>
<p>Here's a quick chart to explain turnaround times:</p>
<img src="/img/products/turnaround.png" height="375" width="380">
<p>Please note that turnaround time does not include shipping or mailing time. You may select from available production turnaround times and your preferred shipping time as you place your order.</p>
<p>Turnaround times begin when the proof is approved. All times are based on standard business days Monday through Friday excluding federal holidays. For orders shipping to the <font color="blue">blue zone</font>, please use the Eastern time zone (New York). For orders shipping to the <font color="red">red zone</font>, please use the Pacific time zone (California). Please see the below map:</p>
<img src="/img/products/map.jpg" height="155" width="300">
<p>Our products are the same great quality for every turnaround time we offer.</p>
To toggle data on and off (show and hide in this case), you will need to use js/jquery. This can only be called through HTML, so I'm afraid you might have to bite the bullet and pay for HTML access.
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.
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>
The design of my website is integrated within their company. Basically they are rebranding their website with my information and logo. They want extra money to change any HTML files. I only have access to the stylesheets .css files and images.
Can I make a css show/hide with the h3 listed in the sample below:
I would like to hide the content under each h3 until the user clicks on it. I have shortened the HTMl I pulled from the product page for sample purposes.
<div id="product_text_content">
<p>Digital Brochures come in full color on 1 or 2 sides. Available options: 8 paper stocks, 5 sizes, and 3 coatings.</p>
<h3 class="gray">SIZE:</h3>
<ol>
<li>8.5" x 11"</li>
<li>8.5" x 14"</li>
<li>11" x 17"</li>
<li>11.5" x 17.5"</li>
<li>5.5" x 8.5"</li>
</ol>
<h3 class="gray">PAPER OPTIONS:</h3>
<ol>
<li>100# Gloss Text available</li>
<li>95# Gloss Cover available</li>
<li>80# Uncoated Offset Smooth Text</li>
<li>100# Uncoated Cover available</li>
<li>70# White Linen Text</li>
<li>100# White Linen Cover</li>
</ol>
<h3 class="gray">COATING OPTIONS:</h3>
<ol>
<li>No Coating available on all stocks.</li>
</ol>
<h3 class="gray">FOLDING OPTIONS:</h3>
<ol>
<li>Tri-Fold</li>
<li>Z-Fold</li>
<li>... and more</li>
</ol>
<h3>Custom Estimate:</h3>
<p>For custom orders or quantities not listed for your desired product, please click here for a custom estimate.</p>
<h3>Explanation of Turnaround Time</h3>
<p>Here's a quick chart to explain turnaround times:</p>
<img src="/img/products/turnaround.png" height="375" width="380">
<p>Please note that turnaround time does not include shipping or mailing time. You may select from available production turnaround times and your preferred shipping time as you place your order.</p>
<p>Turnaround times begin when the proof is approved. All times are based on standard business days Monday through Friday excluding federal holidays. For orders shipping to the <font color="blue">blue zone</font>, please use the Eastern time zone (New York). For orders shipping to the <font color="red">red zone</font>, please use the Pacific time zone (California). Please see the below map:</p>
<img src="/img/products/map.jpg" height="155" width="300">
<p>Our products are the same great quality for every turnaround time we offer.</p>
</div>
You can do something like this:
/* Make H3 look like a link. */
h3 {cursor: pointer;}
/* Hide all the OLs initially */
h3 + ol {display: none;}
/* Show when the user hovers H3 */
h3:hover + ol {display: block;}
/* Or show when he clicks and holds */
h3:active + ol {display: block;}
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