I’ll preface this by saying that I am completely self-taught when it comes to HTML and CSS. Pretty much everything I know I learned by using Flare and having to figure out new stuff on the fly. I’ve never taken a class on any type of code.

Knowing this, please take mercy on me if the below is something I should have known.

I have been tasked with creating a print document that includes text boxes – something I’ve never done before in Flare. In Word, I’ve done them since DOS practically, but never in Flare. I read the Flare online help topics on text boxes and realized that they were *div tags* (cue scary music here). I say that because div tags and I have a dark and unpleasant history. Usually, when I need them, I find someone to help me for the sake of saving time – and when I can, I avoid them.  There’s no more avoiding for me.

Essentially, the first page of the doc includes H1 – H3 and a text box that is supposed to appear on the right side, the top border lined up with the top border of the H2. No problem, right?

create my topic with all the content and then I put my cursor where I want my text box (approximately. You can always move it later). During the creation of the text box, I set the height and width, a 1px black border, and 5px padding all around. I also set the text box to float right since I want the box to appear on the right edge of the page.

Here’s where the problem comes in. See what happens when I generate a preview of the page:

Obviously, I have a problem with my headers not obeying the margins. It is right about here + 5 hours that I learn the difference between display:block and display:inline in CSS. I had no idea until today (thank you Alvaro!). If you’d like to learn more about the display element, go here. There’s a great description and several examples to help you.

Anyway, I realized that an H2 tag is display:block, which means that the style of the line will extend all the way across the page. Changing the setting to display:inline will not solve the problem (I tried – to save you some time!). So, to defeat this, I set the width of the H3 tag to 65%. In the CSS preview window, it looks great – not so much in actuality. I then created a div tag and a class called “partial” and set the width to 65%.  Code simply looks like this:

width: 65%;

I then surrounded each H3 with this div tag and, poof, it works! The code looks like this:

<h3>Here is a Header 3</h3>

And the actual page looks like this:

If you are having problems with this….save yourself some time (and a LOT of frustration) and do something like this. You can thank me later!

Do you have another way to handle this? If so, please share.

I’m working on a project that uses a lot of image maps. Within the image maps are a number of areas with links to bookmarks on the same page, a link that’s really alt text triggered by a hover, and then a series of boxes that link to topic popups. Fun stuff!

I really want to single-source this image map because it’s being reused in three different topics.  So – to do this I build a snippet that contains the image and the bookmarks…and begin to build the image map…

Except that it doesn’t work.

The image map option is greyed out. It’s because a snippet doesn’t contain the <head> tags where the coordinates lay to create an image map.

Ok, I can figure this out…I’ll put the image in a snippet, insert the snippet in to the topics and build the image map from there. Yeah….no.

Again, it doesn’t work.

But I really really want to single-source this because each image map is complicated – and each new version of the original image forces me to re-do the image map. Not just once….but three times for each time there’s a change to the image.

After a call to tech support (Thank You, Ryan!) – it was confirmed: I couldn’t do what I needed to do. I couldn’t single-source an image map. “There is…another.”

Another option, that is.

And while it may not be pretty – it really works. It’s called Ctrl C….Ctrl V.

Here’s what I did:

I inserted the image in to the first topic (Topic 1) where it was needed. I built the image map with all necessary objects. Ctrl-S here!

Then I opened the next topic where the image and image map needed to be (Topic 2) in text editor (not xml editor).

I returned to Topic 1, again in text editor, and selected and copied the entire map code <map> immediately below the </head> tag and above the <body> tag.  An example of the image map code and its location in the topic code is shown here:

So, copy that code from Topic 1 and paste it in to Topic 2 in the exact same location.

Then, you need to copy and paste the image code as well. See an example of the image code here:

Again, copy that code (I include the <p> tag too) from Topic 1 to Topic 2 and you’re done using an image map in two locations while only actually building it once.