Oh, I see. Thanks for the clarification.For the sake of discussion, this is what I figured out. If I add this style element to the top of my index.html:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {width:800px;}
</style>and then add a div to the headerDesktop element to hold a picture of my legend or whatever:
<!-- Desktop header -->
<div id="headerDesktop">
<div class="textArea">
<h1 class="title"></h1>
<h2 class="subtitle"></h2>
<!-- trying to add image in header-->
<div id="legend" style="width:160px;vertical-align:top;background-color:#FFA500;float:right;index">
<img src="mapdata/scarp_thumb.jpg" width="160px" height="160px"/>
</div>
<!-- end legend block -->
</div>
I end up with this (which I guess you'll have to click on to expand - it's not very large in my preview)[ATTACH=CONFIG]31849[/ATTACH]You can see that I have made room for the div by reducing the width of my subtitle and the picture is in the right place horizontally, but it's not aligned correctly vertically. You can only barely see a strip of it above the map frame. I cannot get the div to move up at all. I don't know if its in the wrong div or what. It's frustrating, because it looks so close.So, what I ended up doing, as you can also see in the screenshot, is encode the legend in the map subtitle with html tags as Rupert suggested, which is not too bad.For what is worth to anyone who stumbles on this, the subtitle variable in my index.html looks like this:
subtitle: "Photos are categorized by content:<br><img src='GenericRed.png' height='13px'/> landslide****<img src='GenericPurple.png' height='13px'/> ground shaking****<img src='GenericBlue.png' height='13px'/> post-earthquake engineering<br>foo<br>foo",
