|
06-27-2017, 07:30 AM | #1 |
Member
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
|
HTML5 <figure> and <figcaption>
My office is (finally) updating to HTML5. We've run into a problem with figure and figcaption we're not sure how to handle.
Example: <figure class="flright"> <figcaption class="captionblue top small"> Figure 9: Constant Tension Catenary System </figcaption> <img src="page02_files/image012.png" alt="Picture shows an example of a constant tension catenary system which utilizes a counterweight system that pulls the overhead wires into constant tension as the wires heat up and expand, preventing the wires from sagging."><p><strong>Source: </strong><a href="http://www.railway-technology.com/uploads/newsarticle/647405/images/135796/large/3-auto-tension.jpg">http://www.railway-technology.com/</a></p> </figure> The class="flright" is just a float: right. The problem is with the <p> tag under the <img> tag. The text doesn't wrap the way the figcaption text does. (It's all display: table HTML5 doesn't allow 2 <figcaption> tags within 1 <figure> tag. Is there a way (preferably with CSS) to get the <p> tag to "behave"? Thanks, Dennis __________________ Dennis |
06-27-2017, 09:36 AM | #2 |
Member
Join Date: Mar 2005
Location: Derby,UK
Posts: 1,509
|
You need to set a width on the figure element. Depending on the width of the image you might want to set that at 100% to fit it in the figure element (unless you want margins of course).
|
06-27-2017, 10:43 AM | #3 |
Member
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
|
I was just coming back to say we solved it. We figured out that you can nest <figure> tags.
This code works and validates. <figure class="flright"> <figcaption class="captionblue top small"> Figure 9: Constant Tension Catenary System </figcaption> <figure><img src="page02_files/image012.png" alt="Picture shows an example of a constant tension catenary system which utilizes a counterweight system that pulls the overhead wires into constant tension as the wires heat up and expand, preventing the wires from sagging."><figcaption><strong>Source:</strong> <a href="http://www.railway-technology.com/uploads/newsarticle/647405/images/135796/large/3-auto-tension.jpg">http://www.railway-technology.com/</a></figcaption> </figure></figure> __________________ Dennis |
Thread Tools | |
Display Modes | |
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Need Advice: Moving From Flash to HTML5 | Ronald | Software | 3 | 01-17-2015 11:57 PM |
OpenType default figure styles | Paul | Fonts & Typography | 0 | 02-03-2013 05:16 PM |
XHTML to HTML5 | CarlSeiler | Web Site Building & Maintenance | 5 | 12-16-2011 07:41 AM |
Neat demonstration of HTML5 | Kelvyn | Web Design | 1 | 07-21-2010 07:44 AM |
InDesign figure numbering | Howard Allen | Print Production & Automation | 7 | 01-20-2009 08:11 AM |