The source code below will create a nice framed, text-wrapped, scaling figure in Bb Learn, with an italicized caption centered below. In technical jargon, you need to embed the CSS in-line, because Bb Learn strips out the header from the HTML. Throughout this tutorial, we are pointing at the same graphic. There is only one copy.
Just create a Blank Page or Item, go into the Code View by clicking the HTML button in the lower right of the toolbar:
This version floated right, scaled to 33%
Copy/paste the following code into the HTML Editor:
<p>text above the graphic</p> <div id="figure" style="float: right; margin: 5px; padding: 5px; border-width: thin; border-color: silver; border-style: solid; width: 33%;"><img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="float: right; width: 100%;" alt="Saint Tropez and its fort in the evening sun" /><p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;"><a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Saint Tropez</a></p> </div><p>wrapped text beside and below the graphic</p>
Next, replace the image link and title info with those for your own graphics. You can also change the float from right to left, or change the width from 33% to anything you like.
How it works line by line:
Reference: http://www.w3.org/Style/Examples/007/figures.en.html
This version floated left, scaled to 10%
Code for a left side version at 10% size:
<div id="figure" style="float:left; margin: 0.5em; padding: 0.5em; border-width: thin; border-color: silver; border-style: solid; width: 10%;"><img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="float: right; width: 100%;" alt="Saint Tropez and its fort in the evening sun" /> <p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;"><a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Saint Tropez</a></p>
<p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;">This version floated left, scaled to 10%</p>
</div>
This version centered, scaled to 15%
<center><div id="figure" style="margin: 0.5em; padding: 0.5em; border-width: thin; border-color: silver; border-style: solid; width: 15%;"><img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="float: right; width: 100%;" alt="Saint Tropez and its fort in the evening sun" /> <p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;"><a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Saint Tropez</a></p><p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;">This version centered, scaled to 15%</p>
</div></center>
Code for a pair of images side by side in a single box. Each of the graphics is set to slightly less than 50% (you have to factor in the margin and pad) so they can sit side-by-side.
Compare Saint Tropez 1 and Saint Tropez 2 and discuss their differences.
<center> <div id="figure2" style="border-width: thin; border-color: silver; border-style: solid; width: 75%;"> <img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="width: 48%; padding: 0.25em; " alt="Saint Tropez and its fort in the evening sun" /><img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="width: 48%; padding: 0.25em;" alt="Saint Tropez and its fort in the evening sun" /> <p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;">Compare <a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Saint Tropez 1</a> and <a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Saint Tropez 2</a> and discuss their differences.</p>
</div> </center>
Code for a pair of stacked images in a single box:
<div id="figure" style="float:right; margin: 0.5em; padding: 0.5em; border-width: thin; border-color: silver; border-style: solid; width: 12%;"><img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="float: right; width: 100%;" alt="Saint Tropez and its fort in the evening sun" /> <p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;"><a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Saint Tropez</a></p><p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;">Image 1</p><img src="http://www.w3.org/Style/Examples/007/st-tropez.jpg" style="float: right; width: 100%;" alt="Saint Tropez and its fort in the evening sun" /> <p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;"><a href="http://en.wikipedia.org/wiki/Saint-Tropez" target="_blank" title="Saint Tropez">Saint Tropez</a></p><p style="text-align: center; font-style: italic; font-size: smaller; text-indent: 0px;">Image 2</p></div>