DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Design

Reply
 
Thread Tools Display Modes
Old 06-27-2017, 07:30 AM   #1
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default 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
dacoyle is offline   Reply With Quote
Old 06-27-2017, 09:36 AM   #2
Bo Aakerstrom
Member
 
Bo Aakerstrom's Avatar
 
Join Date: Mar 2005
Location: Derby,UK
Posts: 1,509
Default

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).

   
__________________
www.boaakerstrom.com
Behance Portfolio
Bo Aakerstrom is offline   Reply With Quote
Old 06-27-2017, 10:43 AM   #3
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

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
dacoyle is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

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


All times are GMT -8. The time now is 09:20 PM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
Contents copyright 2004–2019 Desktop Publishing Forum and its members.