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;}
Related
I am building an app that formulates how much CBD needs to be put into a product to meet certain requirements. I have included instructions and required materials that are needed to make each recipe. When the user prints the recipe, ideally I would like to not show the instructions or required materials on the sheet.
I have managed to hide all of the required materials and instructions but when the page is set to be printed, it prints a blank page (I'm assuming because the content is spilling over to the next page even though it is hidden) and I do not want this to happen. Here is the HTML for the required materials and instructions:
<div class="noprint">
<hr>
<h1 id="centered">Instructions</h1><br>
<h3 id="centered">Required Materials</h3>
<div class="row">
<div class="column">
<h5 id="centered">Items</h5>
<ul>
<li>1 Aluminum Mixing Bowl</li>
<li>1 Metal Measuring Cup</li>
<li>1 Glass Measuring Cup</li>
<li>1 Small Scale</li>
</ul>
</div>
<div class="column">
<h5 id="centered">Items</h5>
<ul>
<li>1 250 mL Beaker</li>
<li>1 Funnel</li>
<li>1 Plastic Pipet</li>
<li>Cleaning Supplies & PPE</li>
</ul>
</div>
</div>
<h3 id="centered">Steps for Creation</h3>
<div class="instructions">
<ol>
<li>Always begin by washing and sanitizing hands. Then proceed to sanitize all material with rubbing alcohol
and paper towels.
</li>
<li>Measure out the correct amount of either the Dead Sea Salt, Epson Salt, or Baking Soda. Do so by using the
metal measuring cup and scooping the raw goods into the glass measuring cup. Put the raw material into the
aluminum mixing bowl.
</li>
<li>
Repeat Step 2 with both the other two materials not used in Step 1.
</li>
<li>
Measure out the correct amount of CBD tincture with the aide of the 250 mL beaker. Mix in the tincture slowly,
preferably in thirds of the total amount of tincture needed.
</li>
<li>
Use the plastic pipet to measure out the correct amount of milliliters of Grosso E.O. Mix in the Grosso E.O with
the rest of the mixture. Continue to mix until the solution is as homeogeneous as possible.
</li>
<li>
Put aluminum foil over the top of the mixing bowl, write the batch number on top, and store the finished product
in a freezer one day before bottling.
</li>
</ol>
</div>
</div>
And here is the CSS for the "noprint" class:
/* Do not print */
.noprint {
visibility: hidden;
}
Any help is greatly appreciated. Thank you!
I found the solution. Here is the code that I added to my print styles sheet.
html, body {
border: 1px solid white;
height: 99%;
page-break-after: avoid;
page-break-before: avoid;
}
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>
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.
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