Jump to content

Pulling hair out over figure and figcaption


Recommended Posts

I'm new to forum, a neophyte when it comes to HTML and CSS, brought up via Frontpage with all its "foibles". Trying desperately to fix my website and make it all HTML5 and CSS3 valid.

I'm going crazy trying to insert images in text (floating right or left) with a caption underneath. In the old days of tables I could do this in 5 seconds. So far everything I've tried just doesn't work. To begin clean I created the most simple of test programs with one photo, one caption, no overhead crap, no style sheets. Here is the code:

 

<figure>
<img alt="" src="literature/worktales/images/brunswickMineShotcrete.jpg" style="float:right"/>
<figcaption>Shotcrete</figcaption>
</figure>
The results are here: www.raiderracing.com/test.htm.
I did lots of research on this site and others and tried different scenarios and none worked. I'm using Expressions Web 4 for editing, and latest MS Edge or Google Chrome for browsers.
I tried this on the W3C "Tryit" page and floating the figure left or right leaves the caption where it is.
Using just <img alt="" src="literature/worktales/images/brunswickMineShotcrete.jpg" style="float:right"/>shotcrete achieves the same thing with 4 fewer commands.
So, bottom line: how do I float photos left and right in text, and put a caption underneath?
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...